Intro

This blog will cover how to automate the deployment process for vanilla JS or JS framework-based web apps like Angular, React, Svelte, and more, and make them developer-friendly. The high-level steps are:

1. Link Git account (Bitbucket or GitHub) with AWS.

2. Start the AWS pipeline with the source linked to the correct repo and underlying branch.

3. Set up AWS CodeBuild.

4. Deploy to S3.

5. Clear CloudFront Cache (Optional/Recommended).

Let's dive into each of the above steps:

1) Link Git Account

On the AWS portal open "CodePipeline".

Before the next step, please select the region of your choice.

From the menu on the left, navigate to settings > Connections > Create connection.

Select your Git account provider, in this case, "BitBucket", provide a name and click "Connect to Bitbucket".

On the next screen, click on "Install a new app." This will open the BitBucket login pop-up. After logging in successfully, select the relevant Bitbucket workspace that contains the Angular app repo and click "Grant Access."

The AWS "Connect to Bitbucket" page will now have "Bitbucket apps" pre-populated. Click "Connect" to complete the connection setup. This completes the Git account connection with AWS.

2) AWS Pipeline: Source setup

Navigate to the AWS Pipeline console and select "Create Pipeline". Under "Settings", provide a relevant name for the Pipeline, and leave the selection on the "new service role". It should auto-populate. Click next.

Select the connection with your GitHub or Bitbucket that was configured above. Select the relevant repo and make sure you select the correct branch. For example, select the development branch if the Pipeline is for the development environment. Click "Next".

The usual setup suggestion is to configure separate pipelines for each environment, each linked to the respective branch. Ex: The repo has a branch for each environment. Ex: dev-branch, uat-branch and prd-branch. And on AWS, you will have a separate AWS Pipeline for each branch.

3) Setup AWS CodeBuild

For the "Build Provider," select "AWS CloudBuild" and click "Create project." This should open a new pop-up window for creating a build project.

In the pop-up provide a relevant name for the build project and under "Environment".

select "Managed image"
"Operating system" = Ubuntu
"RunTime(s) = Standard
"Image" = aws/codebuild/standard:7:0

One thing to note is the "Image version" setting: "Always use the latest image" has its benefit as the auto update to the latest versions, but at times, this can also break the build process.

Next, under the "Buildspec" section, select "insert build commands" and click "switch to editor".

I've used the below build cmd set for the Angular project. The actual build commands will vary between languages and frameworks.

version: 0.2
env:
  variables:
    APP_NAME: "Demo-App"

phases:
  install:
    runtime-versions:
        nodejs: 16
    commands:
        - echo Installing source NPM dependencies...
        - npm install
        - npm install -g @angular/cli@16.1.0

  build:
    commands:
        - echo Build started
        - ng build --prod

artifacts:
    files:
        - '**/*'
    base-directory: 'dist*/$APP_NAME/'
    discard-paths: no

The commands above will work fine for a standard Angular project. If you encounter any issues, try building the project locally and checking the build folder. Use the path in your local build as "base-directory".

In case you have set up separate configuration files per environment then use the below command instead of "ng build --prod":

ng build -c {Env Name}

Not hit the "Continue to CodePipeline" button, This will redirect to the main Pipeline wizard.

Click "Next". We’re done with CodeBuild, a big milestone 🥳 , so let’s focus on Deployment.

4) Deploy to S3

From the "Deploy Provider" dropdown select S3. The current region will be auto-selected, but if needed, select the region that contains the target S3 bucket. Tick "Extract file before deploy". It's important as the output from CodeBuild is a zip file.

Click "Next", and the Review stage will list all our selections, please check and click on "Create Pipeline"

This will create the "Pipeline" and auto-execute for the first time. If everything is configured correctly, the build files will be pushed to the target S3 bucket.

In the usual setup, the S3 bucket is linked with a CloudFront distribution. The DNS mapping is done using the CloudFront URLs instead of the S3.

5) Clear CloudFront Cache (Optional)

So if you have just pushed the latest changes to the S3 bucket, clearing the CloudFront cache is also recommended. So the next step is optional but it's recommended if CloudFront is in use. To set up this stage, please visit a very well-written blog by "Jacob Unna"

I hope this was helpful. However, some further custom CloudFront configurations are required to ensure the Angular web app loads seamlessly without the 403 Forbidden Routing Error.