CSV to SQL import using Node, Express and React

#react #node #express #sql

CSV to SQL import

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.

Top comments (4)

Mobilise-Dev • Sep 3 '20

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.