Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

Deploying your Angular App to a Serverless Environment

By Michael Yadchuk - Jul 12, 2018

The growing popularity of serverless deployment was undoubtedly an inevitability. With automated scalability, a more flexible payment process, and no need to deal with servers, it's quite a bit more effective than other traditional formats. 

That's why, in today's lesson, we'll return to the backend and go in-depth on serverless deployment by discussing things like:

  • Installing a package called 'Serverless' for AWS credential specification
  • Starting a new Angular project via the Angular CLI
  • Integrating server-side rendering via Universal
  • Deploying your Angular project to AWS

All of this will be done through the command line, so this tutorial won't focus on using any code. If you'd like to get access to all the commands, you can find them via GitHub

So, without any further delay, let's get started!

Setting Up Your Credentials for AWS

Before anything else, we'll install a package called Serverless, which will help you set up all the prerequisite credentials for AWS. I'll guide you through the process chronologically:

  1. If you haven't already, be sure to have node.js installed on the system you're using. You can follow the installation steps on the node.js site.
  2. Then, open up your command line interface and type in the following:
> npm install -g serverless

This command will begin the serverless installation process

3. After all the prerequisites were nailed down, it's time to set up your AWS account, which is where you'll begin the deployment process. The signup is quite straightforward, and despite the fact that you'll need to enter your credit card number, you won't be billed if you're just following along with this tutorial.

4. Now, once you're in the main dashboard, just type in 'IAM' in the search bar. From there, once you enter the IAM dashboard, click on 'users' on the left and then 'add user', as shown in the screenshot below:

 

5. Once you click 'add user', you'll be presented with an area that asks you for a username and an access type. Here, just add something relevant in the name section and select 'programmatic access' for the access type:

6. Now, we'll give this user administrator permissions. In order to do so, click the blue 'next' button on the bottom right, click on the 'attach existing policies' button, and select the first option. I've highlighted all these buttons below:

7. Then, click the blue button on the bottom right to go over to the review section, and again to receive the 'success' message. At this point, you'll receive some auto-generated user info, including an access key id and a secret access key:

In the tutorial, Gary copy-pastes this info into a notepad document for later use. To see the secret access key, just press the 'show' button. 

8. Now, it's time to configure the credentials that you've just set up. In order to do so, run the following command in your command line interface:

> serverless config credentials --provider aws --key PUT YOUR KEY HERE --secret SECRET KEY HERE

Notice how this command has a few sections, separated by the '--' symbol. Only the word right after that symbol represents what type of info you're feeding it, and everything afterward determines the value of that info. 

Starting a New Angular Project and Running It In a Serverless Environment

At this point, you've taken care of all the one-time steps that you won't have to worry about again. Now, it's time to create the Angular project that you'll use to deploy to AWS. Once again, I'll guide you through every step chronologically:

  1. Start a new Angular project with the ng new command, as shown below:
ng new someapplication

Then, just 'cd' into the app name you generated:

> cd someapplication

2. In order to spice things up, we'll implement some SEO-optimization. We'll do this by adding another ng toolkit, which will enable us to convert the Angular application into one that supports server-side rendering. This is perfect if you're willing to experiment with SEO-optimization to help search engines pick up your content. 

To add this to your project, just run the command below:

> ng add @ng-toolkit/universal

3. Now, it's time to add Serverless, the application that we'll be using to run our Angular project. In order to do so, I'll use the command below:

> ng add @ng-toolkit/serverless --provider aws

4. For our final step, we'll build and deploy the Angular project with just a single command. In the video, Gary mentions how it may take a moment or two to run the command, but in order to get it running, just type in the following:

> npm run build:serverless:deploy

5. After the command was run, there should be a link in the CLI that, when clicked, would take you to the default site theme for an Angular project:

Once you click that link, you should be presented with the default site theme:

If you got to this point, congrats! Your app is now not only running, but it's also running in a serverless environment, which offers a ton of benefits once you get into more complex and public projects. 

Wrapping It All Up

If you were able to follow along with this tutorial, you hopefully got a good understanding of how you would go about deploying your Angular app into a serverless environment. Again, this will provide you with a lot of benefits once you get into more complex projects, including automated scalability, a more flexible payment process, and no need to deal with servers.

Feel free to refer to this guide at any time in the future, and check out this GitHub link, where you'll find all the commands I used for this tutorial. 


Share this post




Say something about this awesome post!