Isomorphic, SSR App Tutorial Made Simple: React.js, react-router, node.js with state

Lets set the scene

Ready, Steady, Code…

$ mkdir ssr-react-router-node-app
$ cd ssr-react-router-node-app
$ npm init
$ npm i --save react react-dom react-router-dom
$ npm i --save-dev babel-core babel-cli babel-loader babel-preset-env babel-preset-react webpack
$ touch .babelrc .gitignore webpack.config.js
## .babelrc
{
"presets":[ "env", "react" ]}
## .gitignore
build
node_modules
coverage // when I run my tests (jest), I also generate test coverage reports
$ mkdir app
$ touch app/index.js
import { render } from 'react-dom';### equivalent toimport ReactDOM from 'react-dom';const render = ReactDOM.render;
$ npm i --save express cors$ npm i --save-dev nodemon
$ mkdir app/server
$ touch app/server/app.js
$ touch app/server/index.js
/
/pokemon
/pokemon/ability/:ability
app/server/routes.js

WOH!?! That looks crazy!!! Lets take a walk through this…

line 11 is where the magic happens!
$ npm i --save axios
app/services/getPokemon.js
"scripts": {
"build:client": "webpack --config ./webpack.config.js/"

}
"scripts": {
"build": "babel ./app -d build",
"build:client": "webpack --config ./webpack.config.js/"
}
"scripts": {
"build": "babel ./app -d build",
"build:watch": "babel ./app -d build --watch",
"build:client": "webpack --config ./webpack.config.js/",
"build:watch:client": "webpack --config ./webpack.config.js/ --watch"
}
$ npm i --save-dev parallelshell
"scripts": {
"build": "babel ./app -d build",
"build:watch": "babel ./app -d build --watch",
"build:client": "webpack --config ./webpack.config.js/",
"build:watch:client": "webpack --config ./webpack.config.js/ --watch",
"build:prod": "npm run build && npm run build:client",
"start:dev": "parallelshell 'npm run build:watch' 'npm run build:watch:client' 'nodemon ./build/server/index.js'"
}
$ npm run build:prod
$ npm run start:dev
"scripts": {
"build": "babel ./app -d build",
"build:watch": "babel ./app -d build --watch",
"build:client": "webpack --config ./webpack.config.js/",
"build:watch:client": "webpack --config ./webpack.config.js/ --watch",
"build:prod": "npm run build && npm run build:client",
"start": "npm run build:prod && NODE_ENV=production node ./build/server/index.js",
"start:dev": "parallelshell 'npm run build:watch' 'npm run build:watch:client' 'nodemon ./build/server/index.js'",
}
"test": "jest --watch --coverage"

--

--

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