26/02/2023 15:31 Basic CRUD App setup with React, Node.

js, Express, MySQL | by Arijit Chowdhury | Medium

Continue to Medium

Sign up Already have an account? Sign in

You have 1 free member-only story left this month.

Click “Sign Up” to agree to Medium’s Terms of Service and
Sign up for Medium and get an extra one
acknowledge that Medium’s Privacy Policy applies to you.

Arijit Chowdhury Follow

Jun 6, 2020 · 3 min read · Member-only · Listen

Basic CRUD App setup with React, Node.js,

Express, MySQL
This is a quick tutorial to set up your CRUD application using React as a
frontend and Node.js-Express server as a backend with MySQL as database
service.

https://medium.com/@arijit_chowdhury/basic-crud-app-setup-with-react-node-js-express-mysql-5e097e1145ff 1/10
26/02/2023 15:31 Basic CRUD App setup with React, Node.js, Express, MySQL | by Arijit Chowdhury | Medium

Continue to Medium

Sign up Already have an account? Sign in

Click “Sign Up” to agree to Medium’s Terms of Service and

acknowledge that Medium’s Privacy Policy applies to you.

Cover Photo Designed on piktochar

MySQL — is the most popular Open Source Relational SQL Database

Management System.

Node.js — is an asynchronous event-driven JavaScript runtime, is

designed to build scalable network applications.
https://medium.com/@arijit_chowdhury/basic-crud-app-setup-with-react-node-js-express-mysql-5e097e1145ff 2/10
26/02/2023 15:31 Basic CRUD App setup with React, Node.js, Express, MySQL | by Arijit Chowdhury | Medium

Express.js — is a minimal and flexible Node.js web application

framework.
Continue to Medium
React.js — is a declarative, efficient, and flexible JavaScript library for
building user interfaces. Sign up Already have an account? Sign in

Click “Sign Up” to agree to Medium’s Terms of Service and

acknowledge that Medium’s Privacy Policy applies to you.

Creating a simple Node.js — Express server

So, let’s begin the application development by creating a directory for this
project. Once you are done, open up the terminal and change the directory
Sign up Sign In
to the project directory. Now you need to set up the project configuration,
type the
Search Medium following command on the terminal. Write

npm init -y

It will create a package.json file in this folder.

Now, you need to install the required packages.

npm i express body-parser mysql2

https://medium.com/@arijit_chowdhury/basic-crud-app-setup-with-react-node-js-express-mysql-5e097e1145ff 3/10
26/02/2023 15:31 Basic CRUD App setup with React, Node.js, Express, MySQL | by Arijit Chowdhury | Medium

npm i -D nodemon

Continue to Medium
Your package.json file will look something like this.
Sign up Already have an account? Sign in

Click “Sign Up” to agree to Medium’s Terms of Service and

acknowledge that Medium’s Privacy Policy applies to you.
{
"name": "React-Node-Express-MySQL",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test
121 specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"express": "^4.17.1",
"mysql2": "^2.1.0"
},
"devDependencies": {
"nodemon": "^2.0.4"
}
}

create a server.js file.

https://medium.com/@arijit_chowdhury/basic-crud-app-setup-with-react-node-js-express-mysql-5e097e1145ff 4/10
26/02/2023 15:31 Basic CRUD App setup with React, Node.js, Express, MySQL | by Arijit Chowdhury | Medium

add this two-line to package.json”scripts”: {

…
Continue to Medium
“start”: “node server.js”,
“start:dev”: “nodemon server.js” Sign up Already have an account? Sign in

},
Click “Sign Up” to agree to Medium’s Terms of Service and
acknowledge that Medium’s Privacy Policy applies to you.

...
"scripts": {
...
"start": "node server.js",
"start:dev": "nodemon server.js"
},
...

run this command on the terminal

npm run start:dev

It will show this output

https://medium.com/@arijit_chowdhury/basic-crud-app-setup-with-react-node-js-express-mysql-5e097e1145ff 5/10
26/02/2023 15:31 Basic CRUD App setup with React, Node.js, Express, MySQL | by Arijit Chowdhury | Medium

[nodemon] starting `node server.js`

Server started at port 5000
Continue to Medium

Sign up Already have an account? Sign in

Click “Sign Up” to agree to Medium’s Terms of Service and

acknowledge that Medium’s Privacy Policy applies to you.

Connecting to MySQL database

create a db.js file

Now our server is running on http://localhost:5000 and MySQL database is

connected. Now we need to create routes so that we can send requests to the
server from our frontend.

open a browser and go to http://localhost:5000/products link, you’ll see the

products store in the database.

Note that to view the products you need to add product table and some of the
products to the database.

Creating frontend with React

https://medium.com/@arijit_chowdhury/basic-crud-app-setup-with-react-node-js-express-mysql-5e097e1145ff 6/10
26/02/2023 15:31 Basic CRUD App setup with React, Node.js, Express, MySQL | by Arijit Chowdhury | Medium

First of all, create a frontend folder and open a terminal on that folder and
run -
Continue to Medium

Sign up Already have an account? Sign in

npx create-react-app appName
cd appName Click “Sign Up” to agree to Medium’s Terms of Service and
npm start acknowledge that Medium’s Privacy Policy applies to you.

so, our frontend is running on port 3000 and our backend is on port 5000.

add the following line to frontend’s package.json -

...,
"proxy": "http://localhost:5000",
...

open app.js file in src folder and add this code

https://medium.com/@arijit_chowdhury/basic-crud-app-setup-with-react-node-js-express-mysql-5e097e1145ff 7/10
26/02/2023 15:31 Basic CRUD App setup with React, Node.js, Express, MySQL | by Arijit Chowdhury | Medium

Continue to Medium

Sign up Already have an account? Sign in

Click “Sign Up” to agree to Medium’s Terms of Service and

acknowledge that Medium’s Privacy Policy applies to you.

https://medium.com/@arijit_chowdhury/basic-crud-app-setup-with-react-node-js-express-mysql-5e097e1145ff 8/10
26/02/2023 15:31 Basic CRUD App setup with React, Node.js, Express, MySQL | by Arijit Chowdhury | Medium

open up your browser and open http://localhost:3000. Your products will

show on the web page.
Continue to Medium

Sign up Already have an account? Sign in

Click “Sign Up” to agree to Medium’s Terms of Service and

acknowledge that Medium’s Privacy Policy applies to you.

This brings to the end of this article. This is a quick tutorial to startup your
React-Node application with MySQL.
https://medium.com/@arijit_chowdhury/basic-crud-app-setup-with-react-node-js-express-mysql-5e097e1145ff 9/10
26/02/2023 15:31 Basic CRUD App setup with React, Node.js, Express, MySQL | by Arijit Chowdhury | Medium

Start building your awesome website…

Continue to Medium
happy hacking…..
Sign up Already have an account? Sign in

Click “Sign Up” to agree to Medium’s Terms of Service and

acknowledge that Medium’s Privacy Policy applies to you.
Nodejs Expressjs React MySQL

About Help Terms Privacy

https://medium.com/@arijit_chowdhury/basic-crud-app-setup-with-react-node-js-express-mysql-5e097e1145ff 10/10