amplify-with-create-react-app

AWS Lambdas: Amplify CLI With Create React App

Project Init

npm i -g @aws-amplify/cli

📖 Official Amplify Docs: Install the Amplify CLI

npx create-react-app amplify-with-create-react-app && cd $_

1. Log Hello World

amplify init

amplify add function

⚠️ Template format error: Resource name is non alphanumeric.
All names must be lowercase or camelCase.

amplify mock function amplifyHelloWorld

📖 Official Amplify Docs: Initialize new project

2. Deploy Hello World

amplify add api

amplify push

⚠️ { "message:" : "Missing Authentication Token"}
Don't forget to add your route segment to url!

📖 Official Amplify Docs: Create a REST API

3. Pass URL Params

exports.handler = async (event) => {
      const response = {
          statusCode: 200,
          body: JSON.stringify(`Hello from Lambda! Params or event: ${JSON.stringify(event.queryStringParameters || event)}`),
      }
      return response 
  }

amplify mock function amplifyHelloWorld --event src/event.json

⚠️ Params are undefined
Use the event object from your local event.json to mock event.queryStringParameters. Alternately, set manually like so.

amplify push

📖 Official Amplify Docs: Accessing query parameters & body in Lambda proxy function

4. Install NPM Packages

cd amplify/backend/function/amplifyHelloWorld/src

npm i @astrajs/collections

5. Set Env Values

exports.handler = async (event) => {
      const response = {
          statusCode: 200,
          body: JSON.stringify(`Hello from Lambda! process.env.ASTRA_DB_REGION: ${process.env.ASTRA_DB_REGION}. Params or event: ${JSON.stringify(event.queryStringParameters || event)}`),
      }
      return response 
  }

📖 Official Amplify Docs: Function mock environment variables
You can also override any mock environment variables in a .env file within the function directory (ie. <project root>/amplify/backend/function/<function name>/.env).

ASTRA_DB_ID=18d8558b-e01c-4b5e-bb1b-f6ef05a81218
ASTRA_DB_REGION=us-east-1
ASTRA_DB_APPLICATION_TOKEN=AstraCS:NsivximNmFmseTaPjXaaxkWo:c13bcf62ab3a158b73ab1e1ad5ce69d8bde6d437e6f361abd5beea3974cfd9b6

amplify push

📖 Official Amplify Docs: Configuring environment variables

6. Test Token

const { createClient } = require("@astrajs/collections");

  exports.handler = async (event) => {

      // create an Astra client
      const astraClient = await createClient({
          astraDatabaseId: process.env.ASTRA_DB_ID,
          astraDatabaseRegion: process.env.ASTRA_DB_REGION,
          applicationToken: process.env.ASTRA_DB_APPLICATION_TOKEN,
      });

      const response = {
          statusCode: 200,
          body: JSON.stringify(`Hello from Lambda! process.env.ASTRA_DB_REGION: ${process.env.ASTRA_DB_REGION}. Params or event: ${JSON.stringify(event.queryStringParameters || event)}, astraClient: ${JSON.stringify(astraClient)}`),
      }
      return response 
  }

amplify mock function amplifyHelloWorld --event src/event.json

7. Deploy Authenticated

amplify push