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

Gerard Sans
May 30 · 7 min read

Introduction to AWS Amplify

AWS Amplify stack.

Amplify CLI

Setting up a new project with the Angular CLI

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

Changes to Angular CLI project

{
"compilerOptions": {
"types": ["node"]
},
}
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
amplify configure

Setting up your Amplify environment

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

Adding authentication

amplify add auth

Pushing changes to the cloud

amplify push
amplify status

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
]
});

Using Amplify Service

Using the Authenticator Component

npm i --save @aws-amplify/ui
@import "~@aws-amplify/ui/src/Theme.css";
@import "~@aws-amplify/ui/src/Angular.css";
<amplify-authenticator></amplify-authenticator>
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

Cleaning up Services

amplify remove authamplify push

Conclusion


Thanks for reading!

Gerard Sans

Written by

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade