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.
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
amplify init command at the top of the project root directory (
boyaki) of React.
A few questions are asked to you along the way. Note that the following choices and others are OK by default.
Vim (via Terminal, Mac OS only)(choose your favorite editor)
amplify-handson(choose the Profile created for Amplify in 1.3.)
Below is an example of the answer to all questions.
Vim (via Terminal, Mac OS only)
npm run-script build
npm run-script start
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 when answering questions with Yes/No.
In such questions, besides of
no, you can use
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.
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.
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.
If you prefer, you can view the Preview in a new tab.
Finally, open Terminal in a new tab. Leave the original terminal intact and leave the development server up. At this time, execute