Creating a CI/CD pipeline to deploy Angular Universal on AWS Elastic Beanstalk

First step would be creating an environment, and an application for AWS Elastic Beanstalk. If you have a new (fresh) AWS account and don't have any environments or applications created yet - then AWS Console only allows you to create a new application, but not the environment. That's because AWS will create the environment for you automatically, when you create your first ever application. For this tutorial however, we are going to assume that you already have at least 1 application created, so you can create the environment manually. Creating the environment manually before creating the application gives you the advantage to specify a domain, and name for the environment. If you do not care about this, you can just create an application, which automatically generates an environment for you, as previously mentioned.

Let's proceed, go to the Elastic Beanstalk page, which you can navigate to, by using the search in the top left navbar. Choose "Environments" from the left sidebar and click "Create a new environment".

Choose "Web server environment" as the environment tier, and proceed by clicking "Select".

Next, fill in all the details for the environment, such as application name, environment name, and you can also specify the domain that you want to use for this application. You can use that domain to access the application after it's been deployed later on.

After filling in the basic initial information, scroll down to the "Platform" and "Application code" sections. Choose the following platform settings as described on the screenshot below (Node.js, Node.js 16 running on 64bit Amazon Linux 2, 5.6.3)

For "Application code" section, leavei t as it is, i.e. use the "Sample application". This does not matter, it means that it will show you a sample Node.js application when going to the domain specified above. We will replace sample application with our own application once we've set up the CI/CD pipeline.

Click "Create environment" and we're done with the first step.

You're going to have to wait for a few minutes until the environment is created.

When you now click on the domain link below the environment's name, you can see that the sample Node.js application is up and running - which means that you've successfully created a Beanstalk environment.

Creating a new environment also creates the application automatically (and vise versa, when creating an application). You can confirm this by navigating to the "Applications" page from the left sidebar.

To specify the command that starts our Angular application, we need to create a file named "Procfile". This file is responsible for starting our Angular Universal application's process. We will copy "Procfile" from the S3 bucket to our Elastic Beanstalk environment during the build process, which will be addressed later. For now, we need to create the S3 bucket and upload the file into this bucket.

Navigate to the S3 page and click "Create bucket" to start creating the bucket. Choose a name for the bucket, click on "ACL's enabled" in the "Object ownership" section. Choose "Object writer" for object ownership and choose the specified policy options.

Now that the bucket is created, you can upload "Procfile" to this bucket. Create this file anywhere on your computer and put the following content inside of it:

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

This file will be copied into the dist folder. Make sure that the path in this file is correct, as it depends on the name of your Angular project. In this example, Angular project's name is "angular-ssr". After you've uploaded the file, we will also need to specify the bucket policy. You can do this by navigating to the bucket's page and opening the "Permissions" tab.

Click edit and add the following policy to your bucket, make sure to also replace the bucket name in the policy resources, with your own bucket name. Click save changes and you're done.