Angular on Heroku with ExpressJS
Tags: angular, heroku, docker, express
Published: 2022-04-02 18:51:31

---
title: Angular on Heroku with ExpressJS
published: true
description: How to deploy your Angular project on Heroku without an ExpressJS instance.
tags: Angular, Heroku, Docker, Express
//cover_image: https://direct_url_to_image.jpg
---

If you want to deploy your beautiful Angular project on Heroku, the first thing you do is ... using Google.

Most people will tell you to use an ExpressJS instance to send the Angular bundle.

For example, some results from Google:

 - [betterprogramming.pub](https://betterprogramming.pub/how-to-deploy-your-angular-9-app-to-heroku-in-minutes-51d171c2f0d)
 - [medium.com](https://medium.com/geekculture/how-to-easily-deploy-your-first-angular-app-on-heroku-65dd546c8181)
 - [itnext.io](https://itnext.io/how-to-deploy-angular-application-to-heroku-1d56e09c5147)
 - [stanislas.blog](https://stanislas.blog/2020/04/deploy-angular-app-heroku/)
 - [dev.to 😆](https://dev.to/raviagheda/how-to-host-angular-app-on-heroku-1n58)

## Why not using ExpressJS?

Is it a good idea to deploy a node instance to serve the Angular bundle?
I don't think so. 

This is why:
 - Less code === less problem
 - Tools exist to serve static HTML like web servers
 - ExpressJS is made to build dynamic websites or APIs
 - ExpressJS uses a lot of CPU to serve static files

Here is a discussion on Stackoverflow that compares ExpressJS and Nginx for serving static files: [link](https://stackoverflow.com/questions/9967887/node-js-itself-or-nginx-frontend-for-serving-static-files)

## The solution

To serve static HTML, like an Angular bundle, we can use [Nginx](https://en.wikipedia.org/wiki/Nginx)
To use Nginx, we will build a Docker image with the Angular bundle and Nginx. 

## Create a Dockerfile

At the root of your project, create a file named Dockerfile with this content.
⚠️ In the file, replace **your_app_name** by the name value in your package.json file. 

    ### STAGE 1:BUILD ###
    FROM  node:16.13.2-alpine  AS  build
    WORKDIR  /dist/src/app
    
    RUN npm cache clean --force
    COPY  .  .
    RUN  npm  install
    RUN  npm  run  build  --prod

    FROM  nginx:latest  AS  ngi
    COPY  --from=build  /dist/src/app/dist/your_app_name>/usr/share/nginx/html
   
    COPY  /nginx.conf  /etc/nginx/conf.d/default.conf
	
    CMD  sed  -i  -e  's/$PORT/'"$PORT"'/g'/etc/nginx/conf.d/default.conf  && nginx  -g  'daemon off;'

    EXPOSE  $PORT

## Create the Nginx configuration file

At the root of your project, create a file named nginx.conf

    server {
        listen $PORT;
        sendfile on;
	default_type application/octet-stream;
	gzip on;
	gzip_http_version 1.1;
        gzip_disable "MSIE [1-6]\.";
	gzip_min_length 256;
	gzip_vary on;
	gzip_proxied expired no-cache no-store private auth;
	gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
	    
	gzip_comp_level 9;
        root /usr/share/nginx/html;
	location / {
    	    try_files $uri $uri/ /index.html =404;
        }
    }

## Create a .dockerignore file

  If you want to do things properly 😎, you can create a file named .dockerignore at the root of your project.
  Files and directories listed in the file will not be copied when we create the Docker image.
  You can add all files that are not required to the project like your IDE files.

    .git
    .editorconfig
    /.vscode/*
    /node_modules
    /e2e
    /docs
    .gitignore
    *.zip
    .angular
    .history
    dist

## Set the stack of your app to `container`

Here is some documentation about the stacks: [link](https://devcenter.heroku.com/articles/stack)
In your terminal with the [Heroku client](https://devcenter.heroku.com/articles/heroku-cli) execute this:

> heroku stack:set container -a your_heroku_app_name

## And?

Push your project on Heroku (or another git hosting service connected to Heroku) and wait for Docker magic to do its work.