Generate templates

The frontend requires some settings that are unique to the infrastructure that has been deployed during this workshop. The following commands retrieve these settings and save them to files that will be read by the React app on startup.

Execute the following steps from your Cloud9 terminal.

export POOLID=$(aws cognito-idp list-user-pools --max-results 60 | jq -r '.UserPools | .[] | select(.Name == "ambSupplyChainUsers") | .Id')
export CLIENTID=$(aws cognito-idp list-user-pool-clients --user-pool-id $POOLID | jq -r .UserPoolClients[0].ClientId)
export GRAPHQL_ENDPOINT=$(aws appsync list-graphql-apis | jq -r '.graphqlApis | .[] | select(.name == "SupplyChain API").uris.GRAPHQL')
cd ~/environment/frontend
mkdir public
cd public
cat <<EOT > index.html
<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <title>React App</title>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
cd ..
mkdir src
cd src
curl -o useAmplifyAuth.js
cat <<EOT > index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
    <App />
cat <<EOT > aws-exports.js
const awsconfig = {
  aws_project_region: "$AWS_DEFAULT_REGION",
  aws_cognito_region: "$AWS_DEFAULT_REGION",
  aws_user_pools_id: "$POOLID",
  aws_user_pools_web_client_id: "$CLIENTID",
  aws_appsync_graphqlEndpoint: "$GRAPHQL_ENDPOINT",
  aws_appsync_region: "$AWS_DEFAULT_REGION",
  aws_appsync_authenticationType: "AMAZON_COGNITO_USER_POOLS",
  aws_mandatory_sign_in: true
export default awsconfig;
cat <<EOT > workerNames.json
  "worker1": "$WORKER1_NAME",
  "worker2": "$WORKER2_NAME"
touch AllProducts.js
touch AllProductsWithData.js
touch App.js
touch CreateProduct.js
touch index.css
touch Product.js
touch states.js
touch UpdateProductState.js