Using create-react-app with React Router + Express.js

This is not about server-side rendering or Redux.

Where to start?

Getting started

npm install -g create-react-app
create-react-app routed-react
cd routed-react
npm start

I find a good practice to have reusable components with modificable styles.

npm install --save classnames
# Create 'components' directory and 'App' sub-directory
mkdir -p src/components/App
# Move App component to new directory
mv src/App.js src/components/App/index.js
mv src/App.css src/components/App/style.css
mv src/logo.svg src/components/App/logo.svg
mkdir src/components/About
touch src/components/About/index.js
touch src/components/About/style.css
Reusability FTW!
mkdir src/components/NotFound
touch src/components/NotFound/index.js
touch src/components/NotFound/style.css

Browser history is the recommended history for browser application with React Router. It uses the History API built into the browser to manipulate the URL, creating real URLs that look like example.com/some/path.

npm install --save react-router
So much better :)

Usage with Express.js

# Install dependencies
npm install --save express morgan
# Create server files
mkdir server
touch server/app.js
touch server/index.js
# Build to 'build' directory (it's ignored by git, see .gitignore)
npm run build
# Start the express.js app
node server

Only for projects created with create-react-app 0.3.0 or lower.

# Install dependencies
npm install --save-dev mocha chai supertest supertest-as-promised mz
# Create test directory
mkdir test
touch test/server.test.js

We love promises, right?

"scripts": {
"start": "react-scripts start",
"start:server": "node server",
"build": "react-scripts build",
"eject": "react-scripts eject",
"test": "mocha test"
},
$ npm test> routed-react@0.0.1 test /Users/patriciolopez/Repositories/routed-react
> mocha test
builds application
✓ builds to "build" directory (9017ms)
express serving
✓ responds to / with the index.html (38ms)
✓ responds to favicon.icon request
✓ responds to any route with the index.html
4 passing (9s)
1:1   warning  'use strict' is unnecessary ...  strict
9:1 warning 'describe' is not defined no-undef
10:3 warning 'it' is not defined no-undef
19:1 warning 'describe' is not defined no-undef
20:3 warning 'it' is not defined no-undef
28:3 warning 'it' is not defined no-undef
35:3 warning 'it' is not defined no-undef
"eslintConfig": {
"extends": "./node_modules/react-scripts/config/eslint.js",
"env": {
"browser": true,
"mocha": true,
"node": true
},
"rules": {
"strict": 0
}
}

Docker

touch Dockerfile
docker build -t routed-react .
docker run -p 80:9000 --name routed-react-instance routed-react

--

--

Software Engineer from Chile. Vinyl record collector.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store