How to deploy an Angular App to AWS S3

In this article, we are going to learn how easy it is to deploy an Angular web app to AWS S3 as quickly as possible. We shall be using VS Code as our IDE for our Angular source code. This deployment is very seamless when you put the right things in place and you do the right thing. Please see Deploy a Static Website to Azure Storage from VSCode, how to Get your free Microsoft 365 E5 Sandbox today, and a Video on how to Fix Spell Check Not Working in Microsoft Word.

AWS (Amazon Web Services) is a complete public cloud computing platform provided by Amazon which has a mixture of infrastructure as a service (IaaS), Platform as a Service (PaaS), and Software as a Service (SaaS). This cloud solution provides you with computing, storage, networking capacity, and many other computing services you can think about.

Take a look at what we shall be covering in this article:

• We shall create a simple Angular App
• We shall configure an S3 bucket for static web hosting
• We will be deploying to AWS Cloud

Prerequisites for deploying an Angular App to AWS S3

Below are the prerequisites for deploying an Angular App to AWS S3

• Create an AWS Account
• Install Angular CLI and all dependencies
• Setup your Angular App

Creating an Angular application

It is now time to create your simple Angular project. You need to first install the latest version of Angular CLI by running this command npm install -g @angular/CLI

Then run the CLI command ng new and supply the name you want to use for the app.

ng new techdirectarchive

During the creation of the Angular App you will be prompted to answer these questions:

1) Would you like to add Angular routing? Yes/No
2) Which stylesheet format would you like to use?

For this project, we are adding Angular routing and CSS format for the style sheet. The Angular CLI will install all the npm packages needed to create the Angular App.

In addition, After the App is created, change the directory to the app folder and run the server in the app directory.

cd techdirectarchive
ng serve

It is now time to serve the application on the http://localhost:4200/

However, we can build the application and generate the output folder “dist\techdirectarchive” that will be needed for the deployment to AWS. Moreover, The below command will generate build files and the output folder specified inside angular.json.

ng build –prod

Furthermore, You can see the path configured under the angular.json file

Additionally, After successfully building the application, dist/techdirectarchive will output the files as we have it below:

Setting up your AWS Account

Create an account via https://portal.aws.amazon.com/billing/signup

Log in to the AWS management console: https://signin.aws.amazon.com/

After successfully creating an AWS account and logging in, navigate to S3 under the services→storage option. Therefore, The next step is to create an S3 Bucket name.

Similarly, Please note that the bucket name must be unique across all AWS accounts and not contain spaces or uppercase letters. Nevertheless, You must enter a unique name for your bucket name, which is always displayed like this:

[BUCKET NAME HERE].s3-website.[BUCKET ZONE HERE].amazonaws.com

Moreover, You may be wondering what exactly a bucket is. Buckets are containers for data stored in S3.

In addition, After you enter your desired bucket name, you then select your desired region. Nonetheless, Selecting a region closer to the application user is recommended, which will, in effect, increase the application’s performance.

Check the below configuration setting for our project bucket. Consequently, The main setting is the bucket name and the region. You can decide to leave others on default.

Furthermore, click on the Create button to create our project S3 bucket. However, Once the bucket is successfully created, you will find the overview page like the one below.

Configuring Properties for Your New S3 Bucket

Now click on your new S3 bucket and then click on the properties tab. Additionally, You will see a list of properties you can work with.

Therefore, we need the “Static website hosting” property right now. Please go ahead and click on Edit.

Nevertheless, select Enable and define your application’s entry and error pages.

Nonetheless, There are two hosting options but select the “Use the bucket endpoint as the web address” option. Consequently, On this page, you will define the index and error document as index.html.

After you are done, click on Save Changes.

In addition, After saving the changes, you will see the endpoint URL, which will launch the application in the browser.

Furthermore, Now click on the given endpoint URL. However, You will notice that the page with 403 forbidden errors will open. Moreover, The singular reason for this is that all S3 bucket policies, by default, are private, which will make the application not accessible to all the users.

Nonetheless, what you can do is manage the bucket policy, which is under the “Bucket Policy” tab, and grant public access to all the users.

Consequently, go to the Permissions tab and click the Edit button. Here, you will see the Block public access (bucket settings) all set to ON. Similarly, Make sure they are all set to OFF by unchecking them.

Nevertheless, What you need to do next is to apply a policy that will grant anonymous users access to your data. Therefore, You can add the following policy under the manage bucket policy section. Additionally, But make sure you change the bucket name to yours.

Time to the Angular Project to AWS S3

In addition, You can now copy the angular build on your local system Angular App dist/techdirectarchive path and upload it in S3.

However, Once all the files have been uploaded successfully. Furthermore, you can navigate to the S3 endpoint URL to confirm if the application will display on the browser via the AWS platform to show it up and running.

Congratulations Your Angular App has been deployed successfully to AWS S3.