Image by ian dooley on Unsplash

Going Serverless: How to deploy your Angular Website on AWS S3

Today there are a lot of different ways to get your website up and running. You can rent a whole dedicated server, get a virtual server or even just get a shared hosting package with everything included. Dedicated servers are very versatile, but also very time-consuming. On the other hand, shared hosting often limits your possibilities.

So lets you have a custom website you want to deploy but you want to keep the cost and the effort to maintain the website as low as possible. This is where serverless comes into the play.

Reasons for going serverless

The Reasons for going serverless should be clear: You can focus on developing your website. You don’t have to worry about the infrastructure, you don’t have to worry about assigning resources and you don’t even need to develop a backend web server. And it will most likely even be cheaper than traditional hosting.

But, there are of course a few drawbacks. The Method described in this post uses AWS S3 to host your website. S3 can only host static files — HTML, CSS, and embedded Javascript. So while your Angular/React/static frontend-web-application works without problems, for large-scale web applications it might be better to use an actual backend. But for small websites (such as your personal portfolio), this is my prefered approach. Especially since it’s easy to implement the most common functionalities (like a contact form) without having to create a whole backend server.

Preparations

Set up your AWS Account

In this tutorial we will use AWS S3. If you haven’t already, you first need to create an AWS Account. You can create a new AWS account here.

Note: AWS is a paid service. Amazon offers a free tier, which includes enough resources for everything described in this story. But after the first year (or if you have a lot of requests on your site), you will need to pay for it. You can find details on the free tier limits here.

Get you Angular Site Production Ready

The first step is to locally create your website and have everything working. If you just want to try this out, you can download the official tutorial. Open a command line in your projects directory and run

ng build --prod --aot

This will automatically create a distfolder. We will use the content of that folder later.

Note: While I use Angular in this story, this should work with any framework, as long as the resulting project consists of static files only.

Create and Configure your S3 Bucket

Now you can open the AWS Console and create your bucket. On the Dashboard, search for “S3”, click on it and you will see the S3 Dashboard. Click on the Create Bucket Button and enter a unique name for the bucket (The name for your bucket needs to be globally unique). On the “Set Permissions” Tab, make sure to grant public read access to this bucket.

Note: If you later want to use your own domain (example.com) for the website, it is important to give your bucket the domain name you want to use!

When creating your bucket, make sure to grant public access — Otherwise, nobody will be able to see your website

After creating your bucket, head to the Properties Tab and Enable Static website hosting. This will tell AWS that your bucket contains a website.

AWS offers static web hosting from the buckets Properties Tab

After this, your bucket is successfully configured. On the static website hosting card, you can see an Endpoint URL. Copy this or remember where to find it, as we will use it later.

Install and Configure AWS CLI (Optional)

I highly recommend you to download and install the AWS CLI if you’re working with AWS. It will make your Life way easier later on. To get the AWS CLI head over to this site and follow the installation instructions.

After you install the CLI on your machine you can use your Terminal or command prompt to execute AWS commands. But before you can use this you need to authenticate. Open up a command prompt and type aws configure.

$ aws configure 
AWS Access Key ID [None]: 
AWS Secret Access Key [None]: 
Default region name [None]: 
Default output format [None]: 

You will be prompted to enter your Access Key ID and Secret Access Key. You should have your Secret Access Key saved during your account creation. In case you lost it, you can create a new one in the IAM console.

After you entered your credentials you should be able to access everything in your AWS Account. Make sure the IAM Role you’re using has write access to S3.

Put everything in your bucket

Now it’s time to upload some files to AWS. Note, that while AWS has a free tier, the number of PUT-Requests is limited to 2000 per Month. So watch out not to upload any unnecessary Files and don’t do this too often, otherwise you will have to pay for it (but don’t worry, it’s still really cheap).

To upload files to your bucket, navigate inside your dist/YourProject folder (Make sure that the folder you’re in only contains the necessary project files) and run the following command:

aws s3 sync . s3://<your-bucket-name> --acl public-read

This is will upload all files to your bucket. If you change some files, you can just run this command again and it will only upload the changed files.

If you didn’t install AWS Cli, you can just open the S3 console in your browser and copy the files manually.

View your website

Now you should be able to view your website! Open the Endpoint URL from the bucket configuration and you should see your website. Now it’s time to improve it! You can for example use your custom domain instead of the endpoint URL, display medium posts on your website and use AWS Lambda to send E-Mails.