Why you don’t need a server to host your Angular application

… or any other Single Page Application like React, Vue.js, etc.

If you haven’t heard, there is a new trend in town that makes your life easier when it comes to managing your application servers and infrastructure, which is called Serverless. Unlike the name suggest there are still servers involved but you don’t need to manage them anymore. In fact you don’t even need to know they exist. There are many examples and cloud providers out there that offer different Serverless features, but today I want to show you how you can quickly host your Single Page Frontend Application without the need to spin up a server (and without paying for it!).

For this example I will use Angular to build the application and AWS S3 (Simple Storage Service) as the Serverless hosting solution.

The first thing you need is a frontend application. You can use whatever you have written yourself or you can get started with our ngx-starter-kit. You also need an AWS account, that might create additional costs but there are also free tiers to get you started.

To host our application we then need to create a bucket (you can think of it as a folder) in S3.

Click “Create bucket” to create your new bucket

At a later stage, we want to access the app through a custom URL and the bucket name must be identical to that URL (in our case it is going to be ngx-starter-kit.fashion.cloud). If that doesn’t apply to you, then any bucket name is fine, it just needs to be unique amongst all buckets that exist in your AWS region.

Enter your bucket name and click “Create”

Now you are the proud owner of a brand new S3 bucket and can start uploading your application or anything else you would like. But before we can get started and have our application served from this bucket, there are two more settings that we need to make.

We need to

1. Enable a feature called Static website hosting
2. Make this bucket readable to the outside world

To enable static website hosting you click on your S3 bucket, open the “Properties” tab at the top and click on the static website hosting tile.

Click on the “Static website hosting” tile to configure this feature

Here you just have to configure a few simple things. Click the radio button to enable static website hosting (“Use this bucket to host a website”), enter your index documents name (“index.html”) and click “Save”.

Static website configuration

Finally we need to modify the permissions for this bucket so anyone out there is allowed to read the content of the bucket (a.k.a. you application). Open the “Permissions” tab and click “Bucket Policy”.

Click “Bucket Policy” to add access rights for your bucket

In the bucket policy editor you have to add following json snippet and click “Save”:

{
    "Version": "2012-10-17",
    "Id": "Policy1442930681485",
    "Statement": [
        {
            "Sid": "Stmt1442930121681",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<your-bucket-name>/*"
        }
    ]
}

Enter the access permission in json format

Congratulations! Everything is set up now and the only thing that is missing is the application. If you are using our ngx-starter-kit just execute the following steps on the terminal of your machine:

> npm install
> npm run build

And upload the content of the /dist folder to your bucket.
Hit the Endpoint URL of the bucket and you should see your app up and running :-D

This is just the first step, in future blog posts we will show you how to enable your custom domain name and how to add support for https.