Overview

The Express React Starter is a template that allows developers to use Express and React together in the same project. It is based on Create React App. This template provides a convenient workflow for developing and deploying applications that use both Express and React.

Features

• Express and React integration: Easily use Express and React in the same project.
• Development workflow: The template provides a workflow for running both the frontend and API in development mode, with automatic reloading of changes.
• Proxy setup: AJAX/fetch requests to /api routes are sent to the Express server via a proxy setup in the package.json file.
• Production build: The template includes instructions for building the app for production, with Express serving the built app.

Installation

To install the Express React Starter, follow these steps:

1. Install create-react-app globally, if not already installed:

   npm install -g create-react-app
   

2. Create a new React app using create-react-app:

   create-react-app my-app
   

3. Change into the app directory:

   cd my-app
   

4. Add the Express React Starter as a dependency:

   npm install express-react-starter --save
   

5. Update the entrypoint to use the Express server:

   • Replace the “scripts” section in package.json with:

   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "dev": "concurrently \"react-scripts start\" \"node server.js\"",
     "prod": "node server.js"
   },
   

6. Create a new server.js file in the root directory of your app:

   • Add the following code to server.js:

   const express = require('express');
   const app = express();
   const port = process.env.PORT || 3001;
   app.use(express.static('build'));
   
   app.get('/', (req, res) => {
     res.sendFile(path.join(__dirname, 'build', 'index.html'));
   });
   
   app.listen(port, () => {
     console.log(`Server running on port ${port}`);
   });
   

7. Start the app in development mode:

   npm run dev
   

8. Access the app at ‘http://localhost:3001’ and start building your Express and React app!

Summary

The Express React Starter is a template that allows developers to easily combine Express and React in the same project. It provides a convenient development workflow and instructions for building the app for production. With this template, developers can quickly start building full-stack applications using Express and React.