Initialize AWS Amplify

Now we'll add AWS Amplify Gen 2 to our Nuxt application. This involves creating the backend configuration files and connecting them to our frontend.

Step 1: Create the Amplify Backend Structure

In Amplify Gen 2, you define your backend in an amplify/ folder using TypeScript. Let's create this structure.

First, install the Amplify backend package:

Create the amplify directory structure:

Step 2: Create the Auth Resource

Create amplify/auth/resource.ts:

// amplify/auth/resource.ts
import { defineAuth } from '@aws-amplify/backend';

/**
 * Define and configure your auth resource
 * This creates an Amazon Cognito User Pool for authentication
 */
export const auth = defineAuth({
  loginWith: {
    email: true,  // Users sign in with email
  },
  // Optional: Add additional user attributes
  userAttributes: {
    preferredUsername: {
      required: false,
      mutable: true,
    },
  },
});

Step 3: Create the Data Resource

Create amplify/data/resource.ts:

// amplify/data/resource.ts
import { type ClientSchema, a, defineData } from '@aws-amplify/backend';

/**
 * Define your data schema
 * Each model becomes a DynamoDB table with GraphQL API
 */
const schema = a.schema({
  Todo: a
    .model({
      content: a.string().required(),
      completed: a.boolean().default(false),
      priority: a.enum(['low', 'medium', 'high']),
    })
    // Only the owner (creator) can access their todos
    .authorization((allow) => [allow.owner()]),
});

// Export the schema type for TypeScript support
export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: 'userPool',
  },
});

Understanding the Data Schema

Step 4: Create the Backend Definition

Create amplify/backend.ts to tie everything together:

// amplify/backend.ts
import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { data } from './data/resource';

/**
 * Main backend definition
 * Combines all resources (auth, data, functions, etc.)
 */
defineBackend({
  auth,
  data,
});

Step 5: Configure Amplify in Nuxt

Create a plugin to configure Amplify on the client side. Create plugins/amplify.client.ts:

// plugins/amplify.client.ts
import { Amplify } from 'aws-amplify';
import outputs from '../amplify_outputs.json';

export default defineNuxtPlugin(() => {
  // Configure Amplify with the generated outputs
  Amplify.configure(outputs);
});

Step 6: Update TypeScript Configuration

Update nuxt.config.ts to handle the Amplify imports:

// nuxt.config.ts
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  
  modules: ['@nuxtjs/tailwindcss'],
  
  typescript: {
    strict: true,
  },
  
  // Handle Amplify imports
  vite: {
    resolve: {
      alias: {
        './runtimeConfig': './runtimeConfig.browser',
      },
    },
    define: {
      'window.global': {},
    },
  },
});

Step 7: Start the Sandbox

Now let's deploy your backend to a sandbox environment. This creates real AWS resources for development.

The first run will:

1. Bootstrap CDK in your AWS account (if not already done)
2. Build your backend definition
3. Deploy CloudFormation stacks for auth and data
4. Generate amplify_outputs.json with configuration

When complete, you'll see output like:

✔ Deployed
 amplify-amplifytonuxtapp-yourname-sandbox-abc123

amplify_outputs.json file successfully written to the project.

Watching for file changes...

Step 8: Verify the Generated File

Check that amplify_outputs.json was created. It should look something like:

{
  "version": "1.3",
  "auth": {
    "user_pool_id": "us-east-1_xxxxxxxx",
    "user_pool_client_id": "xxxxxxxxxxxxxxxxxxxxxxxxxx",
    "aws_region": "us-east-1"
  },
  "data": {
    "url": "https://xxxxxxxxx.appsync-api.us-east-1.amazonaws.com/graphql",
    "aws_region": "us-east-1",
    "default_authorization_type": "AMAZON_COGNITO_USER_POOLS"
  }
}

# .gitignore additions
amplify_outputs.json
.amplify/

Step 9: Test the Frontend

Keep the sandbox running in one terminal. In a new terminal, start Nuxt:

Open http://localhost:3000. The page should load without errors. Check the browser console (F12) to verify there are no Amplify-related errors.

Understanding What Happened

When you ran npx ampx sandbox, Amplify:

1. Read your amplify/backend.ts and resource definitions
2. Generated AWS CDK code based on your configuration
3. Created a CloudFormation stack in your AWS account
4. Provisioned:
   • A Cognito User Pool (for authentication)
   • A DynamoDB table (for Todo data)
   • An AppSync GraphQL API (for data operations)
   • IAM roles and policies (for security)
5. Generated amplify_outputs.json for your frontend

Cleaning Up (When Done for the Day)

When you're done developing, stop the sandbox with Ctrl+C. The resources stay running until you explicitly delete them:

This removes all sandbox resources. You can recreate them anytime with npx ampx sandbox.

Summary