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">
  <head>
    <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>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
EOT
cd ..
mkdir src
cd src
curl https://gist.githubusercontent.com/cayblood/50f2d32481810e79de57980492f09b3d/raw/useAmplifyAuth.js -o useAmplifyAuth.js
cat <<EOT > index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
EOT
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;
EOT
cat <<EOT > workerNames.json
{
  "worker1": "$WORKER1_NAME",
  "worker2": "$WORKER2_NAME"
}
EOT
touch AllProducts.js
touch AllProductsWithData.js
touch App.js
touch CreateProduct.js
touch index.css
touch Product.js
touch states.js
touch UpdateProductState.js