How to deploy Angular app in production — CPAS 2

Foreword

Recently, I decided to do a series of stories called CAPS — common problems and solutions, in which I show you how to solve the most common problems when it comes to coding. You can see the first article in this series here.

If you are new to Angular deployment environment and you are quite confused about how to get this type of application out there for other people to use, then this article is for you. This also applies to Angular, React, or any other framework-based application, that relies on an internal router.

The misconception

A common misconception is that you need a NodeJS server to deploy your application.

Front-end code runs on browsers, and browsers only understand HMTL, CSS, and JavaScript. This is exactly what your code turns into once you run build command.

If you run ng build --prod in your Angular project folder, you will see inside dist folder only JavaScript, CSS, and HTML files.

The output of the ng build command in production

Now that these are just simple static files, you can implement the application like any normal static website. The only part you need to pay attention to is that the application has an internal router and all requests must be sent to this router.

The deployment

In the next examples we’ll see how to deploy these code on 2 of the most common solutions:

• under Nginx on a VPS
• on PaaS like Heroku

NGINX

Inside the following folder create a new file for your application with this content.

$ cd /etc/nginx/sites-available && nano my-website

my-website

server {
 root path_to_the_app_folder/dist;
 index index.html;
 server_name application_domain.com;
 location / {
    try_files $uri $uri/ /index.html;
 }
}

With this line, we make Nginx serve only the index.html file,e no matter the URL for our application_domain.com.

try_files $uri $uri/ /index.html;

Ex:

• https://application_domain.com -> will serve the index.html file
• https://application_domain.com/my-route -> will still serve the index.html

Nginx will only take over the configurations from the sites-enabled folder. That’s why we need to make a symbolic link for our file using this command:

$ sudo ln -s /etc/nginx/sites-available/my-website /etc/nginx/sites-enabled/

Lastly, verify if your config is ok with this command

$ sudo nginx -t

and restart the Nginx service.

$ sudo systemctl restart nginx

Heroku

To deploy it on Heroku, we need to create an app server to serve our static files. For this we can use any back-end language that is compatible with Heroku. For demo purposes we’ll use NodeJS.

This was not necessary in the first example, because Nginx is a web server capable to serve static files also. Actually it is the best in terms of performance for serving static files.

Create a new server at the root of the project using express as you would usually do and set it to only send the index.html file.

server.js

Code HERE

And to make it all compatible with Heroku, create a file named Procfile and add the start command.

web: node server.js

So, that’s it! With this configuration you can deploy any web application on both Nginx and Heroku. Just keep in mind that you need to send all the requests to index.html so they can be resolved by the internal router of the application.