Universal Create React App

This project is a refactoring of the default app created by create-react-app v1.0.7, and then ejected.

A universal app runs both on the server and the client, and shares as much code as possible between the server and client - typically around 90%.

Development

Production

For a step by step explanation read the article https://medium.com/leanjs/universal-create-react-app-step-by-step-b80ba68d125d

How to run this project

• yarn install
• yarn start to run it in development
• npm run build to build the production bundle. You must build the production bundle before running the production bundle.
• npm run serve to run the production bundle.
• You can disable JavaScript on your browser, and use the app to test that the app is functional.
• With JavaScript enabled and running the app in development mode (yarn start), you can test the CSS hot reloading by changing this file /src/client/index.css

Explanation

The source code (src) is split in 3 folders:

• client. This is code that runs just on the browser.
• server. This is code that runs just on the server.
• shared. This is code that runs both on the server and on the client

The server is implemented using Express

There are two build scripts. One to build the JavaScript bundle that will be sent to the client. By default from the same server but you could serve it via a CDN or anywhere else. The other build script builds the JavaScript bundle that runs on the server.

• /scripts/build-client.js
• /scripts/build-server.js

The start script will try to run the client (Webpack Dev Server) on a given port (3000 by default). If the port is not available it will try to find another port. We have implemented the same on the port used to run the server. The start script will try to run the server (Express compiled with Webpack) on a given port (5678 by default). If the port is not available it will try to find another port.

For a step by step explanation read the article https://medium.com/leanjs/universal-create-react-app-step-by-step-b80ba68d125d

Features

All the features that you have in create-react-app are included in this project, plus react-router v4.

• yarn start will start two servers. The first one (Webpack Dev Server), to build and serve the JavaScript bundle to the client. The Second one (Express), to render the app on the server.
• CSS Hot reloading is enabled. You'll notice a quick adjustment to the layout in development mode when you start the app. This is because while in development env the CSS is served via the Webpack Hot Module Replacement. So the app is rendered without CSS from the server, and then on the client it is injected when the JavaScript is run. If you run the app in production mode by executing npm run serve (note, you must first build the production bundle by executing npm run build), the CSS will be displayed from the beginning. The reason for this is that we don't hot replace the CSS in production.
• "Page Not found" with a 404 status on the server-side without defining any route on the server.

Acknowledgments

Apollo GitHunt-React example was a great source of inspiration for finding solutions.

README generated by create-react-app v1.0.7

You can read here the original README.md generated by create-react-app in this repo https://github.com/facebookincubator/create-react-app/blob/v1.0.7/packages/react-scripts/template/README.md