This is a submission for the The AWS Amplify Fullstack TypeScript Challenge
What I Built
I have built and deployed a secure and scalable Angular full-stack application with AWS Amplify Gen 2, leveraging built-in authentication functionalities and UI components for a streamlined user experience and working on implementing other features.
Demo
Journey
Here’s a breakdown of how to build and deploy an Angular fullstack application with AWS Amplify Gen 2, integrating user authentication and leveraging Amplify connected components:
1. Setting Up the Project:
Prerequisites: Node.js, npm (or yarn), AWS account with IAM user configured.
Create Angular Project: set up a basic Angular project.
Install Amplify CLI: npm install -g @aws-amplify/cli
2. Initialize Amplify in your project:
3: Add Authentication
Choose the default configuration or customize it according to your needs.
4: Install Amplify Angular Library
5: Implement Authentication
<amplify-authenticator>
<ng-template amplifySlot=“authenticated” let-user=“user” let-signOut=“signOut”>
<app-home></app-home>
<button (click)=“signOut()”>Sign Out</button>
</ng-template>
</amplify-authenticator>
//import code
import { Amplify } from ‘aws-amplify‘;
import outputs from ‘../../amplify_outputs.json‘;
import { AmplifyAuthenticatorModule, AuthenticatorService } from ‘@aws-amplify/ui-angular‘;
Amplify.configure(outputs);
@Component({
//other code
imports: [RouterOutlet, TodosComponent, AmplifyAuthenticatorModule],
})
export class AppComponent {
constructor(public authenticator: AuthenticatorService) {
Amplify.configure(outputs);
}
}
Connected Components and/or Feature Full
Sets up an Angular application with AWS Amplify Gen 2, integrating authentication and using Amplify connected components for UX patterns and working on implementing other features.
