ng-amplify Angular Fullstack App with AWS Amplify Gen 2
Tags: devchallenge, awschallenge, amplify, fullstack
Published: 2024-05-21 07:14:15


*This is a submission for the [The AWS Amplify Fullstack TypeScript Challenge ](https://dev.to/challenges/awschallenge)*

## 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
{% embed https://main.d3tpprgiim9ho3.amplifyapp.com/ %}

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lzd4jqmpluurbm68j1h.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfiwlabjk0ggboh47e4e.gif)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90ljnswbg4gpziwuxj5i.gif)

## 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:
```bash
amplify init
```

### 3: Add Authentication
```bash
amplify add auth
```
Choose the `default configuration` or customize it according to your needs.

### 4: Install Amplify Angular Library
```bash
npm add @aws-amplify/ui-angular
```

### 5: Implement Authentication
```html
//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>
```

```typescript
//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);
  }
}
```

### 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'
})
```
**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.