Step by Step: Running Angular Applications in AWS

What Is AWS Amplify?

AWS Amplify is a platform that allows web and mobile developers to build full-stack applications, deploy them in the Amazon cloud, and allow them to easily integrate with other Amazon services. Amplify supports a variety of development platforms including Angular, React Native, Flutter, and Vue. 

Technically, AWS Amplify is a JavaScript library that makes it possible to build and deploy serverless applications. Amplify lets you configure a web or mobile back end, connect an application, use a visual builder to create the front end UI, and deploy the application to production.

Recommended article

July 23, 2024

Kubernetes Cost Optimization: A Developer’s Guide

Gilad David Maayan

Cloud

AWS Amplify Components

AWS Amplify has the following main components:

• Library—allows your application to add AWS cloud services and interact with them
• UI—an interface that lets you assemble pre-built UI components, including authentication, that are compatible with cloud workflows in AWS Amplify. 
• CLI—Amplify provides simple CLI commands that let you make changes to cloud services used by the application and modify the AWS-managed back end on the fly.

Key Features

Here are some of the key features AWS Amplify provides for application developers:

• Authentication—you can easily define onboarding flows for end users. Amplify offers a managed user directory with built sign-up, sign-in, forgot password, and multi-factor authorization capabilities.
• Fast backend updates—because AWS Amplify is serverless, you can make changes to the back end configuration easily and they are immediately updated in production applications.
• Artificial intelligence and machine learning (AI/ML)—Amazon provides a wide range of AI/ML services and capabilities. You can use AWS Amplify to quickly integrate your application with services like Amazon SageMaker.
• Storage—AWs Amplify provides managed storage both for application content and user file uploads, including photos and videos. Content can be securely stored on the end user’s device and synchronized to Amazon cloud storage.

AWS Amplify Costs

When you use the Amplify framework, which includes libraries, CLI, and UI components, you pay only for the underlying AWS resources you use. There are no additional charges for the Amplify framework itself.

However, there is a cost to building, deploying, and hosting your applications. Build and Deploy operations cost $0.01 per minute, Hosting costs $0.15 per GB, and cloud storage for your applications is priced at the standard Amazon S3 rate, $0.023 per GB.

As a new AWS Free Tier customer, you get 1,000 free builds and deployments per month, 15 GB of bandwidth per month, and 5 GB of writable data storage per month. However, keep in mind that cloud costs can quickly get out of control. You can use the Amazon Cost Calculator to manage your AWS costs and determine the cost of AWS Amplify and other services or resources required for your application.

Tutorial: Building and Testing an Angular App with AWS Amplify

This tutorial is abbreviated from the official AWS Amplify tutorial.

Building an Angular App

Before starting, make sure the following technologies are installed:

• Node.js (v14.x or higher) 
• npm (v14.4 or higher) 
• git (v2.14.1 or higher)

Ensure you have an AWS account with which you can sign in. Create an account if you don’t have one.

Install AWS Amplify CLI

To install and configure AWS Amplify:

1. Go to the terminal and use the following command to install Amplify CLI:

npm install -g @aws-amplify/cliCode language: CSS (css)

2. Use the following command to configure AWS Amplify for this demo:

amplify configure

The terminal will ask for the preferred AWS region and the username for a new IAM user. 

3. Head to the AWS Console to complete the IAM user creation process through the Add User option. Copy down the Access Key ID and Secret Access Key once the user is created.

4. When the prompt asks, put in Access Key ID and Secret Access Key.

Set up the Angular App and Its AWS Amplify Backend

To create a demo Angular app:

1. Use the following command to bootstrap a new Angular app in Amplify CLI and go to the main directory:

npx -p @angular/cli ng new amplify-app
cd amplify-app
Code language: JavaScript (javascript)

When prompted, type Y to the question about adding Angular routing.

2. This tutorial creates an Angular demo app that stores a to-do list of tasks. Add the following module imports and declarations for the Angular app in src/app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { DemoAppComponent } from './app.component';

@NgModule({
  declarations: [DemoAppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AmplifyUIAngularModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [DemoAppComponent]
})
export class DemoAppModule {}
Code language: JavaScript (javascript)

3. Add the following Amplify imports for the Angular app in src/main.ts:

import { Amplify } from 'aws-amplify';
import aws_exports from './aws-exports';
Amplify.configure(aws_exports);
Code language: JavaScript (javascript)

4. Add the following Amplify imports for the Angular app in tsconfig.app.json:

"compilerOptions": {
  "types" : ["node"]
}
Code language: JavaScript (javascript)

5. Add the following code for the demo Angular app’s functionality to

src/app/app.component.ts:

import { Component, OnInit, OnDestroy } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { APIService, Task } from "./API.service";

@Component({
  selector: "demo-app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class DemoAppComponent implements OnInit, OnDestroy {
  title = "demo-angular–amplify-app";
  public createForm: FormGroup;

  public tasks: Array<Task> = [];

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
    this.subscription = null;
  }

  constructor(private api: APIService, private fb: FormBuilder) {
    this.createForm = this.fb.group({
      taskName: ["", Validators.required],
    });
  }

  private appSubscription: Subscription | null = null;

  async ngOnInit() {
    this.api.ListTasks().then((event) => {
      this.tasks = event.items;
    });

    this.appSubscription = <Subscription>(
      this.api.OnCreateTaskListener.subscribe((event: any) => {
        const newTask = event.value.data.onCreateTask;
        this.tasks = [newTask, ...this.tasks];
      })
    );
  }

  public onCreate(task: Task) {
    this.api
      .CreateTask(task)
      .then((event) => {
        console.log("task created!");
        this.createForm.reset();
      })
      .catch((e) => {
        console.log("error creating task...", e);
      });
  }
}
Code language: JavaScript (javascript)

6. Add the following HTML code for the frontend in the src/app/app.component.html file:

<div class="form-body">
	<form autocomplete="off" [formGroup]="createForm" (ngSubmit)="onCreateTask(createForm.value)">
		<div>
			<label>Task Name: </label>
			<input type="text" formControlName="name" autocomplete="off" /> </div>
		<div>
	</form>
</div>
<div *ngFor="let task of tasks">
	<div>{{ task.name }}</div>
</div>
Code language: JavaScript (javascript)

To create a backend on AWS Amplify for the demo Angular app:

1. From the root directory, put in the following command and initialize Amplify:

amplify init

2. Type in the following inputs for the respective prompts:

• Source directory path: src
• Distribution directory path: dist
• Build command: npm run-script build
• Start command: npm start

3. Run the following command to Install the Amplify Angular library and run the Angular app:

npm install --save aws-amplify @aws-amplify/ui-angularCode language: CSS (css)

npm start

Deploy and Connect API and Database

This tutorial uses GraphQL as the data language for the Angular app. It will set up and use an API that allows interaction with a provided database.

To install and configure GraphQL API:

1. Use the following command to add a GraphQL API to the Angular app:

amplify add api

2. Type in the following inputs for the respective prompts:

• API Name: todo-demoAPI
• Default authorization type of API: API Key
• Description of API: Angular demo
• API expiration time period: 7
• Configure advanced settings for GraphQL: no
• Annotated GraphQL schema: no
• Schema template: “Task” with ID, name
• Edit this schema now: yes

3. Replace the schema in amplify/backend/api/todo-demoAPI/schema.graphql with the following:

	type Task @model {
  id: ID!
  taskName: String!
}
Code language: CSS (css)

4. Create the backend resources for the API using the following command:

amplify push

5. Type in the following inputs for the respective prompts:

• Sure want to continue: Y
• Generate code GraphQL API: Y
• Code generation language target: angular
• API expiration time period: 7
• File name pattern for GraphQL: src/demo-graphql/**/*.graphql
• Generate/update all possible GraphQL operations: Y
• Maximum statement depth: 2
• File name for generated code: src/app/API.service.ts

6. Run the app with the following command:

npm start

Deploy Your Angular App

To publish and deploy your Angular app through Amplify:

1. Go to the root directory and run the following command:

amplify add hosting

Select the bolded options for the prompts that follow.

2. Use the following command to publish your Angular app.

amplify publish

The app is hosted at the URL that the terminal displays once the command above is run.

Note: If you have an existing Angular app running on-premises and want to migrate it to Amazon, there may be some additional considerations not covered in this tutorial. See this cloud migration checklist to make sure your migration goes smoothly.

Testing the App

To test the Angular app created with Amplify backend:

1. Update the amplify.yml app with the following code:
   

test:
  phases:
    preTest:
      commands:
       —npm ci
       —npm install wait-on
       —npm install pm2
       —npm install mocha@5.2.0 mochawesome mochawesome-merge mochawesome-report-generator
       —npx pm2 start npm -- start
       —'npx wait-on --timeout 60 http://localhost:3000'
    test:
      commands:
       —'npx cypress run --reporter mochawesome --reporter-options "reportDir=cypress/demoTestReports/mochawesome-report,overwrite=false,html=false,json=true,timestamp=mmddyyyy_HHMMss"'
    postTest:
      commands:
       —npx mochawesome-merge cypress/report/mochawesome-report/mochawesome*.json > cypress/report/mochawesome.json
       —npx pm2 kill
  artifacts:
    baseDirectory: cypress
    configFilePath: '**/mochawesome.json'
    files:
     —'**/*.png'
     —'**/*.mp4'
Code language: CSS (css)

The test step specifies that Amplify runs tests every time it builds the Angular app. It will generate a JSON report of output from running the tests. 

2. Create and store the Cypress tests for the Angular app in the cypress directory. 

Conclusion

In this article, I explained the basics of AWS Amplify and showed how to run an Angular application in the Amazon cloud. This involves:

• Installing the AWS Amplify CLI
• Setting up the Angular app and an AWS Amplify Backend
• Deploying and connecting the API and database
• Deploying the Angular app to Amazon
• Testing the app

We hope this will be useful as you consider migrating your Angular applications to the cloud.