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

Gerard Sans
May 30 · 7 min read

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:

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

Introduction to AWS Amplify

  • 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

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

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

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

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

Installing 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

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

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

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

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

Importing the Angular module

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

At this point, your application is ready.

Using Amplify Service

Using the Authenticator Component

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

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

git initgit remote add origin repo@repoofyourchoice.com:username/project-name.gitgit 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

amplify remove authamplify push

Conclusion

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!

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.

Gerard Sans

Written by

Developer Advocate @AWSCloud | Just be AWSome | MC Speaker Trainer Community Leader | Views are my own | @fullstackcon @ReactiveConf @ngcruise @UphillConf UK ☂