How to Deploy Angular Universal on AWS Elastic Beanstalk

2022–01–08 08:52:13

While working on a project I spent a lot of time deploying Angular Universal to a server for server-side rendering. I read all the tutorials I found, and all Stackoverflow questions on this topic. It was probably the most frustrating experience I ever had in coding. From time to time AWS updates its documentation and there we are stuck following old tutorials and ending up something which doesn’t exist or is no longer supported.

If you have been on this journey too, you know what I am talking about. And this article will make you very happy today. I am also going to show you how you can set up a code pipeline and What modifications do you need to do in the build steps.

There are two ways to deploy Angular Universal/Angular ssr to AWS ElasticBeanstalk

1. Deploy Angular Universal without Code Build

2. Deploy Angular Universal with Code Build

1. Deploy Angular Universal without Code Build

Assuming that you have pushed your code to AWS code commit there are two steps. So in this scenario, you will have to manually build your application and push the code.

To build your application run the below command

npm run build:ssr

This will create a build folder at the root of your source directory.

Now modify your package.json and replace npm start with the below command

"start": "node angular-ssr/server/main.js"

1. Setting up an Elastic beanstalk environment.

• GotoAWSand search elastic beanstalk. Click on create new Environment.
• In the next step Select web server environment and click next

• Here there are 4 section

Step 1: Create a webserver Environment.

Give the application name in this section.

Step 2: Environment information

Select the environment name and choose the available URL as per your choice.

Step 3: Platform Settings

Choose Node JS as the environment Platform and the latest version of Node JS.

Step 4: Application code

Select Sample Application and configure more options.

In the more section click edit on the software section and scroll to the bottom. In the environment properties, you should add port and port no as mentioned in the screenshot. Click on save and the environment will be created for you.

2. Setting up code pipeline

This has 4 stages to configure

1. Create Pipeline setting

Go to aws and search code pipeline. Create a new pipeline and give the pipeline name. and select a new service role and go to next

2. Select the source Stage.

In the source stage, you need to select the repo name branch and the source for the code pull. See attached screenshot.

3. Add build stage

We are skipping the build stage as I mentioned on top of that we are deploying code without code Build. If you want the build stage you can scroll down and see the configuration for Angular Universal deployment with continuous Build and deployment.

4. Deploy stage.

In a deploy stage select the Deploy provider as Elastic beanstalk and the name of your environment and application which we created in step1 of Elastic Beanstalk configuration as attached below. Now you can click on next and review all your settings and click on create.

So after doing all this you should be able to see something like below.

Once it is appearing like this go to elastic beanstalk and open the environment URL and you should be able to see your application as mentioned below. So you can see my application is up and running.

2. Deploying Angular Universal with Code Build

In this, we don’t have to build the code and you can just commit the code the build will automatically happen and it will automatically deploy the code i.e is continuous Integration and continuous deployment.

There are a few steps which we will follow.

Step1: Adding configuration files to the root folder

Step 2: Configuring s3 bucket to hold Procfile and .npmrc file

Step 3 Creating AWS Code build environment.

Step 4: Updating Code Pipeline Environment to add build stage.

Step1: Adding configuration files to the root folder

To do this add two files to the root of your source directory.

.npmrc

# Force npm to run node-gyp also as root, preventing permission denied errors in AWS with npm@5
unsafe-perm=true

Procfile

web: node angular-ssr/server/main.js

Step 2: Configuring s3 bucket to hold Procfile and .npmrc file

• Give Bucket name in General configuration
• In the Object, ownership allows all the public access as mentioned below. and leave the rest of the settings as default and create a bucket.

• After creating the bucket click on bucket go to permission and edit the bucket policy and add the below rule andreplace your bucket name in the resource array.After adding the below rule your bucket should show publicly accessible at the top.
• Now upload the files .npmrc and Procifle to your bucket.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:*",
            "Resource": [
                "arn:aws:s3:::your bucket name",
                "arn:aws:s3:::your bucket name/*"
            ]
        }
    ]
}

Step 3: Creating AWS Code build environment.

• Go to AWS and search code build. Create a new build project
• In Project configuration add the name and description of your choice.
• Select the source as AWS Code commit. If you are using github or some other source choose that and add repo and branch name and leave other settings as by default selected one and skip to build Spec section

• In the build spec section choose the insert build command and click on the switch to the editor and clear all and add the below commands.Make sure to replace your bucket name in env and post-build commands

version: 0.2
env:
    variables:
        CACHE_CONTROL: "86400"
        S3_BUCKET: "arn:aws:s3:::your bucket name"
        BUILD_FOLDER: "dist"
phases:
  install:
    runtime-versions:
        nodejs: 12
    commands:
        - echo Installing source NPM dependencies...
        - npm install
        - npm install -g @angular/cli@next
  build:
    commands:
        - echo Build started 
        - npm run build:ssr
  post_build:
    commands:
        - aws s3 cp s3://your bucket name/Procfile ./dist
        - aws s3 cp s3://your bucket name/.npmrc ./dist
        - bash -c "if [ /"$CODEBUILD_BUILD_SUCCEEDING/" == /"0/" ]; then exit 1; fi"
artifacts:
    files:
        - '**/*'
    base-directory: 'dist'

• Select no artifacts and choose Cloud watch to see build logs and click on create a bucket.

Step 4: Updating Code Pipeline Environment to add build stage.

• Again go to aws and search code pipeline and edit the pipeline you have created and go to build stage and create build stage.
• Add the Build provider as AWS code build and select the Project name which we created in Build Project in step3 and click on next.

• Now go and change some code and commit again and go to code pipeline. If everything goes well you will see something like below.

Now go to the URL of the elastic beanstalk and it should show the application you deployed.

So that’s all. It’s a bit lengthy but very useful as I messed my head a lot when I was stuck on how to do the setup. You can refer to the below StackOverflow links to understand the actual problems and do like the blog and upvote the below answers.