DEV Community

Cover image for ng-amplify Angular Fullstack App with AWS Amplify Gen 2
chintanonweb
chintanonweb

Posted on • Updated on

ng-amplify Angular Fullstack App with AWS Amplify Gen 2

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 Jira full-stack application with AWS Amplify Gen 2, leveraging built-in authentication functionalities and UI components for a streamlined user experience and implementing add, update, and delete tickets using AWS Amplify Gen 2 data. This includes building a real-time API and database using TypeScript to define data models and securing API with authorization rules.

Demo

Image description

Image description

Image description

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:



amplify init


Enter fullscreen mode Exit fullscreen mode

3: Add Authentication



amplify add auth


Enter fullscreen mode Exit fullscreen mode

Choose the default configuration or customize it according to your needs.

4: Install Amplify Angular Library



npm add @aws-amplify/ui-angular


Enter fullscreen mode Exit fullscreen mode

5: Implement Authentication



//app.component.html
<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>


Enter fullscreen mode Exit fullscreen mode


//app.component.ts
//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);
  }
}


Enter fullscreen mode Exit fullscreen mode

6: Building your data backend

You should see an amplify/data/resource.ts file, which is the central location to configure your data backend.

  • Define schema for as per your requirements ```typescript

a.schema({
Ticket: a.model({
title: a.string(),
// other required fields
priority: a.enum(['low', 'medium', 'high']),
}),
});

CRUD operation: 

```typescript


import type { Schema } from '../../../amplify/data/resource';
const client = generateClient<Schema>();
//fetch
const fetchTickets = async () => {
  const { data: tickets, errors } = await client.models.Ticket.list();
};
//create
const { errors, data: newTicket } = await client.models.Ticket.create({
  title: "My new ticket"
});
//update 
const { data: updatedTodo, errors } = await client.models.Ticket.update({
  id: 'ticket_id',
  title: "updated title"
})
const { data: deletedTicket, errors } = await client.models.Ticket.delete({
  id: 'ticket_id'
})


Enter fullscreen mode Exit fullscreen mode

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. With Amplify Data, you can build a secure, real-time API backed by a database in minutes. After you define your data model using TypeScript, Amplify will deploy a real-time API for you.

Top comments (5)

Collapse
 
lizardkinglk profile image
sndp

Very nice!

Collapse
 
chintanonweb profile image
chintanonweb

Thank you so much

Collapse
 
davidsilva profile image
David Silva

Looks like you used Gen1.

Collapse
 
maludecks profile image
Malu Decks

super cool app, good job!

Collapse
 
chintanonweb profile image
chintanonweb

Thank you so much