Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: josef <josef.aidt@gmail.com>
  • Loading branch information
iartemiev and josefaidt authored Dec 9, 2024
1 parent 230cbd9 commit 1391fd6
Showing 1 changed file with 8 additions and 11 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -100,14 +100,12 @@ export default function App() {

## Add an Event API to an existing Amplify backend

This guide walks through how you can add an Event API to an existing Amplify backend.
We'll be using Cognito User Pools for authenticating with Event API from our frontend application.
Any signed in user will be able to subscribe to the Event API and publish events.
This guide walks through how you can add an Event API to an existing Amplify backend. We'll be using Cognito User Pools for authenticating with Event API from our frontend application. Any signed in user will be able to subscribe to the Event API and publish events.

Before you begin, you will need:

- An existing Amplify backend (see [Quickstart](/[platform]/start/quickstart/))
- Latest versions of `@aws-amplify/backend` and `@aws-amplify/backend-cli` (`npm i @aws-amplify/backend@latest @aws-amplify/backend-cli@latest`)
- Latest versions of `@aws-amplify/backend` and `@aws-amplify/backend-cli` (`npm add @aws-amplify/backend@latest @aws-amplify/backend-cli@latest`)

### Update Backend Definition

Expand Down Expand Up @@ -135,7 +133,7 @@ const backend = defineBackend({
const customResources = backend.createStack('custom-resources');

// add a new Event API to the stack:
const cfnEventAPI = new CfnApi(customResources, 'cfnEventAPI', {
const cfnEventAPI = new CfnApi(customResources, 'CfnEventAPI', {
name: 'my-event-api',
eventConfig: {
authProviders: [
Expand All @@ -158,7 +156,7 @@ const cfnEventAPI = new CfnApi(customResources, 'cfnEventAPI', {
// create a default namespace for our Event API:
const namespace = new CfnChannelNamespace(
customResources,
'cfnEventAPINamespace',
'CfnEventAPINamespace',
{
apiId: cfnEventAPI.attrApiId,
name: 'default',
Expand Down Expand Up @@ -204,20 +202,19 @@ npx ampx sandbox

### Connect your frontend application

After the sandbox deploys, connect your frontend application to the Event API.
We'll be using the Amplify Authenticator to sign in to our Cognito User Pool.
After the sandbox deploys, connect your frontend application to the Event API. We'll be using the [Amplify Authenticator component](https://ui.docs.amplify.aws/react/connected-components/authenticator) to sign in to our Cognito User Pool.

If you don't already have the Authenticator installed, you can install it by running `npm i @aws-amplify/ui-react`.
If you don't already have the Authenticator installed, you can install it by running `npm add @aws-amplify/ui-react`.

```tsx title="src/App.tsx"
import { useEffect, useState } from 'react';
import { Amplify } from 'aws-amplify';
import { events, type EventsChannel } from 'aws-amplify/data';
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import config from '@/amplify_outputs.json';
import outputs from '../amplify_outputs.json';

Amplify.configure(config);
Amplify.configure(outputs);

export default function App() {
const [myEvents, setMyEvents] = useState<Record<string, any>[]>([]);
Expand Down

0 comments on commit 1391fd6

Please sign in to comment.