Build your first full-stack serverless app with Angular and AWS Amplify

Build flexible, scalable, and reliable apps with AWS Amplify

In this tutorial, we will learn how to build a full-stack serverless app using Angular and AWS Amplify. We will create a new project and add a full authorisation flow using the authenticator component. We will cover:

• Introduction to AWS Amplify
• Setting up a new project with the Angular CLI
• Installing Amplify CLI and setting up your Amplify environment
• Adding authentication and pushing changes to the cloud
• Publishing your app via the AWS Amplify Console
• Cleaning up cloud services

Please let me know if you have any questions or want to learn more on the above at @gerardsans.

Introduction to AWS Amplify

AWS Amplify allows you to build modern full-stack serverless mobile and web apps by providing an open source Amplify Framework (consisting of the Amplify libraries and CLI), integrations with AWS cloud services, and the AWS Amplify Console.

• Amplify libraries: aws-amplify and aws-amplify-angular.
• Amplify CLI: command line tool for configuring and integrating cloud services.
• UI components: authenticator, photo picker, photo album, chat bot and Amazon Sumerian scene.
• Cloud services: authentication, storage, analytics, notifications, AWS Lambda functions, REST and GraphQL APIs, chat bots and extended reality (AR/VR).

By using AWS Amplify, teams can focus on development while the Amplify team enforces best patterns and practices throughout the AWS Amplify stack.

AWS Amplify stack.

Amplify CLI

The Amplify CLI provides a set of commands to help with repetitive tasks and automating cloud service setup and provision.

Some commands will prompt questions and provide sensible defaults to assist you during its execution. These are some common tasks. Run:

• amplify init, to setup a new environment. Eg: dev, test, dist.
• amplify push, to provision local resources to the cloud.
• amplify status, to list local resources and their current status.

The Amplify CLI uses AWS CloudFormation to manage service configuration and resource provisioning via templates. This a declarative and atomic approach to configuration. Once a template is executed, it will either fail or succeed.

Setting up a new project with the Angular CLI

To get started, create a new project using the Angular CLI. If you already have it, skip to the next step. If not, install it and create the app using:

npm install -g @angular/cli
ng new amplify-app

Navigate to the new directory and check everything checks out before continuing

cd amplify-app
npm install
ng serve

Changes to Angular CLI project

The Angular CLI requires some changes in order to use AWS Amplify. Come back to this section to troubleshoot any issues.

Add type definitions for Node.js by changing src/tsconfig.app.json. This is a requirement for aws-sdk-js.

{
  "compilerOptions": {
    "types": ["node"]
  },
}

Add the following code, to the top of src/polyfills.ts. This is a requirement for Angular 6+.

declare global {
  interface Window { global: any; }
}
window.global = window;

Installing the AWS Amplify dependencies

Install the required dependencies for AWS Amplify and Angular using:

npm install --save aws-amplify aws-amplify-angular

Installing the Amplify CLI

In case you don’t already have it, install the Amplify CLI:

npm install -g @aws-amplify/cli

Now we need to configure the Amplify CLI with your credentials:

amplify configure

If you’d like to see a video walkthrough of this configuration process, click here. Alternatively follow the steps below.

Once you've signed in to the AWS Console, continue:

• Specify the AWS Region: pick-your-region
• Specify the username of the new IAM user: amplify-app

In the AWS Console, click Next: Permissions, Next: Tags, Next: Review, and Create User to create your new IAM user. Then, return to the command line and press Enter.

• Enter the access key of the newly created user:
  accessKeyId: YOUR_ACCESS_KEY_ID
  secretAccessKey: YOUR_SECRET_ACCESS_KEY
• Profile Name: default

To view the new created IAM User go to the dashboard at https://console.aws.amazon.com/iam/home#/users. Also be sure that your region matches your selection.

Setting up your Amplify environment

AWS Amplify allows you to create different environments to define your preferences and settings. For any new project you need to run the command below and answer as follows:

amplify init

• Enter a name for the project: amplify-app
• Enter a name for the environment: dev
• Choose your default editor: Visual Studio Code
• Please choose the type of app that you’re building javascript
• What javascript framework are you using angular
• Source Directory Path: src
• Distribution Directory Path: dist/amplify-app
• Build Command: npm run-script build
• Start Command: ng serve
• Do you want to use an AWS profile? Yes
• Please choose the profile you want to use default

At this point, the Amplify CLI has initialised a new project and a new folder: amplify. The files in this folder hold your project configuration.

<amplify-app>
    |_ amplify
      |_ .config
      |_ #current-cloud-backend
      |_ backend
      team-provider-info.json

Adding authentication

AWS Amplify provides authentication via the auth category which gives us access to AWS Cognito. To add authentication use the following command:

amplify add auth

When prompted choose:

• Do you want to use default authentication and security configuration?: Default configuration
• How do you want users to be able to sign in when using your Cognito User Pool?: Username
• What attributes are required for signing up? (Press to select, to toggle all, to invert selection): Email

Pushing changes to the cloud

By running the push command, the cloud resources will be provisioned and created in your AWS account.

amplify push

To quickly check your newly created Cognito User Pool you can run

amplify status

To access the AWS Cognito Console at any time, go to the dashboard at https://console.aws.amazon.com/cognito. Also be sure that your region is set correctly.

Your resources have been created and you can start using them!

Configuring the Angular application

Reference the auto-generated aws-exports.js file that is now in your src folder. To configure the app, open main.ts and add the following code below the last import:

import Amplify from 'aws-amplify';
import amplify from './aws-exports';
Amplify.configure(amplify);

Importing the Angular module

Add the Amplify module and service to src/app/app.module.ts:

import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular';
@NgModule({
  imports: [
    AmplifyAngularModule
  ],
  providers: [
    AmplifyService
  ]
});

At this point, your application is ready.

Using Amplify Service

The AmplifyService provides access to AWS Amplify core categories via dependency injection: auth, analytics, storage, api, cache, pubsub; and authentication state via observables.

Using the Authenticator Component

AWS Amplify provides UI components that you can use in your app. Let’s add these components to the project

npm i --save @aws-amplify/ui

Also include these imports to the top of styles.css

@import "~@aws-amplify/ui/src/Theme.css";
@import "~@aws-amplify/ui/src/Angular.css";

In order to use the authenticator component add it to src/app.component.html:

<amplify-authenticator></amplify-authenticator>

You can run the app and see that an authentication flow has been added in front of your app component. This flow gives users the ability to sign up and sign in.

To view any users that were created, go back to the Cognito Dashboard at https://console.aws.amazon.com/cognito. Also be sure that your region is set correctly.

Alternatively you can also use:

amplify console auth

Accessing User Data

To access the user’s info once they are signed in call currentAuthenticatedUser(). This will return a promise.

import { AmplifyService } from 'aws-amplify-angular';
@Component(...)
export class AppComponent {
  constructor(public amplify: AmplifyService) {
    amplify.auth().currentAuthenticatedUser().then(console.log)
  }
}

Publishing your app via the AWS Amplify Console

The first thing you need to do is create a new repo for this project. Once you’ve created the repo, copy the URL for the project to the clipboard and initialise git in your local project:

git init
git remote add origin repo@repoofyourchoice.com:username/project-name.git
git add .
git commit -m 'initial commit'
git push origin master

Next visit the AWS Amplify Console in your AWS account. Click Get Started to create a new deployment. Next, authorise your repository provider as the repository service. Next, choose the new repository and branch for the project you just created and click Next. In the next screen, create a new role and use this role to allow the AWS Amplify Console to deploy these resources and click Next. Finally, click Save and Deploy to deploy your application!

Cleaning up Services

If at any time, you would like to delete a service from your project and your AWS Account, you can do this by running:

amplify remove auth
amplify push

Conclusion

Congratulations! You successfully built your first full-stack serverless app using Angular and AWS Amplify. Thanks for following this tutorial.

You have learnt how to provide an authentication flow using the authenticator component or via the service API and how to use Amplify CLI to execute common tasks including adding and removing services.

Thanks for reading!

Have you got any questions regarding this tutorial or AWS Amplify? Feel free to reach me anytime at @gerardsans.

My Name is Gerard Sans. I am a Developer Advocate at AWS Mobile working with AWS AppSync and AWS Amplify teams.

Node is an open source, cross-platform JavaScript run-time environment

Angular is an open source project from Google.