Build and Deploy a Web Application With React and Node.js+Express

A step-by-step guide to integrating Node.js, Express, and React.

Leandro Ercoli
May 3 · 5 min read

The application

To go through the steps of connecting and running together a Node.js server with a React application, we will build a simple web application to search for artworks on the Art Institute of Chicago’s API. We will set up a basic login page, save a token on the browser to keep the user signed in, and search for artworks by a keyword on AIC’s database. A log out button on the homepage will remove the token from local storage and redirect the user to the login page.

Back end

First, we will start by building the back end of the application. Download and install the latest version of Node.js. Create a new folder for this project and open a terminal window inside it. Run npm init to quickly create a package.json file, where we will list all the dependencies and their versions, as well as other metadata. This makes the project reproducible and eases collaboration between developers.

npm i express cors dotenv express-validator
Entry point file
models/server.js
routes/auth.js
controllers/auth.js

API Integration

Since AIC’s API requires no authorization protocol to request data, the controller will receive a keyword from the front end as a URL parameter and execute a request to the API for artworks that match the search term/s. To communicate with the API, we will install cross-fetch library and execute a GET request with the appropriate parameters.

controllers/homepage.js

Front end

We will group all front end (React) code into a new folder at root level. It will pick up the same .gitignore rules we defined for the Node server (if you haven’t yet, git init will create a new Git repository). Go into the folder created and start a React project with Create React App.

npx create-react-app node-react
Folder structure and front end proxy
App.js
api/index.js
const artworks = await searchArtworks({ keyword });
components/homepage.js

Concurrently

Developing and running the front and back end at the same time gets easier if we use npm’s package concurrently: we can run multiple commands concurrently and automatically reload both servers with every change.

npm i -D concurrently
Server’s package.json

Deployment

Before deploying the application to a hosting service, we need to build the client application and tell the back end how to load it.

this.app.use(express.static(
path.join(__dirname,“../client/build”)));
models/server.js

Geek Culture

Proud to geek out.

Sign up for Geek Culture Hits

By Geek Culture

Subscribe to receive top 10 most read stories of Geek Culture — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Leandro Ercoli

Written by

Computer Engineer — Full-stack web developer and multi-platform mobile developer

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store