Create the App

Create the React Application

We will now create the React Application. This will include the following components:

  • App.js – the single page application
  • components\menu.jsx – displays a tabbed menu for Andy’s Pizza and Sub Shop
  • components\header.jsx – displays a header with actionable events
  • components\orders.jsx – displays order history
  • components\sideCard.jsx – displays the current shopping cart and recommended items
  1. Run the following command to create the React application:

The command to revert to react-scripts version 3.2.0 is due to a security error that occurs when running in debug mode with Cloud9 on version 3.3.0. If you are not using Cloud9, you may be able to use 3.3.0 but it is not required for this workshop.

# Create the initial app
npx create-react-app andy-pizza-shop
# Revert to react-scripts version 3.2.0 due to security error with Cloud9 and 3.3.0
npm i react-scripts@3.2.0
  1. Run the following commands to install the required libraries for our project

    # Change to the root directory for the application
    cd andy-pizza-shop
    # Install Amplify
    npm i aws-amplify
    # Install Amplify React
    npm i aws-amplify-react
    # Install React-Bootstrap
    npm i bootstrap
    npm i react-bootstrap
    npm i reactstrap
    

You may receive warning messages during this step - no need to worry - that is expected.

Ensure the application is installed

To ensure the newly created application works in our environment, run the following:

# Run npm start
npm start

After this, verify that the development server started successfully with this message: Create Environment

  1. In the Cloud9 environment, choose Preview Running Application from the Preview menu: Create Environment

  2. This will load a browser window within Cloud9. Ensure the default application is working correctly: Create Environment

Going forward, you will probably want to launch the preview window in a separate browser window. Click the button in the top right to do this: Create Environment

Assuming that is working, we can move on to the next step.