react-node-template

React Node Template is a simple, unopinionated, full stack web app template, with the goal of facilitating quick prototyping and deployment to Heroku or elsewhere.

This template combines a client generated by create-react-app and a server generated by express-generator.

In local dev, the React dev server & Node server are run side by side, with API calls proxied through the React dev server to the Node server. In production, the Node app will serve both the static React production build and the API.

This project can be deployed as is to Heroku; the heroku-postbuild script will generate a production build of the React app and the start script will kick off the Node server.

See it deployed here: https://react-node-temp.herokuapp.com/

Just click the green Use this template button on the GitHub page for this repo to create your own project based off it.

Overview

The goal of this project is a simple, turnkey, full stack web app that can be easily deployed to Heroku with no further configuration. By combining the frontend client and backend server into the same repository, rapid development and prototyping (possibly by a single developer) are prioritized.

In the interest of being bare-bones and unopinionated, React Node Template does NOT include:

• Routing: React Router is a good option.
• State management: Redux is most popular, but there are lighter weight solutions that may be better for some projects.
• Auth: Many options here, but Auth0 is one of the easier implementation paths.
• Component styling: Material-UI is fairly turnkey way to get started, or Styled Components if you want the flexibility to design everything yourself.

Development

Project Structure

• src/client contains the React app
• src/server contains the Node Express.js app
• package.json in the project root contains scripts to run in dev mode locally, and also to build and run on Heroku

Local Dev Setup

All commands run from project root:

1. cd src/client && npm install
2. cd src/server && npm install
3. Make sure nodemon & concurrently are installed globally
4. npm run dev

You will now see the output of both the React dev server and the Node server in your shell, running at the same time thanks to concurrently. Enjoy!

Client<->Server Communication

The Node Express.js server is initialized with one router mounted at /api. We've implemented a sample route at /api/users. Edit the src/server/routes/api.js file to add your own routes and server-side logic.

In the React app, you can see in src/client/src/App.jsx where we're calling /api/users using fetch. App.jsx is a functional component, so you can see how we're using useEffect to call our API on component mount, and useState to update component state when we receive a response from the API.

Deployment

Heroku

This project can be deployed as is to Heroku. Check out the Heroku deployment guide for more info. Some of the most popular deployment strategies include:

• Deploying with Git (pushing to Heroku as a remote)
• Deploying with GitHub (connecting Heroku to your GitHub account)

Elsewhere

Deploying to Amazon Web Services, Google Cloud, Microsoft Azure, etc should work similarly. Just make sure to run the heroku-postbuild script, which generates the React production files, before the start entry point is hit. Depending on your use case and hosting infrastructure, it might make sense to Dockerize this template.

simon-interview