Skip to content
A starter template for running React and Express from the same project
JavaScript HTML CSS
Branch: master
Clone or download
Burke Holland Burke Holland
Burke Holland and Burke Holland Add nodemon dep
Latest commit d1b46b0 Sep 11, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Add .vscode stuff back Sep 8, 2017
public initial commit Jul 20, 2017
server adddebug dep Sep 8, 2017
src Add concurrently for start script Sep 11, 2017
.dockerignore Adding Docker file for all the hipsters Aug 1, 2017
.gitignore remove build folder Jul 20, 2017
Dockerfile Adding Docker file for all the hipsters Aug 1, 2017
README.md Update README.md Aug 7, 2017
package-lock.json Add nodemon dep Sep 11, 2017
package.json Add nodemon dep Sep 11, 2017

README.md

Express React Starter

This is a template for using Express and React in the same project. It is based on Create React App.

Read the article: Introducing Express React Starter

OR...

Prerequisites

Installing

git clone 'this-repo-url' app-name
cd app-name
npm install

Running The App

The template can be run in development, or in production. For development, use the following workflow.

Start the Express Server

node server/server.js

Start Create React App

In a different terminal tab...

npm start

Imgur

The "Welcome to React" is a message that comes from the Express server.

What Is Happening Here?

Create React App and the Express server are running on different processes. This is so that React can still use in memory Webpack to do hot reloads really fast.

All AJAX/fetch requests to /api are sent back to the Express server which is serving all /api routes from the routes/index.js file. This is done via a proxy setup in the package.json file.

Building For Production

In production, you want Express to serve up your app.

Build React App

npm build

Now simply visit the Express app at 'http://localhost:3001' and you will see your app served from the 'build' folder. That's all there is to it!

You can’t perform that action at this time.