Bootstrap

Creating a Working Directory

Move to the directory you want to use and execute the following command to create a directory for this workshop.

mkdir amplify-sns-shop
cd amplify-sns-shop

We try to make it easier for you to understand what kind of workshop you created when you look back later.

Bootstrap a React app

Using create-react-app command of React, you create a model of the React web application.

For more information about the create-react-app command, please refer to the following URL: https://github.com/facebook/create-react-app.

npx create-react-app boyaki
cd boyaki

Initializing Amplify

Execute the amplify init command at the top of the project root directory (boyaki) of React.

amplify init

A few questions are asked to you along the way. Note that the following choices and others are OK by default.

  • environment name: production
  • Choose your default editor: Vim (via Terminal, Mac OS only)(choose your favorite editor)
  • Please choose the profile you want to use amplify-handson (choose the Profile created for Amplify in 1.3.)

Below is an example of the answer to all questions.

  • Enter a name for the project boyaki
  • Enter a name for the environment production
  • Choose your default editor: Vim (via Terminal, Mac OS only)
  • Choose the type of app that you’re building javascript
  • What javascript framework are you using react
  • Source Directory Path: src
  • Distribution Directory Path: build
  • Build Command: npm run-script build
  • Start Command: npm run-script start
  • Do you want to use an AWS profile? Yes
  • Please choose the profile you want to use amplify-handson

If you have not successfully completed amplify configure at the Prerequisites section, you may be asked ? Setup new user. In such case, please set up a new user. If you answer Y, the AWS Management Console opens in your browser. Log in to the Management Console and follow the instructions below.

Amplify CLI displays Y/n and y/N when answering questions with Yes/No. In such questions, besides of yes or no, you can use y or n for answers. In addition, if Y/n, Yes, and y/N, No is the default answer. If you are satisfied with the default answer, you can press Enter as it is.

After completing the selection of Profile, the backend initialization starts. AWS CloudFormation automatically creates the underlying AWS resources (such as IAM Roles, Amazon S3 buckets) needed for your application’s backend.

Testing the Environment

Let’s start the development server and check it in a browser so that you can see the changes in your code in real time.

npm start

When the development server launches, http://localhost:3000 automatically opens in the browser. If it does not open automatically, please do it manually.

Once you have confirmed it, you leave the tab for the terminal running $ npm start as it is. Then open a new tab and proceed the task.

The following steps are for those who are using AWS Cloud9. If you are not using AWS Cloud9, please proceed to the next step. As a reminder, in this workshop, we recommend you to carry out in your local environment.

Click Preview in the menu in AWS Cloud9 and choose Preview Running Application.

preview running application

If you prefer, you can view the Preview in a new tab.

pop app to new window

Finally, open Terminal in a new tab. Leave the original terminal intact and leave the development server up. At this time, execute cd boyaki.

new terminal