express-react-ssr

A Wiki Knowledgebase for INSTAR Deutschland GmbH Products - using Express.js with React.js and Gatsby Server Side Rendering

• express-react-ssr
  • Use the Gatsby-Cli to scaffold your React App
  • Run inside a Docker Container
  • Uploading to Docker Hub
  • ES Lint
  • Troubleshooting
    • Raising the default heap limit

Use the Gatsby-Cli to scaffold your React App

First install Gatsby's command line tool globally:

npm install --global gatsby-cli

Start this app in development mode:

npm install
npm start

Gatsby will start a hot-reloading development environment accessible at http://localhost:8000.

To render the app run the following command - note: under Windows use the Windows Git Bash:

npm run deploy

The build will be rendered inside ./public and all the files will afterwards be copied to ./release/deploy/app. Change into this directory and run:

npm install
npm start

This will start a Webserver that can be reached under http://localhost:7777.

Run inside a Docker Container

First install Docker and change into the ./release/deploy/app directory. This directory contains a Dockerfile that can be used to build our Docker Image:

docker build -f Dockerfile -t mpolinowski/mui-gatsby-markdown .

This will run the build function of Docker using the our Dockerfile (Note: you don’t have to add the -f flag when naming your build file Dockerfile. The flag is useful when you have more then one Dockerfiles for different scenarios and have to give them different names accordingly.). The -t flag adds a tag to the Docker image - this can be your docker hub username, or a build version, for internal use. The . in the end signifies that docker should search for your code in the current work directory.

You can check if the image was build by typing:

docker images

And run the container by typing:

docker run -d -p 8080:7777 mpolinowski/mui-gatsby-markdown

This command will run your container in -d daemon mode in the background and set the external port of your app to 8080 (the internal port is set by the express app to 7777). You can verify that your app is running by typing:

docker ps

You now have your app running inside the container and can access it by opening http://localhost:8080 inside your web browser.

The container will be assigned a random name automatically - in the case above that is trusting_leakey. We can use this to stop and remove the container after testing that everything worked as expected:

docker stop trusting_leakey
docker rm trusting_leakey

Uploading to Docker Hub

To upload the image to the Docker Hub you first need to create an account there. You can then login to your account from your console and push the image:

docker login
docker push mpolinowski/mui-gatsby-markdown

The image can be found inside your Docker Hub Repository List:

ES Lint

Once you have VS Code open, click the Extensions button in the Activity Bar. Install the following extensions:

• ESLint
• Prettier JavaScript Formatter
• Flow Language Support
• Babel ES6/ES7

We will install ESLint using Airbnb’s linter rules. Refer to Airbnb’s JavaScript Github Repo for the installation instructions.

Install babel-eslint

npm install babel-eslint --save-dev

Now add an .eslintrc file to your project. Open the eslintrc file and configure it like so:

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
  ]
}

Troubleshooting

Raising the default heap limit

Even you still have more then enough Memory, you might receive an error message on build time, when a maximum heap of 1.4 GB is reached by the Node.js Process:

This happened to me during the HTML building step and resulted in a nasty looking ERROR message:

To prevent this, you can start the Gatsby CLI process with a higher memory ceiling - e.g. 8 GB. Locate the CLI Script In case of a Windows PC it will be inside the AppData\Roaming folder, in your user account directory. Now start this script with the flag --max-old-space-size=8192 and the argument build:

node --max-old-space-size=8192 C:\Users\MyWindowsUserName\AppData\Roaming\npm\node_modules\gatsby-cli\lib\index build

To make life easy, we can add this as npm run script inside our package.json and start a build with npm run build:

"scripts": {
    "build": "node --max-old-space-size=8192 C:/Users/MyWindowsUserName/AppData/Roaming/npm/node_modules/gatsby-cli/lib/index build"
  }