Express React Starter

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:

Install create-react-app globally, if not already installed:
```
npm install -g create-react-app
```
Create a new React app using create-react-app:
```
create-react-app my-app
```
Change into the app directory:
```
cd my-app
```
Add the Express React Starter as a dependency:
```
npm install express-react-starter --save
```

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"
},

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}`);
});

Start the app in development mode:
```
npm run dev
```
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.