We will now create the React Application. This will include the following components:
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 firstname.lastname@example.org
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.
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:
In the Cloud9 environment, choose Preview Running Application from the Preview menu:
This will load a browser window within Cloud9. Ensure the default application is working correctly:
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:
Assuming that is working, we can move on to the next step.