AppSync and React App

Overview

Screenshot

Appsync is used in this workshop as the front end API and resolvers are used to connect to the front end DynamoDB table. For the UI, a cloud9 environment is set up and all the required code is copied via CodeCommit.

CloudFormation (Required)

Step1: CloudFormation Quick Start

Click on the Launch Stack button in your desired region below. US West (Oregon) is the recommended region for this workshop if at re:Invent.

Important

Ensure that you are consistent with the selected region throughout this workshop. Deployments in multiple regions will lead to multiple AWS services not communicating together.

Region Deploy
US West (Oregon) Deploy in us-west-2
US East (Ohio) - Coming Soon Deploy in us-east-2
US East (N. Virginia) - Coming Soon Deploy in us-east-1
EU (Ireland) - Coming Soon Deploy in eu-west-1

In a new tab you should be redirected to CloudFormations Quick create stack page as shown below.

Screenshot

For Stack name, the default reg-app-appsync-ui can be used or customized.

Screenshot

The default for the Parameters section will work as is.

  • Frontend Table Name - Must match the original DynamoDB tables created in previous section.
  • Backend Table Name - Must match the original DynamoDB tables created in previous section.
  • AppSync API Name - Name of the AppSync API.
  • AppSync Api Expire Epoch Date - is the date in Epoch seconds when the API key will expire. 1577793600 is for December 31st 2019 at midnight. If desired, a custom time can be entered at this link epochconverter.com and can be helpful.
  • Repository Name - is the CodeCommit repository for the React Application. This name should not be changed unless a custom repo has been added. The default is reg-app-frontend-code.

Screenshot

On the next window, scroll to the bottom and under Capabilities check I acknowledge that AWS CloudFormation might create IAM resources. and click Create stack.

Screenshot

AppSync (Required)

The AppSync credentials are needed for the React Application.

Step2: AppSync API Key

In the services tab, enter AppSync.

Screenshot

You will see an AppSync API that was created from the CloudFormation template. The name will be the same as the CloudFormation stack template name. The default is reg-app-appsync.

Screenshot

On the left of the console under AWS AppSync, click on Settings.

Screenshot

Under settings, there are two values that need to be copied to your notepad. The API URL and API KEY. These values will be needed in a future step.

Screenshot

Cloud9 (Required)

Step3: Startup Cloud9

Once the CloudFormation template completes, go to the Outputs tab.

Click on the value for Cloud9URL.

Screenshot

You will be redirected to the created Cloud9 instance as shown below. You might notice a script running that is coping the repository from CodeCommit.

Screenshot

Step4: Set up React App

The code for the React application will be preinstalled on the Cloud9 instance.

In the terminal at the bottom of the screen, execute the following command to code zip archive.

cd codecommit/reg-app-frontend-code/

Run the following command to unzip the archive.

unzip my-reg-app.zip

Now change directories into the unzip archive.

cd my-registration-app

The next step is to install dependencies with the following command. The install will take approximately 30 to 60 seconds.

npm install

Now preview the application

npm start

The development server should be started and you can now preview the application. At the top center of the screen click on the Preview button and then click on Preview Running Application.

Screenshot

In the preview screen, you should see the following error. Let's fix that.

Screenshot

Open the aws-exports.js which will be under the src file as shown below.

Screenshot

From the AppSync values captured during a previous step, enter the AppSync API URL as the aws_appsync_graphqlEndpoint and AppSync API KEY as the aws_appsync_apiKey.

Screenshot

Save the file and you should see the running application in the preview window. If you do not see the application running. Try refreshing the page.

You will also see who has registered for your event.

Success

You have now completed setting up the AppSync API and React App for the frontend UI!

S3 Static Website (Optional)

Step5: Save to S3

First, the react app needs to be built for deployment. Run the below command:

npm run-script build

Once the build is complete, an S3 bucket needs to be created. Type in the following command.

  • unique_bucket_name - Create a unique bucket name and copy the name into your notepad future steps.

  • region - Add the region where cloud9 is currently deployed.

aws s3api create-bucket --bucket <unique_bucket_name> --create-bucket-configuration LocationConstraint=<region>

Now execute the following command to create a temporary website config file.

echo '{
  "IndexDocument": {
    "Suffix": "index.html"
  },
  "ErrorDocument": {
    "Key": "index.html"
  }
}' > /tmp/website.json

Run the following command to add website configuration settings to the S3 bucket. Use the same unique_bucket_name as prior.

aws s3api put-bucket-website --bucket <unique_bucket_name> --website-configuration file:///tmp/website.json

Ensure that you are in the correct directory and then run the below script. Enter in the unique_bucket_name from your notepad. --acl public-read is added for convenience in this workshop. How would this be done without public read?

aws s3 sync ./build/ s3://<unique_bucket_name> --acl public-read

Success

You are now completed with setting up the static S3 website!