I had previously made a tutorial about how to create a Fullstack app and now I'm going to show how to dockerize this app and deploy it to Heroku.
If you didn't follow the previous tutorial, I recommend you to fork the repo and play around with the app.

You can fork the Fullstack app repo here.

Content

• Production environment
  • Dockerfile
  • package.json start script
  • docker-compose file
  • .dockerignore file
  • Run production test
• Development environment
  • Dockerfile
  • Complete dockerfile
  • docker-compose file
  • Run development
• Heroku deployment
  • Heroku registry login
  • Create a heroku app
  • Set image TAG
  • Push image to heroku registry
  • Release the image
• Example app
• Repo

So let's dive into code!

Clone the repo.

Download all the dependencies

$ npm install && cd client && yarn

Production environment

We start with the production environment because we are going to create a multistage Dockerfile, and the development environment can simply copy the production environment adding the necessary extra configuration.

First step: Dockerfile

In the root of your project, create a Dockerfile with the following content:

#Dockerfile
# PROD CONFIG
FROM node as prod

WORKDIR /app

COPY package*.json ./

RUN npm install

WORKDIR /app/client

COPY ./client/package*.json ./

RUN npm install

WORKDIR /app

COPY . .

ENV NODE_ENV=production

CMD [ "npm", "start" ]

The first line, we define which image we are going to use and an alias, in this case, a node image and a prod alias.

WORKDIR: Workdir works as mkdir (Create a folder) and cd /folder (enter into the folder).

COPY and RUN: In these lines 6 and 8, we copy the package.json and package-lock.json into our workdir and install the dependencies.

Lines 10, 12 and 14: Here we change the workdir, repeat the copy and run actions, but this time we install the dependencies for the client (frontend app).

Lines 16 and 18 we go back to the project root dir and copy all the files. We just copy all the files if the previous steps succeeded.

Lines 20 and 22: Here we define the environment as production and run the start script.

2 step: package.json prod config

To run the production config, we need to build the frontend app and we can do that by adding a pre-start script.
Open the package.json file in the root of the project and add the following script:

"prestart": "npm run build --prefix client",

3 step: docker-compose production file

Now we are already able to build the image and run it, and the best way to do it is by using a docker-compose file.
In the root of the project, create a docker-compose-test-prod.yml with the following content:

version: "3.7"

services:

  node-react-starter-db:
    image: mongo
    restart: always
    container_name: node-react-starter-db
    ports:
      - 27017:27017 
    volumes:
      - node-react-starter-db:/data/db
    networks: 
      - node-react-starter-network

  node-react-starter-app:
    image: thisk8brd/node-react-starter-app:prod
    build: 
      context: .
      target: prod
    container_name: node-react-starter-app
    restart: always
    volumes: 
      - .:/app
    ports:
      - "80:5000"
    depends_on:
      - node-react-starter-db
    environment:
      - MONGODB_URI=mongodb://node-react-starter-db/node-react-starter-db
    networks: 
      - node-react-starter-network

volumes: 
  node-react-starter-db:
    name: node-react-starter-db

networks: 
  node-react-starter-network:
    name: node-react-starter-network

As this project uses mongodb, the first service node-react-starter-db runs a mongoDB container using the network and volumes that will be created at the end of the file.

Our app is defined in the second service, in which we define the build file and the target.
context: . means it tries to search for a Dockerfile in the root of the project.
the target tag defines which stage we are going to use, in this case prod.

Create a .dockerignore file in the root of the project with the following content:

.git/
node_modules/
client/node_modules/
npm-debug
docker-compose*.yml

Run production test environment

At this point, we can already test a production environment and we can do it by running the following command in the root of your project:

docker-compose -f docker-compose-test-prod.yml up 

Now if we visit http://localhost we can see the following screen:

Use a HTTP client like Postman or Insomnia to add some products. Make a POST request to http://localhost/api/product with the following JSON content:

{
  "name": "<product name>",
  "description": "<product description here>"
}

Now, you will be able to see a list of products rendered on the screen, like so:

Development environment

Let's update our Dockerfile adding our dev config.

Insert the following code at the end of the Dockerfile:

# DEV CONFIG
FROM prod as dev

EXPOSE 5000 3000

ENV NODE_ENV=development

RUN npm install -g nodemon

RUN npm install --only=dev

CMD [ "npm", "run", "dev" ]

Here we are simply reusing the prod config, overwriting some lines and adding extra config:

Line 25 we reuse the current prod image and create a dev alias.
That is how our multistage is defined.

Line 27 we expose the necessary ports for local development, allowing us to make requests to localhost:3000 and localhost:5000.

Line 29 overwrites the NODE_ENV to use development environment.

Line 31 we install nodemon globally, as we need it for local development.

Line 33 installs all the dev dependencies if any.

Line 35 we overwrite the run script.

At this point, the Dockerfile should look like the following:

# PROD CONFIG
FROM node as prod

WORKDIR /app

COPY package*.json ./

RUN npm install

WORKDIR /app/client

COPY ./client/package*.json ./

RUN npm install

WORKDIR /app

COPY . .

ENV NODE_ENV=production

CMD [ "npm", "start" ]

# DEV CONFIG
FROM prod as dev

EXPOSE 5000 3000

ENV NODE_ENV=development

RUN npm install -g nodemon

RUN npm install --only=dev

CMD [ "npm", "run", "dev" ]

Create a docker-compose file for dev environment

Now we need a docker-compose file to test our development environment, creating a simple mongoDB, network and volumes like we did for the prod environment, but now we simply specify the dev target.

Create a docker-compose.yml file in the root of the project with the following content:

version: "3.7"

services:

  node-react-starter-db:
    image: mongo
    restart: always
    container_name: node-react-starter-db
    ports:
      - 27017:27017 
    volumes:
      - node-react-starter-db:/data/db
    networks: 
      - node-react-starter-network

  node-react-starter-app:
    image: thisk8brd/node-react-starter-app:dev
    build: 
      context: .
      target: dev
    container_name: node-react-starter-app
    restart: always
    volumes: 
      - .:/app
    ports:
      - "5000:5000"
      - "3000:3000"
    depends_on:
      - node-react-starter-db
    environment:
      - MONGODB_URI=mongodb://node-react-starter-db/node-react-starter-db
    networks: 
      - node-react-starter-network

volumes: 
  node-react-starter-db:
    name: node-react-starter-db

networks: 
  node-react-starter-network:
    name: node-react-starter-network

Run development environment

Now we can run the app with the following command in the root of your project:

docker-compose up --build

The first run will take a while because it will rebuild everything, adding the necessary changes.

For the next runs you can simply run without the --build tag and it will be way faster:

docker-compose up

Remember to always add the --build whenever you change between dev or prod test environments.

Now you can visit http://localhost:3000 and see the app running.

You can also make a POST request to http://localhost:5000/api/product with the following JSON content:

{
  "name": "<product name>",
  "description": "<product description here>"
}

Now, you will be able to see a list of products rendered on the screen, like so:

With this development environment, you are able to make any changes to the project and it will reflect in your app with a pretty nice hot reload.

Heroku deployment

Now that we already have our dev and prod images, let's deploy this app to Heroku.

First, let's login:

$ heroku container:login

Now, we create an app

$ heroku create

After that, an app will be created and it will be available in your Heroku account.
You will also receive the name of the app created and its URL.

Visit your heroku account, enter the app you just created and click in configure add-ons.

In this page, search for mLab mongoDB and add it to your app.

You can go back to the terminal and add a tag to the prod image to be able to deploy it to Heroku:

$ docker tag thisk8brd/node-react-starter-app:prod registry.heroku.com/<HEROKU-APP-NAME>/web

Push this image to Heroku registry:

$ docker push registry.heroku.com/<HEROKU-APP-NAME>/web

Now you can release the image with the following command:

$ heroku container:release web

This will start your app, it will be available in a minute and you will be able to open the app:

$ heroku open

Yaaay!

Your app was successfully deployed and it is up and running.

You can check my example live here.

And the source code is available here.

I hope you can find this tutorial useful, and see you in the next one!