In this lab I will deploy a React app using Amplify CLI. The application will be integrated with REST API and Lambda function and in the next lab with a  database. This lab is thought as a part of a bigger project.

Services Covered

  • lambda Lambda
  • React React
  • Amplify Amplify

Lab description

In this lab I will deploy a React app using Amplify CLI. The application will be integrated with REST API and Lambda function and in the next lab with a database. This lab is thought as a part of a bigger project.


Learning Objectives

  • Create a React app using npx
  • Initialize and deploy Amplify environment using Amplify CLI
  • Create and mock lambda function

Lab date

12-11-2021


Prerequisites

  • AWS account
  • Amplify CLI
  • npm installed

Lab steps

  1. Start with creating a sample hello world React app with npx. I’ll call this one amplify-demo-app, when done cd into the project folder
    npx create-react-app amplify-demo-app
    cd amplify-demo-app
  2. To verify that everythings is correct run:
    npm start

    This should run the local server and open the app in your browser
    lab49_localreact

  3. To start the creation of an Amplify set-up run following command in your root directory:
    amplify init

    Then accept the configuration. This will start rolling out resources by using CloudFormation. If you navigate to AWS Console and then to CloudFromation you’ll see that a new stack was created and two IAM Roles and a S3 bucket were created
    lab49_cfstack
    You could even notice that there’s an app created in the Amplify section of AWS Management Console.

  4. Time to add an API for the application. Run:
    amplify add api

    Choose the REST type of API. Leave the deafult name, provide /customers/{customerId} as path, choose Create a new Lambda function, call it CustomerHandler, select NodeJS, select Hello World, then no to advanced settings. Then if your using VSC it should oppen the index.js for you. Edit the code:

    exports.handler = async (event) => {
       console.log(event)
       const customerId = event.pathParameters.customerId;
       const customer = {'customerId': customerId, 'customerName': "Customer " + customerId };
       const response = {
           statusCode: 200,
       //  Uncomment below to enable CORS requests
           headers: {
               "Access-Control-Allow-Origin": "*",
               "Access-Control-Allow-Headers": "*"
           }, 
           body: JSON.stringify(customer),
       };
       return response;
    };

    Back in the command line set-up, answer no to restrict API access, and no to add another path.

  5. Apply the configuration to the stack by running:
    amplify push

    When the confirmation is prompted answer yes
    lab49_amplifypush
    This will deploy the Lambda funciton, API Gateway REST API and bind them together. The deploment process wil return the Root URL of the API Gateway.

  6. Try the calling the endpoint API with the right path /customers/{yourdata}lab49_apiurl

    So, now the API invokes the Lambda function and returns the result back to your browser.

  7. In order to test the funciton locally you can pass the event.json as the event and mock the function execution by running following command:
    amplify mock function CustomerHandler --event <<relative-path-to-event.json>>

Lab files


Acknowledgements

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *