In this article, I'll show you how to create a project with React, Node, and Express. We'll get the frontend (React) and backend (Node/Express) communicating with each other.
If you want a video version, you can watch my YouTube video here:
I've been creating this MusicTalk app on my YouTube channel. It's an app like Facebook, but people talk about music. There's a lot of good lessons that I think will also be helpful blog posts. So let's get into it!
Project Setup
So, the way we’re going to set this up is we’ll make a directory, or folder, which will be our project. Then we’ll put 2 folders inside of our project. One folder will be a react project - that’ll be our frontend. We’ll call that folder client
.
Then, we’ll create another folder called server
. This will be a Node and Express backend where we write our server side code and interact with our database. (I'll do a follow up article where we connect to MySQL)
So in our terminal, we'll create our project folder by running mkdir MusicTalk
. Then, we'll change directory into that folder/project by running cd MusicTalk
.
React Project - Client
Next, we'll create our React project - our frontend - which we'll just call client. So we'll run, npx create-react-app client
.
Node/Express Project - Server
Then, we'll create the folder which will be our Node/Express app. So while we're still in our MusicTalk folder, we'll create another folder by running mkdir server
.
Let's go into our server folder by running cd server
.
We’ll run npm init
to create a node application and create a package.json file where our dependencies will live. So any packages we add to our Node application, will be added to the package.json file.
It'll give us some prompts regarding the package.json file. Most people just hit Enter and pass through all of those.
One thing to note is the
entry point
prompt. It should say index.js by default. Some people will change that to app.js, but most leave it as index.js. When our express app is setup, we'll start the server by runningnode
then the file name. Sonode index.js
.
Open Project in Code Editor
We can now change directory and go back a level to the root of our project with cd ..
. Once there, we can open up our code editor by running code .
.
Not able to open VS Code with
code .
? Check out this video here.
In VS Code, we'll see 2 folders: client and server. Client is our React app. Server is our Node app. Inside our Node app, we see our package.json.
Install and Setup Express
Now we’ll want to install Express in our Node app. Express is a backend Node framework for creating API's. Basically for creating a server and ways to communicate with your server. We’ll change directory back into the server by running cd server
, then we'll run npm install express
. Express will now be in our package.json file.
We can now create an index.js file - which is our entry point for our Node app.
In this file, we can create a constant called express and run require(’express’). Then make a const called app and call the express function.
const express = require('express');
const app = express();
We can console.log that express app and get a look at all the different methods we get with it. When we run
node index.js
in our terminal after we finish setting up our index.js file, the console.log will show in our terminal. There are some http methods (app.get, app.post, etc), a connect method (app.connect - we’ll use that to connect to our database in a future article).
There’s also the listen method. we’ll use that to start the server and have it listen for requests on a specific port. Since React runs on port 3000 by default, let's use port 8080.
app.listen(8080, () => {
console.log('server listening on port 8080')
})
So, after all that, your index.js file should look like this:
//index.js
const express = require('express');
const app = express();
console.log(app)
app.listen(8080, () => {
console.log('server listening on port 8080')
})
In the terminal, we can run node index.js
(the name of our file) and we'll see a very big console.log of our express app, and that our server is listening on port 8080! 🎉
We can quit and shut the server down with Control + C.
Adding a Route
Now let's add a route! We'll use our Express app to listen for a get request at path '/' (root/homepage).
We can replace the console.log(app) with:
app.get('/', (req, res) => {
res.send('Hello from our server!')
})
The (req, res) => {} is a callback function, where we have access to the request and the response as parameters.
We're using the send method on the response object to send a string when the '/' path is hit. You could also send a boolean, or data. Typically this would be a JSON object or an array of data.
Add Axios for API Calls
Now, we can go to our client side React application and install axios. Then use that to make requests to our backend and start sending data from our backend to our frontend.
In VS Code, we can use a separate terminal (Control + backtick to open a terminal). Make sure we're in our client folder - our React app. Then run npm install axios
.
Make API Call to Our Backend
In our App.js, we can remove any of the default content or styles that we don't want and create our own.
My App.js ended up looking like this:
//App.js
import axios from 'axios';
import './App.css';
//data will be the string we send from our server
const apiCall = () => {
axios.get('http://localhost:8080').then((data) => {
//this console.log will be in our frontend console
console.log(data)
})
}
function App() {
return (
<div className="App">
<header className="App-header">
<button onClick={apiCall}>Make API Call</button>
</header>
</div>
);
}
But wait! We'll get the dreaded CORS error 😭.
So in our server terminal, we'll add the cors package with npm install cors
.
In our index.js, we'll require and use that. Your index.js will look like this:
//index.js
const express = require('express');
const app = express();
const cors = require('cors');
app.use(cors())
app.get('/', (req, res) => {
res.send('Hello from our server!')
})
app.listen(8080, () => {
console.log('server listening on port 8080')
})
Nooow if we run our React app with npm run start
in the client terminal (after starting our server back up in the server terminal), and click our button...
It works!
Conclusion
So to wrap up this very lengthy blog post 😅 (but hopefully helpful!), we:
- Created a Node/Express app for our backend
- Configured our server
- Created a React app for our frontend
- Made an API call to our server
- Sent data from our backend to our frontend
Hope this helped!
Thank you for reading and happy coding!
Top comments (8)
Thank you a lot
My pleasure! Glad it helped!
You are great!
Thanks for your help. I have the same structure. But, one question, if we have 2 separate folders for client and server. When deployed, how does it work?
In my case, I deploy on render, with only the server folder, I can easily run node.js. But, with also client folder, I’m wondering how to set these 2 up to run concurrently?!
I still would have the cors error after installing and using it in index.js...
amazing
How to develop fullstack web application using React JS with Express JS -
tekody.com/blogs/react-js-with-exp...
Nice article. Very simple! Thank you.