svg
Close

By Deepak Dhamuria March 5, 2020 In Technical

AngularJS app on AWS S3

You have developed your own web application using AngularJS with backend built on NodeJS, Java or any other technology of choice. In your local, you run it by just running npm start or ng serve. But when it comes to running it on a production environment, you either have to choose a hosting which lets you run NodeJS apps or any cloud service. You can use Heroku, AWS EC2, Azure, GCP or any other numerous services which give you this functionality. But the catch is, they cost more and if you are on a budget and have built a small web application, say like a dashboard just to enter data, this hurts.

So, in this article, we are going to address the way how we can just deploy the application to AWS S3 (other environments coming soon) which costs significantly less than any computing environment. The trick is to build the app, get the bundle and deploy the bundle on an environment. This way it behaves a simple web application with javascript. In this case, I will be using webpack.

Prerequisites

  • Already developed application in AngularJS
  • An AWS account
  • Code repository in GitLab for continuous integration (optional). You can use other repositories and configure it likewise

Preparing AWS S3

  • Navigate to S3 Console and create a bucket. Name the bucket after your domain name. For example if your domain name is deepakdhamuria.com, then name it deepakdhamuria.com.
S3 Bucket Name and region
  • Click next and under Set permissions and deselect”Block all public access” and create the bucket
S3 Bucket Permissions
  • Open the bucket, navigate to properties and click on Static website hosting. Under that select “Use this bucket to host a website”. Click save and now your bucket is ready.

Preparing CloudFront for routing

  • Login to CloudFront Console and create a new Web Distribution.
  • In Origin Domain Name, select the S3 bucket you created above.
  • Select index.html for the Default Root Object and click save

Preparing your code

  • Modify your package.json file to add scripts for build
  • Add a webpack.config.js file to the root of your repo. Below is an example. In this article, I am not going to dig deep inside how webpack works and it’s different options.

Now just run npm run build and the code builds. After it succeeds, upload the files from “dist” folder into the bucket/folder you created earlier and your site should be up and running.

BONUS – Deploy using GitLab CI or similar

  • Open your AWS acocunt and go to IAM under My Security Credentials. In there, create a new Access Key. Give access to the S3 bucket you created before. After creation save the access key ID and access key secret.
  • Under GitLab repo settings, go to CI/CD and under variables add two variables AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY and paste the values you fetched from AWS in previous step.
  • Create a .gitlab-ci.yml under your repo and paste following:

Now, when you check in any changes, this file will build and deploy your code onto the S3 bucket you have specified.

That’s it! This concludes the topic on how to deploy an AngularJS site in S3. Hope you liked the article.

Leave a Reply

Recent Posts
Need Help? Chat with me
Start a Conversation
Hi! Click below to chat on WhatsApp
Deepak typically replies in a few minutes.
Deepak Dhamuria
Self
%d bloggers like this: