Init Amplify Stack

init-amplify-stack.md

How to init Amplify Stack

1. Clone

• cd sites
• mkdir -p slk/slk-api
• cp -rf vts/vts-api slk/slk-api

2. Clean

• If you are on a mono-repo, cd to each of the package folder to run the following commands.
• rm -rf .env .vercel .now .next .idea .git .graphqlconfig.yml node_modules amplify src/graphql/dist src/graphql/node_modules
• rm src/aws-exports.js
• In files/code e.g. package.json, rename project name from vts-api to slk-api for example

3. Init Git

• git init
• gco -b develop

4. Init Amplify

• Initialize amplify: amplify init

➜  slk-api git:(develop) ✗ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project slk
? Enter a name for the environment slkprod
? Choose your default editor: IntelliJ IDEA
? 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: out
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation

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 default
Adding backend environment dev to AWS Amplify Console app: d288c8jhef0mep
⠦ Initializing project in the cloud...

• Add api via: amplify add api

➜  slk-api git:(develop) ✗ amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: slk
? Choose the default authorization type for the API API key
? Enter a description for the API key:
? After how many days from now the API key should expire (1-365): 365
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? Yes
? What best describes your project: Single object with fields (e.g., “Todo” with ID, name, description)
? Do you want to edit the schema now? No

• Add S3 bucket and Auth: amplify add storage

➜  slk-api git:(develop) ✗ amplify add storage
? Please select from one of the below mentioned services: Content (Images, audio, video, etc.)
? You need to add auth (Amazon Cognito) to your project in order to add storage for user files. Do you want to add au
th now? Yes
Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito.

 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in? Email
 Do you want to configure advanced settings? No, I am done.
Successfully added auth resource
? Please provide a friendly name for your resource that will be used to label this category in the project: slk
? Please provide bucket name: slk-api7c5d5e7be1d04bebb05d9ae024d7c795
? Who should have access: Auth and guest users
? What kind of access do you want for Authenticated users? (Press  to select,  to toggle all, i to invert
 selection)create/update, read, delete
? What kind of access do you want for Guest users? (Press  to select,  to toggle all, i to invert selecti
on)create/update, read, delete
 ? Do you want to add a Lambda Trigger for your S3 Bucket? No
Successfully updated auth resource locally.
Successfully added resource slk locally

• Add Amplify Analytics: amplify add analytics

➜  slk-api git:(develop) ✗ amplify add analytics
? Select an Analytics provider Amazon Pinpoint
? Provide your pinpoint resource name: slk
Adding analytics would add the Auth category to the project if not already added.
? Apps need authorization to send analytics events. Do you want to allow guests and unauthenticated users to send analytics events? (we recommend you allow this when getting started) Yes
Successfully updated auth resource locally.
Successfully added resource bwg locally

• Check status so far: amplify status

➜  slk-api git:(develop) ✗ amplify status

Current Environment: dev

| Category  | Resource name  | Operation | Provider plugin   |
| --------- | -------------- | --------- | ----------------- |
| Analytics | slk            | Create    | awscloudformation |
| Api       | slk            | Create    | awscloudformation |
| Auth      | slkapi7cdf9849 | Create    | awscloudformation |
| Storage   | slk            | Create    | awscloudformation |

• Push changes to cloud: yarn api:push

• Configure amplify settings: amplify configure codegen

➜  slk-api git:(develop) ✗ amplify codegen configure
? Choose the code generation language target typescript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.ts
? Enter the file name for the generated code src/graphql/API.ts
? Enter maximum statement depth [increase from default if your schema is deeply nested] 6

• Update codegen based on new settings: amplify codegen

5. Init Env Vars

At this point, src/aws-exports.js should be generated by Amplify, we want to add these as env vars

• In project root, run now to create the project in the Vercel dashboard. You may cut the build process when you see 'Building...'

➜  slk-api git:(develop) ✗ now
> Changelog: https://github.com/zeit/now/releases/tag/now@19.0.1
Now CLI 19.0.0
> NOTE: Deploying to Now 2.0, because this project does not yet exist. More: https://vercel.com/docs/version-detection
? Set up and deploy “~/Sites/slk/slk-api”? [Y/n] y
? Which scope do you want to deploy to? dev-1xt
? Link to existing project? [y/N] n
? What’s your project’s name? slk-api
? In which directory is your code located? ./
> Upload [================----] 78% 0.2sAuto-detected project settings (Next.js):
- Build Command: `npm run build` or `next build`
- Output Directory: Next.js default
- Development Command: next dev --port $PORT
? Want to override the settings? [y/N] n
🔗  Linked to dev-1xt/slk-api (created .vercel and added it to .gitignore)
🔍  Inspect: https://vercel.com/dev-1xt/slk-api/407ar5bfp [6s]
⠹ Building ^C

• Go to https://vercel.com/dashboard
• Go to this Project and click on Settings at the top
• In General > Environment Variables, click Develop tab
• Add all env vars from src/aws-exports.js into the develop tab
• In project root, do now env pull to generate .env file

6. Schema

Now, you should be able to run yarn dev to a broken build complaining about a bad graphql import. This is because your schema file is a dummy one with the Todo. So, now you have to:

• Update the amplify/backend/api/<API>/schema.graphql file to fit your application schema.
• yarn api:push to push your schema updates to the cloud
• Continue patching until yarn dev works smoothly with your application code and generated graphql files

7. AWS Configuration

At this point, you should be able to run the server locally while being connected to the newly spun up AWS services. However, there are still some common configurations you need to make on AWS end.

1. Disable new user confirmation on AWS Cognito

• Go to AWS Cognito > Your User Pool > Triggers > Pre Sign-up
• Select XXX-UserAutomaticVerification option and click Save below. Done.

2. Create initial user

• Go to AWS Cognito > Users and groups > Create User
• Fill in Username, Email and uncheck "Send an invitation to this new User?"
• Get the user.sub hash and go to AWS AppSync and createUser with id as the sub
• Create user with createUser mutation with the following inputs: id, email, type, partition, status