Andrew

Posted on Aug 2, 2023 • Updated on Feb 14

Creating a React, Node, and Express App

#react #node #express #webdev

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 running node then the file name. So node 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!