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:
- 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.
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.
Once the build process is done you will the generated static files where
index.html will be the entry point of the app.
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.
Click “next” through the other options and then AWS will upload your static files to the S3 bucket.
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!
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.