Deploy an angular app on S3

Deploy an Angular app on S3 in 5 minutes

In this post I’ll be showing you how to deploy an Angular application to AWS S3. This post assumes that you already have an AWS account.

Advantages of hosting you Angular application on S3:

  • Cheap
  • Almost no maintenance
  • Easy to deploy

Step 1 – Create a new Angular app

Install the Angular command line interface

npm install -g @angular/cli

Create a new Angular app with the cli

ng new my-app

You can click “Enter” twice in the console to not include Angular Routing and include CSS in the newly generated Angular app on your local machine.

angular create new app command
ng new my-app

With a fresh new Angular app ready to go, it’s time to build the static production bundle.

Step 2 – Build the app

Build the production bundle of the application

ng build --prod

This will generate a dist/ folder, as specified in angular.json in the root directory of your project like so.

Angular build production bundle command line interface
ng build –prod

Once the build process is done you will the generated static files where index.html will be the entry point of the app.

Angular production build

Step 3 – Deploy to S3

In your AWS S3 console, create a new bucket to host your web application and make sure you uncheck “Block all public access” during the “Configure Options” step in the creation process.

Once the bucket is created, drag and drop all the files of the my-app folder that resides inside the dist folder into your S3 bucket. When setting the S3 permissions, select “Grant public read access to this object(s)” as seen below.

set S3 permissions
set S3 permissions

Click “next” through the other options and then AWS will upload your static files to the S3 bucket.

files deployed to S3
files deployed to S3

Lastly, we now hove to tell S3 to serve index.html as the starting point of our application. Navigate to the bucket properties and turn on static website hosting. Set index.html as the entry point of the application and save the configuration. Once you save the configuration click the “Endpoint” link and you will see your hosted Angular app live on the web! Congrats!

static web hosting configuration on S3
static web hosting configuration on S3

Do you need more granular control of how you host your Angular app? Check out my other post on how you can create you own custom configuration with EC2 and Nginx to deploy your Angular app.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.