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

Introduction to AWS Amplify

AWS Amplify stack.

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
cd amplify-app
npm install
ng serve
{
"compilerOptions": {
"types": ["node"]
},
}
declare global {
interface Window { global: any; }
}
window.global = window;
npm install --save aws-amplify aws-amplify-angular
npm install -g @aws-amplify/cli
amplify configure

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

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.

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

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.

import Amplify from 'aws-amplify';
import amplify from './aws-exports';
Amplify.configure(amplify);
import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular';@NgModule({
imports: [
AmplifyAngularModule
],
providers: [
AmplifyService
]
});
npm i --save @aws-amplify/ui
@import "~@aws-amplify/ui/src/Theme.css";
@import "~@aws-amplify/ui/src/Angular.css";
<amplify-authenticator></amplify-authenticator>

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.

amplify console auth
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!

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gerard Sans

Gerard Sans

Helping Devs to succeed #AI #web3 / ex @AWSCloud / Just be AWSome / MC Speaker Trainer Community Leader @web3_london / @ReactEurope @ReactiveConf @ngcruise