create-react-app with a custom Node Server

This is a simple website boilerplate that uses a React frontend and a custom Node backend (server for API, proxy, & routing).

• 🗂 File Layout
• 👾 App Demo
• 💻 Local Development

This boilerplate can be used as a starting point for projects, which are intended to be deployed to a hosting service such as Heroku or other fullstack applications.

📚 Helpful Links/Projects to Reference

• Deploying create-react-app
• React Production Deployment on Netlify, Vercel and Heroku
• create-react-app with a Node server on Heroku

File Layout

This project consists of a client folder, which contains the React frontend UI, and a server folder, which contains the Node backend server. The boilerplate is a combination of two npm projects, so there are two package.json configs and therefore two places to run npm commands:

1. Node server: ./package.json
   • contains express starter code in the server/app.js file
   • contains example api routing in the server/api/index.js file
2. React client: client/package.json
   • generated by create-react-app
   • production build generated via build script in the Node server's ./package.json

App Demo

A small demo is included in this project. In the api/index.js file of the Node Server, there is one POST route and one GET route.

• The GET route returns "Welcome to your express server! Start creating and editing your api routes in the server/api folder." If you navigate to the Node Server url "localhost:8080/api", the message will be displayed.
• The POST route returns "POST request received! This is the message that was sent: [user input]". When submitting the form found on the homepage of the app, React calls the Express.js POST route and displays the message.
• The app also has client side routing using the React Router, which navigates the user to a 404 page when a URL that does not exist is entered.

You can see a small demo of the app below:

Local Development

Because this app is made of two npm projects, there are two places to run npm commands:

1. Node API Server at the root ./
2. React Frontend UI in client/ directory.

Run the Node API Server

In a terminal:

# Initial setup
npm install

# Start the server at http://localhost:8080/
npm start

Run the React Frontend UI

The React app is configured to proxy backend requests to the local Node server. (See "proxy" config)

In a separate terminal from the API server, start the UI:

# Always change directory, first
cd client/

# Initial setup
npm install

# Start the server http://localhost:3000/
npm start

Run both the Node API server and React Frontend UI

📝 Note: To simplify the process for starting the API and Frontend server, "npm-run-all" was added to the devDependencies.

Local development can instead be started at the root ./ via "dev" script by doing the following:

# Initial setup
npm install

# Start the backend and frontend servers
npm run dev

How to install new npm packages

Install new npm packages for Node:

npm install package-name --save

Install new npm packages for React Frontend UI:

# Always change directory, first
cd client/

npm install package-name --save