create-express-react

Get started with create-react-app and your own express server for development and production.

Features

CLI to generate project structure
Fully ES6 support
Pre-written npm scripts to help development, testing, linting, building and deployment process
Eslint for both frontend and backend
Jest for both frontend and backend

Prerequisites

Node.js, from v0.12.x to the latest version. Using any version of v6.x.x or above is preferred.

Installing

First of all, you should install create-express-react via npm as a global package, this is the CLI to generate the template for you to get started.

npm install create-express-react -g

Once you have create-express-react, then run it to create the template. The command below will generate a folder named myApp in Desktop.

cd ~/Desktop
create-express-react myApp

Then you need to grab create-react-app by running:

cd ~/myApp
npm install
npm run setup

Finally, you can start your app:

npm start

How to touch webpack config inside `create-react-app`

For example to install ANTD

in project root:

npm install antd --save
npm install babel-plugin-import --save-dev

cd frontend

npm install react-app-rewired --save-dev

Replace

"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",

With:

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",

inside frontend folder:

touch config-overrides.js

add code:

const { injectBabelPlugin } = require("react-app-rewired");

module.exports = function override(config, env) {
	config = injectBabelPlugin(
		["import", { libraryName: "antd", style: "css" }],
		config
	);
	return config;
};

You are all set for modular import of ANTD, follow the docs and add LocaleProvider for EN

Go back to your project root and you can run as usual with

npm start

If you encounter an error:

 Error: Cannot find module 'react-scripts/package.json'

fix with:

cd frontend
npm install

Scripts

There are a lot of pre-written npm scripts to help you speed up the development and deployment process.

npm run setup

Using official create-react-app to generate a folder root/frontend for all frontend development. Also adding the proxy setting in root/frontend/package.json to pass request to express server.

npm run start

Concurrently starting webpack-dev-server for react running on port 3000, and express backend server on port 4000. HOC will be enabled for all react related code and also the server will be restarted by nodemon if there is any change made for the backend code.

npm run test-server

Running server tests via Jest, which are in root/server/__test__

npm run test-react

Running react tests via Jest. There is no test file by default, you may create a folder /root/frontend/__test__ and put all test files there.

npm run lint

Run ESLint on all backend code. The config files can be found in root/.eslintrc and root/.eslintignore. Please note that the linting for react will be auto-enabled when you run npm run start

npm run build

Build all the server side code into root/dist, then build react and move all built files (index.html, javascript, css, images, etc.) to root/dist/public for production

npm run deploy

Deploy the server via pm2, you can find the config file in root/deploy.json.

There are also some helper npm scripts, see more details in root/package.json.

Communication

Dev

For Development, the webpack-dev-server is running on port 3000 serving react app, and the backend express server is running on port 4000. All of the requests sent by frontend app will be passed to express server via proxy.

Web App <--- Webpack-dev-server <---> Proxy <---> Express Server

Production

For Production, all the frontend code will be compiled and moved into a static directory inside express server. Now there is just one express server running, which is serving both the frontend app and backend endpoints.

Endpoints <--- Express Server ---> Web App

Project Structure

TBD

TODO

Should we put some of the common used react libraries into root/frontend?
Need to discuss the details about how to stucture express code.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

Haochuan Liu - Initial work - _haochuan

License

This project is licensed under the MIT License.

haochuan/create-express-react