Cloud is on the rise! hence, in this article, we will learn how to deploy an Angular App to AWS S3 bucket. It will be live and publicly accessible WITHOUT a Webhosting or domain. However, the angular web apps could only be static websites and not dynamic. Learn more about the difference here.
Table of Content
- Run Angular Application
- Create build of Angular Project
- Deploy Angular website to AWS S3 Bucket
Angular Web Apps: Run Angular Application
To begin with, we need to start angular application using a command. Mind you, NodeJS should be installed beforehand. Open up a terminal if you are on a macOS or open CMD on a Windows machine. Then run the following command:
ng new MyProject
It will ask you a couple of questions afterwards the above command. Just press yes or enter to all those questions and this would start angular application for you.
Angular Web Apps: Create Build of Angular Project
Moving on, now that your Angular project has been created, you can add your custom components and HTML files. You’re free to make it the way you want your website to look and behave. However, make sure that it is a static website. Afterward, you must create a build of your angular project. This ‘build’ will create another folder inside of your project, containing specific files which we need to deploy Angular website to the AWS S3 bucket.
To create a build of your Angular project, run this command in the terminal or cmd whilst being inside the project root folder:
ng build --prod
This command will create a new folder called “dist” in your Angular project root directory. We need to upload all of its files on AWS S3 bucket. Take reference from the image below.
AWS Storage: Deploy Angular Website to AWS S3 Bucket
Finally, it’s time to host Angular website on S3 bucket. However, for that, you need to create an Amazon S3 bucket to host your static website. This requires a list of detailed steps, which I have already covered here: how to upload files to S3 bucket.
Once the AWS S3 bucket is created, we simply need to deploy Angular website to the S3 bucket. The procedure is the same as shown in the link above. Take reference from the images below:
By clicking the “Add Files” button you can upload all the files present in your Angular project “dist” folder. Now follow the below steps:
- Select the AWS S3 bucket where you want to deploy Angular Website
- Choose Properties.
- Under Static website hosting, choose Edit.
- Choose Use this bucket to host a website.
- Under Static website hosting, choose Enable.
And that’s all. Your Angular Website has been successfully hosted on AWS S3 bucket. You can open up your angular website with the S3 bucket URL. You will find the link at the very bottom of the “Properties” tab inside your AWS S3 bucket. Take reference from the below image.
When you go to this link, your Angular Website would be running as shown below: