Jump over a hurdle of working with Amplify backend environment
Tags: aws, amplify, kendrabutton, amazonkendra
Published: 2020-09-20 11:15:37

# Introducing

I'm a member of [`AWSKRUG`](https://awskrug.github.io/) which is AWS community in Korea,

and I am working on a Open Source project named [`kendra-button`](https://github.com/awskrug/kendra-button).
This project is the serivice using ML service [`Amazon Kendra`](https://aws.amazon.com/kendra/).

![kendra-button flowchart](https://github.com/awskrug/kendra-button/raw/master/images/image.png)

![kendra-button_architecture](https://dev-to-uploads.s3.amazonaws.com/i/zwa5m4y3lk36g8f8teg3.png)

I'm in charge of all of the frontend and Auth, Hosting of backend.

This post is my experience working on separating the backend environment into `dev` and `prod`.

and any opinions or advice are welcome. cause the `"AWS Community Builders"` is the organization for developing better experience and better features using AWS 😆👍


## Amplify Team Environment

[`Amplify`](https://docs.amplify.aws/) is a tool and service that I am passionately using because it supports a number of functions that deploy in a fully managed AWS infrastructure such as web hosting, membership authentication, and functions, etc.

Among this numerous features,
Amplify backend environment looked great for team project to switch the stage like `dev`/`prod`.

The reason I decieded to use this feature is to simplify the tool to use.
I'm already using Amplify Hosting / Auth for Cognito / and Function for Cognito Lambda trigger,
so It would be nice to group together and easy to manage.

Amplify Document said, `"Every Amplify backend environment is a container for the categories added to your project. To deploy updates to an environment, run amplify push."`
and `"Amplify matches the standard Git workflow"`
![overview_of_environment](https://dev-to-uploads.s3.amazonaws.com/i/25v7337q1jz5dg7p0lh5.jpg)

## Reality of Amplify Team Environment

Let me start to share my frustrating experience working with `Amplify Environment`.
I was using only one environment called `dev`. so this is the experience of the process about adding a new environment called `prod`.

To tell the conclusion first,
- the way hit the env checkout command (e.g., from `dev` to `prod`)
  ```
  amplify env checkout prod (x) -> amplify env checkout prod --restore
  ```
- be careful to use `amplify pull` command with `appId` and `envName` flag when you already configured amplify environment in your project. `amplify` folder would be disappears at once
  ```
  amplify pull --appId {appId} --envName {name of env}
  ```
- don't checkout the amplify environment in same git branch. It's not good at your mental health.
  - because `team-provider-info.json` doesn't follow the context exactly with making several `amplify env checkout` actions.
  - and actually not only `team-provider-info.json` do, but others do by unknown reason.
  - so please split into different "git branch" per "amplify env"

------------------------------------

## Override wrong info to "Auth" when checkout another env

This is what I discovered incidentally so let me share.

the status of `prod` environment.
```
| Category | Resource name                        |
| -------- | ------------------------------------ |
| Hosting  | amplifyhosting                       |
| Function | kendrabuttonhosting84e32663PreSignup |
| Auth     | kendrabuttonhosting84e32663          |
```

the status of `dev`s.
```
| Category | Resource name                        |
| -------- | ------------------------------------ |
| Hosting  | amplifyhosting                       |
| Function | kendrabuttonhosting28eb127dPreSignup |
| Auth     | kendrabuttonhosting28eb127d          |
```


In a state that is already set as the `prod` environment, I tried to checkout the env `dev`.

but I had to re input the social provider's info which is I'd already configured.
```
$ amplify env checkout dev

✔ Initialized provider successfully.
  
 You've opted to allow users to authenticate via Facebook.  If you haven't already, you'll need to go to https://developers.facebook.com and create an App ID. 
 
 Enter your Facebook App ID for your OAuth flow:  {AMPLIFY_FACEBOOK_CLIENT_ID}
 Enter your Facebook App Secret for your OAuth flow:  {AMPLIFY_FACEBOOK_CLIENT_SECRET}
  
 You've opted to allow users to authenticate via Google.  If you haven't already, you'll need to go to https://developers.google.com/identity and create an App ID. 
 
 Enter your Google Web Client ID for your OAuth flow:  {AMPLIFY_GOOGLE_CLIENT_ID}
 Enter your Google Web Client Secret for your OAuth flow:  {AMPLIFY_GOOGLE_CLIENT_SECRET}
Initialized your environment successfully.
```

**team-provider-info.json**

I saw the content difference of `team-provider-info.json`.

keys of [`dev.categories.auth`, `dev.categories.function`] are overwritten by `prod` environment's keys.


> kendrabuttonhosting28eb127d_userpool_28eb127d(`dev`) -> kendrabuttonhosting84e32663_userpool_84e32663(`prod`)


![comparison code of team-provider-info.json](https://dev-to-uploads.s3.amazonaws.com/i/bn452htyjr1ddkepp88x.png)


seeing this happens, I thought I wanna go back to `prod`.

```
$ amplify env checkout prod

✔ Initialized provider successfully.
Initialized your environment successfully.
 

$ amplify status

Current Environment: prod

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | Create    |                   |
| Function | kendrabuttonhosting84e32663PreSignup | Update    | awscloudformation |
| Auth     | kendrabuttonhosting84e32663          | No Change | awscloudformation |

Hosted UI Endpoint: https://social-kendra-prod.auth.us-west-2.amazoncognito.com/
Test Your Hosted UI Endpoint: https://social-kendra-prod.auth.us-west-2.amazoncognito.com/login?response_type=code&client_id=26t8thf04jdel3p73gh4vp99hk&redirect_uri=https://admin.kendra.fun/

Amplify hosting urls: 
┌──────────────┬───────────────────────────────────────────────────┐
│ FrontEnd Env │ Domain                                            │
├──────────────┼───────────────────────────────────────────────────┤
│ frontend-dev │ https://frontend-dev.dcj1fh5deo5r3.amplifyapp.com │
│              ├───────────────────────────────────────────────────┤
│              │ https://dev.kendra.fun                            │
├──────────────┼───────────────────────────────────────────────────┤
│ master       │ https://master.dcj1fh5deo5r3.amplifyapp.com       │
│              ├───────────────────────────────────────────────────┤
│              │ https://admin.kendra.fun                          │
├──────────────┼───────────────────────────────────────────────────┤
│ service      │ https://service.dcj1fh5deo5r3.amplifyapp.com      │
│              ├───────────────────────────────────────────────────┤
│              │ https://service.kendra.fun                        │
└──────────────┴───────────────────────────────────────────────────┘
```

> I will skip `Hosted UI Endpoint` and `Amplify hosting urls: ` section from now. because it is exact same contents when I hit `amplify status` command.

Umm, something wrong happens.
Let me make `Function` and `Hosting`'s Operations to `No Change`.

-----------------------------------

### Making "Function" Operation to "No Change"

```
amplify env checkout prod --restore
```

```
$ amplify env checkout prod --restore

✔ Initialized provider successfully.
Initialized your environment successfully.

$ amplify status

Current Environment: prod

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | Create    |                   |
| Auth     | kendrabuttonhosting84e32663          | No Change | awscloudformation |
| Function | kendrabuttonhosting84e32663PreSignup | No Change | awscloudformation |
```

and there is one file changes in git.
this is Amplify `Function` cloudformation template json file.

![after_amplify_env_checkout_prod_restore](https://dev-to-uploads.s3.amazonaws.com/i/hxi4b7u65mwdub3aovta.png)

see what is changed..
just tab to space. contents are not changed at all.

![after_amplify_env_prod_tab_to_space_function_compare](https://dev-to-uploads.s3.amazonaws.com/i/4i843eg0u9rd17vqrk96.png)

so I discard changes this file via git
![discard_git_just_tab_space](https://dev-to-uploads.s3.amazonaws.com/i/jwzpzfp4r04885w5kmd2.png)

and checking `amplify status`, there is `Function` Operation status changed to `Update`. hmm...

```
$ amplify status

Current Environment: prod

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | Create    |                   |
| Function | kendrabuttonhosting84e32663PreSignup | Update    | awscloudformation |
| Auth     | kendrabuttonhosting84e32663          | No Change | awscloudformation |
```

so I recovered the file, `Function`'s Operation status is back to `No Change`.

-----------------------------------

### Making "Hosting" Operation to "No Change": the whole "amplify" folder disappears?

I want to make the `Hosting`'s Operation to `No Change`. because I haven't changed hosting.

so I tried to pull the backend environment again. because I have no clue how to recover the `Hosting`'s Operation status!

following command below is reference to Amplify Console for web.

> Even though it checks out `master` environment, which is different from what we're working, key point is answering "No" at "Do you plan on modifying this backend?"

```
$ amplify pull --appId dcj1fh5deo5r3 --envName master

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use kendra-geoseong
Amplify AppID found: dcj1fh5deo5r3. Amplify App name is: kendrabuttonhosting
Backend environment master found in Amplify Console app: kendrabuttonhosting
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  frontend/kendra-button-front/src
? Distribution Directory Path: frontend/kendra-button-front/src/out
? Build Command:  npm run-script build
? Start Command: npm run-script start

? Do you plan on modifying this backend? No  # <--- look at this carefully

Added backend environment config object to your project.
Run 'amplify pull' to sync upstream changes.
```

after this process done, `amplify` folder disappears.

![after_amplify_pull_envName](https://dev-to-uploads.s3.amazonaws.com/i/xebxkarotg6kp9blxjpc.png)

```
$ amplify status

You are not working inside a valid amplify project.
Use 'amplify init' in the root of your app directory to initialize your project with Amplify
Error: You are not working inside a valid amplify project.
Use 'amplify init' in the root of your app directory to initialize your project with Amplify
    at getAmplifyDirPath (/Users/geoseong/.npm-packages/lib/node_modules/@aws-amplify/cli/lib/extensions/amplify-helpers/path-manager.js:45:11)
    at getBackendDirPath (/Users/geoseong/.npm-packages/lib/node_modules/@aws-amplify/cli/lib/extensions/amplify-helpers/path-manager.js:51:37)
    at Object.getAmplifyMetaFilePath (/Users/geoseong/.npm-packages/lib/node_modules/@aws-amplify/cli/lib/extensions/amplify-helpers/path-manager.js:93:37)
    at getCloudInitStatus (/Users/geoseong/.npm-packages/lib/node_modules/@aws-amplify/cli/lib/extensions/amplify-helpers/get-cloud-init-status.js:8:41)
    at AmplifyToolkit.showResourceTable [as _showResourceTable] (/Users/geoseong/.npm-packages/lib/node_modules/@aws-amplify/cli/lib/extensions/amplify-helpers/resource-status.js:194:38)
    at Object.run (/Users/geoseong/.npm-packages/lib/node_modules/@aws-amplify/cli/lib/commands/status.js:6:31)
    at Object.executeAmplifyCommand (/Users/geoseong/.npm-packages/lib/node_modules/@aws-amplify/cli/lib/index.js:110:25)
    at executePluginModuleCommand (/Users/geoseong/.npm-packages/lib/node_modules/@aws-amplify/cli/lib/execution-manager.js:131:32)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:757:11)
FAIL: 1
```

🤪
this is really frustrating.


I tried to hit pull command again, and I chose `Yes` in the last question: `Do you plan on modifying this backend?`

...

so amplify folder recovered. only `prod` environment.

```
$ amplify pull --appId dcj1fh5deo5r3 --envName prod

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use kendra-geoseong
Amplify AppID found: dcj1fh5deo5r3. Amplify App name is: kendrabuttonhosting
Backend environment prod found in Amplify Console app: kendrabuttonhosting
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? 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 plan on modifying this backend? Yes  # <-- look at this carefully. choose "Yes"

Successfully pulled backend environment prod from the cloud.
Run 'amplify pull' to sync upstream changes.

$ amplify status

Current Environment: prod

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | Create    |                   |
| Auth     | kendrabuttonhosting84e32663          | No Change | awscloudformation |
| Function | kendrabuttonhosting84e32663PreSignup | No Change | awscloudformation |
```

`Hosting` Still return `Create` Operation status,
so I followed the instruction of `amplify pull --appId dcj1fh5deo5r3 --envName prod` which is I hit just before.

```
Run 'amplify pull' to sync upstream changes.
```

```
$ amplify pull

Pre-pull status:

Current Environment: prod

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | Create    |                   |
| Auth     | kendrabuttonhosting84e32663          | No Change | awscloudformation |
| Function | kendrabuttonhosting84e32663PreSignup | No Change | awscloudformation |

Local changes detected.
Pulling changes from the cloud will override your local changes.
? Are you sure you would like to continue? Yes
✔ Successfully pulled backend environment prod from the cloud.


Post-pull status:

Current Environment: prod

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | No Change |                   |
| Auth     | kendrabuttonhosting84e32663          | No Change | awscloudformation |
| Function | kendrabuttonhosting84e32663PreSignup | No Change | awscloudformation |
```

Oh, finally I made `Hosting`'s Operation status to `No Change`.

(actually I don't understand why I have to hit `amplify pull` command twice.)

Anyways even though the status of amplify displays `No Change` Operation in every Category, the content `team-provider-info.json` in my local doesn't have `Function` and `Auth`.

Somebody help?
😳

![after_amplify_pull_envName_and_amplify_pull](https://dev-to-uploads.s3.amazonaws.com/i/y9sv8prjshc7457utfur.png)

I wanted to know how this happen, but I cannot find in any Amplify Documents.


## The reason why split into different "git branch" per "amplify env"

I thought I ended up the issue that the whole `amplify` folder disappears and recover the environment.

but when I tried to checkout another env to `dev`, this error returns. `dev` environment doesn't exist on my local.

```
$ amplify env checkout dev --restore
Please pass in a valid environment name. Run amplify env list to get a list of valid environments
 
$ amplify env list

| Environments |
| ------------ |
| *prod        |
```

In this stuation, Trying to hit the command from Amplify Web Console.
![dev_command_in_webconsole](https://dev-to-uploads.s3.amazonaws.com/i/4dluvi71w2ak701r3da7.png)

```
amplify pull --appId dcj1fh5deo5r3 --envName dev
```

Don't forget to answer `Yes` when `"Do you plan on modifying this backend?"` comes.

```
$ amplify pull --appId dcj1fh5deo5r3 --envName dev

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use kendra-geoseong
Amplify AppID found: dcj1fh5deo5r3. Amplify App name is: kendrabuttonhosting
Backend environment dev found in Amplify Console app: kendrabuttonhosting
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? 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 plan on modifying this backend? Yes  # <-- don't forget to choose "Yes"

Successfully pulled backend environment dev from the cloud.
Run 'amplify pull' to sync upstream changes.


$ amplify pull

Pre-pull status:

Current Environment: dev

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | No Change |                   |
| Auth     | kendrabuttonhosting28eb127d          | No Change | awscloudformation |
| Function | kendrabuttonhosting28eb127dPreSignup | No Change | awscloudformation |

✔ Successfully pulled backend environment dev from the cloud.


Post-pull status:

Current Environment: dev

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | No Change |                   |
| Auth     | kendrabuttonhosting28eb127d          | No Change | awscloudformation |
| Function | kendrabuttonhosting28eb127dPreSignup | No Change | awscloudformation |


$ amplify env list

| Environments |
| ------------ |
| *dev         |
| prod         |

```

## One more experimental try

In a state that is in `dev` environment, I tried to checkout `prod` env again. and hit the command without `--restore` flag. (In the same git branch!)

```
$ amplify env checkout prod

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use kendra-geoseong
✔ Initialized provider successfully.
  
 You've opted to allow users to authenticate via Facebook.  If you haven't already, you'll need to go to https://developers.facebook.com and create an App ID. 
 
 Enter your Facebook App ID for your OAuth flow:  {AMPLIFY_FACEBOOK_CLIENT_ID}
 Enter your Facebook App Secret for your OAuth flow:  {AMPLIFY_FACEBOOK_CLIENT_SECRET}
  
 You've opted to allow users to authenticate via Google.  If you haven't already, you'll need to go to https://developers.google.com/identity and create an App ID. 
 
 Enter your Google Web Client ID for your OAuth flow:  {AMPLIFY_GOOGLE_CLIENT_ID}
 Enter your Google Web Client Secret for your OAuth flow:  {AMPLIFY_GOOGLE_CLIENT_SECRET}
? Do you want to configure Lambda Triggers for Cognito? (Y/n) 

# I cancelled it!! (Ctrl + C in OSX)
```

wow. amplify recognize like Auth is never exists before. 😭
I just cancelled configuring Lambda Trigger step.

and I check the status again
```
$ amplify status

Current Environment: prod

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | Create    |                   |
| Auth     | kendrabuttonhosting28eb127d          | Create    | awscloudformation |
| Function | kendrabuttonhosting28eb127dPreSignup | Create    | awscloudformation |
| Auth     | kendrabuttonhosting84e32663          | Delete    | awscloudformation |
| Function | kendrabuttonhosting84e32663PreSignup | Delete    | awscloudformation |
```

`kendrabuttonhosting28eb127d` is the resources of `dev`, `kendrabuttonhosting84e32663` is resources of `prod`.
If I push with this status, The epic disaster would happen...

omg, I'm gonna hit `amplify pull` with panic 😰

```
$ amplify pull

Pre-pull status:

Current Environment: prod

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | Create    |                   |
| Auth     | kendrabuttonhosting28eb127d          | Create    | awscloudformation |
| Function | kendrabuttonhosting28eb127dPreSignup | Create    | awscloudformation |
| Auth     | kendrabuttonhosting84e32663          | Delete    | awscloudformation |
| Function | kendrabuttonhosting84e32663PreSignup | Delete    | awscloudformation |

Local changes detected.
Pulling changes from the cloud will override your local changes.
? Are you sure you would like to continue? Yes
✔ Successfully pulled backend environment prod from the cloud.


Post-pull status:

Current Environment: prod

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | No Change |                   |
| Auth     | kendrabuttonhosting84e32663          | No Change | awscloudformation |
| Function | kendrabuttonhosting84e32663PreSignup | No Change | awscloudformation |
```

😀 The nightmare ended.
I think checking out to another "ampilfy env" cause unexpected errors in same branch.

so after this painful process passed,
I think It would be better to get an independent "amplify env" from each "git branch".

## Split branch and configure amplify environment

so far I worked in `master` branch in git,
I checkout new git branch called `frontend-dev`.

and I checkout a `dev` amplify environment. (with `--restore` flag!)

```
$ git checkout -b frontend-dev
Switched to a new branch 'frontend-dev'


$ amplify env checkout dev --restore

✔ Initialized provider successfully.
Initialized your environment successfully.
 
$ amplify status

Current Environment: dev

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | No Change |                   |
| Auth     | kendrabuttonhosting28eb127d          | No Change | awscloudformation |
| Function | kendrabuttonhosting28eb127dPreSignup | No Change | awscloudformation |
```

so I can check the amplify file changed properly from `prod` to `dev`.
![env_checkout_new_git_branch](https://dev-to-uploads.s3.amazonaws.com/i/shciq42rh37shbv9ibnl.png)

## Conclusion

> It would be better to get an independent "amplify env" from each "git branch"

> Take a look the `team-provider-info.json` carefully

> be sure to do git commit management when you're changing amplify environment

The Experienced AWS User like me can handle this problem,
Newbie of AWS would feel painful using Amplify to be honest.

And I think Amplify Document still lack of contents especially CLI and Hosting.
also late feedback from amplify github repository. issue or PRs.

I hope these confusion will be end soon.

I still love AWS Amplify and I wanna keep support and contribute Amplify so Every AWS Amplify user including me have such a great experience using AWS easily!