We all develop application so that other people can use them, it’s not different for Angular apps. In this post, I will focus on options for deploying angular apps. This guide is applicable to almost all JavaScript Frameworks – with a few modifications.

Using a Content Delivery Network

This is one option that I really like and happens to be the simplest and the cheapest. Content Delivery Network (CDNs) are geographically distributed network of proxy servers. When a customer wants to access your app, they are served from the server that is closest to them.

This in turn ensures high performance and availability. CDNs are traditionally used to serve static content (JS, CSS etc.) that requires little to no processing on the server. And as you probably already know, most JavaScript applications are executed on the browser – Ignore server-side JavaScript engines like NodeJS.

This brings the advantages of a CDN to your Angular application – high availability and performance. Another thing that makes this even more attractive is low cost. There are a few things you lose out when you use this option. The first is lack of configurability – while some CDNs may be versatile, you lack the ability to control what software are running on the server.

Also, even on those Softwares running on the server, you have limited configuration control. This is especially apparent when dealing with Search Engine Optimization. You can’t redirect traffic from search engine bots to search engine friendly content or even do server-side rendering. If find this option suitable for applications behind a login wall where SEO will not offer any benefits.

Using Shared Hosting

Shared hosting provide a cheap option for hosting websites while providing some degree of configurability. Majority of them offer a control panel to manage and configure your account but you are mainly limited to a LAMP server.

The freedom provided by shared hosting is enough for most small application, especially given the low prices. You can use services such as prerender.io for Search Engine Optimization (SEO) and in future Angular Universal might support php for Server Side Rendering (SSR). But for now, only a few languages are supported.

There are hacks to spawn a NodeJS server on a LAMP shared hosting, such as this, which will setup a NodeJS server and proxy all requests to it. Deployment is a matter of building your angular project and uploading build artefacts to the root of your domain or subdomain. After that, all you need is to configure apache so that all routes fall back to index.html inside the htaccess.

RewriteEngine On
    # If an existing asset or directory is requested go to it as it is
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    # If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

For more information about configuration for different servers environments, please check the information provided here.

Using a Dedicated Hosting

If you are not happy with shared hosting, you should consider dedicated hosting. In this case you lease a server where you have full control of everything that runs on the sever. The cost is very high for dedicated hosting as compared to shared hosting.

On the up side, you can host more than one app as long as you are aware of your servers’ limitation. For an angular application, this means not having to deal with the limitation of the other two hosting options. Your app can have full support for SEO and all advantages that come with Angular Universal/Server-Side Rendering (SSR). You can think of this as having your own server.

Using Cloud Hosting and Cloud Platforms

Cloud hosting is one of the best options for hosting your angular application or any other application for that matter. It offers most, if not all advantages of a dedicated hosting plus a few other advantages.

One key advantage is scaling on demand, pay as you go model (pay for only what you use) and pricing per second or hour. Cloud heavy weights such as Amazon Web Service (AWS), Google Cloud Platform and Microsoft Azure offer a range of hosting and cloud services.

The services include storage options, content delivery networks (CDNs), machine learning etc. AWS offers a 1-year free tier while Google Cloud Platform and Microsoft Azure have a combination of free platform credit and free tier or both. One of my favorite platforms is Google Firebase, which offers a free tier for a small application to run without incurring any cost which is great for development and startups.

On top of that, Google Firebase offers backend solutions such as Authentication, Storage and Database for you. This allows you to rapidly develop and deploy your application using world class infrastructure, that can scale on demand.

Final Thoughts

As you can see, there are several options to consider when deploying your angular application. Each is suitable depending on what you want to achieve. For instance, if you are looking to host a simple demo, the first two options are great and won’t cost you a lot.

On the other hand,  if you are looking to deploy an application with high demand, the cloud hosting might be your best bet. If I skipped any option, I would love to hear your input on the comment section below.