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

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:

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
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:

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

📝 Note: To simplify this process, "npm-run-all" was added to the devDependencies. Local development can instead be started at the root ./ via "dev" script:

# Initial setup
npm install

# Start the backend and frontend servers
npm run dev

Run the Node API Server

In a terminal:

# Initial setup
npm install

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

Install new npm packages for Node:

npm install package-name --save

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

Install new npm packages for React Frontend UI:

# Always change directory, first
cd client/

npm install package-name --save