Dockerizing Node-Express-React-Redux-PostgreSQL Ap

docker_node_express_react_redux_postgres.md

Dockerizing Node-Express-React-Redux-PostgreSQL App

The full context of the code shown here can be viewed here

|-- package.json
|-- docker-compose.yml
|-- config.js
|-- table_tennis.sql
|-- zseeds.sql
|-- server.js
|-- client
    |-- postcss.config.js
    |-- webpack.config.js

I recently discovered that to get around Cylance anti-virus blocking postgresapp from starting a server Docker was the fastest and simplest solution. This is how I took a project underway and dockerized it - the fast way, not necessaarily the recommended way!

Step 1

Condense into one top-level package.json file. This should contain a script to run your webpack, and include npm, nodemon, and webpack. If you are using one docker container to run both your frontend and backend make sure that your npm start runs both your server and webpack.

package.json

{
  "name": "express_server",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "test": "mocha client/src/models/specs",
    "start": "nodemon server.js & npm run webpack",
    "webpack": "cd client && webpack -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.17.2",
    "cookie-parser": "^1.4.3",
    "express": "^4.15.3",
    "js-sha512": "^0.3.0",
    "jsonwebtoken": "^7.4.1",
    "pg": "^6.0.2",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.4.0",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-2": "^6.24.1",
    "postcss": "^6.0.3",
    "postcss-cssnext": "^2.11.0",
    "postcss-each": "^0.10.0",
    "postcss-import": "^10.0.0",
    "postcss-loader": "^2.0.6",
    "postcss-mixins": "^6.0.0",
    "redux-devtools": "^3.4.0",
    "style-loader": "^0.13.1",
    "npm": "^3.10.8"
  },
  "devDependencies": {
    "mocha": "^3.4.2",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.5",
    "react-router-dom": "^4.1.1",
    "react-toolbox": "^2.0.0-beta.12",
    "redux": "^3.7.1",
    "redux-thunk": "^2.2.0",
    "webpack": "^2.2.1",
    "nodemon": "^1.11.0"
  },
  "description": ""
}

Step 2

Make a docker-compose.yml file in your top level. If you are running a seperate seeds file to seed your database be aware docker runs them in alphabetical order, hence renaming it zseeds.sql to ensure the seeds were run last.

docker-compose.yml

server:
  image: node:7
  command: npm start
  working_dir: /app
  volumes:
    - .:/app
  environment:
    PORT: 3000

  ports:
    - "3000:3000"
  links:
      - db
db:
  image: postgres
  expose:
    - 5432
  volumes:
    - ./table_tennis.sql:/docker-entrypoint-initdb.d/table_tennis.sql
    - ./zseeds.sql:/docker-entrypoint-initdb.d/zseeds.sql
  environment:
    POSTGRES_PASSWORD: password
    POSTGRES_USER: user
    POSTGRES_DB: react_table_tennis

Step 3

Update any connection link to your database, for me:

config.js

module.exports = {
  'database': 'postgres://user:password@db:5432/react_table_tennis'  
}

Step 4

You should be done. Now just follow the instructions below to run your containers.

To run follow:

In top level folder

$ npm install

START

$ docker-compose up

REMOVE

$ docker-compose down

Enter PostgreSql

To see container IDs:

$ docker ps

$ docker exec -it [POSTGRES_CONTAINER_ID] /bin/bash
root@[CONTAINER_ID] $ su - postgres
root@[CONTAINER_ID] $ psql db