+++
title = "Bootstrap"
date = 2020-03-18T10:09:45+09:00
weight = 1
pre = "<b>3.1. </b>"
+++

### 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
```

{{% notice info%}}
We try to make it easier for you to understand what kind of workshop you created when you look back later.
{{% /notice%}}


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

{{% notice tip%}}
For more information about the create-react-app command, please refer to the following URL: [https://github.com/facebook/create-react-app] ( https://github.com/facebook/create-react-app).
{{% /notice%}}


```bash
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.


```bash
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`

{{% notice info%}}
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.
{{% /notice%}}

{{% notice tip%}}
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.
{{% /notice%}}

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.

```bash
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.

![](/images/30_mock/npm_start.png)


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. 


{{% notice info%}}
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.
{{% /notice%}}


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


![preview running application](/images/10_getting_started/preview_running_application.png)


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


![pop app to new window](/images/10_getting_started/pop_browser_new_window.png)


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](/images/10_getting_started/c9_new_terminal.png)