CSV to SQL import using Node, Express and React

CSV to SQL import

Github : Front-End Part
              Back-End Part

What is this app all about ?

This app allows users to import a .csv file and save it in MySQL. The .csv file needs to be in a specified format, something like this .
Once the data is saved we can see and delete the table data on the front-end.

Whats there on back-end and front-end ?

• Back-End :
  • NodeJS
  • ExpressJS
  • MySQL
• Front-End :
  • ReactJS

Here is the SQL table structure :

Field	Type
id	int(11)
level_col	varchar(255)
cvss	varchar(255)
title	varchar(255)
vulnerability	varchar(255)
solution	varchar(255)
reference_col	varchar(255)

Where is it deployed ?

Client side app ( React app ) is deployed on Netlify
Server side app ( Node app ) is deployed on Heroku
MySQL database is deployed on Remote Mysql

How to run it locally ?

To run it locally we need to clone two git repositories, one for the server and other for the client ( front-end).

To clone the client repo :

git clone https://github.com/krishankantray/csv-to-sql-import-client.git

To clone the server repo :

git clone https://github.com/krishankantray/csv-to-sql-import-server.git

The above git setup is for online server auto deployment on Heroku and Netlify .
We need to make some changes in it to run it locally.

First we setup the server locally :

• Open the directory : csv-to-sql-import-server , in any vscode or any other editor. - If you have a local MySql db then do replace the details in the app>>config>>db.config.js

If you don't have a local MySql db then leave it as it is.

Now, open terminal ( in the directory : csv-to-sql-import-server ):

npm install

npm start

It should print in terminal :

Server is running on port 9000.

( Make sure there is nothing previously running on port 9000, if there is then change the >port from line 25 of server.js )

To test if all APIs are working, open postman and use following APIs

• GET call for obtaining all the records, url should be : http://localhost:9000/customers/ .

• GET call for single records by id, for eg : http://localhost:9000/customers/963

• POST call for bulk create records : http://localhost:9000/bulkcreate This call needs a body to be passed

• POST call for single create records http://localhost:9000/customers This call needs a body to be passed

• DELETE call for all records deletion
  
  http://localhost:9000/customers
  

• DELETE call for records deletion
  
  http://localhost:9000/customers/963
  

• PUT call to update a single record
  
  http://localhost:9000/customers/963
  

Now, we will configure the local front-end ( React app ) :

We only need to make some changes in App.js within src directory.
Just change the line 35 , 69 and 97, i.e we need to change the URL of all the fetch calls from Apps.js.

For Example :

35 : Before https://csv-to-sql-import.herokuapp.com/bulkcreate
35 : After http:localhost:9000/bulkcreate

Similarly for line 69 and 97 , just replace this part of URL -
https://csv-to-sql-import.herokuapp.com
with
http:localhost:9000

and rest of the part of url remains same.

Comments

[Akshay090493]

Bulkupload is not working. Can you help me on this?

[Krishankant Ray]

@akshay090493 What issue are you facing, please elaborate ?

[BobMcFrite]

POST http:localhost:9000/bulkcreate
Error: getaddrinfo ENOTFOUND http:localhost

i dont know why, the front work but show error, can u help me ?

[Mobilise-Dev]

This is an excellent article and accompanying application. I'd never used React before and had done a bit of NodeJS, but this article got me up and running quickly. Thank you.