Skip to content

Instantly share code, notes, and snippets.

@mike-neck
Created August 17, 2020 22:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mike-neck/4bbe642a629273976b69149277988813 to your computer and use it in GitHub Desktop.
Save mike-neck/4bbe642a629273976b69149277988813 to your computer and use it in GitHub Desktop.
web-application-projects $ which amplify
/Users/mike/.anyenv/envs/nodenv/shims/amplify
web-application-projects $ mkdir amplify-tutorial
web-application-projects $ cd amplify-tutorial
amplify-tutorial $ npx create-react-app . --template typescript
npx: 98個のパッケージを5.421秒でインストールしました。
Creating a new React app in /Users/mike/tmp/web-application-projects/amplify-tutorial.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...
yarn add v1.22.4
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 23 new dependencies.
info Direct dependencies
├─ cra-template-typescript@1.0.3
├─ react-dom@16.13.1
├─ react-scripts@3.4.3
└─ react@16.13.1
info All dependencies
├─ @babel/helper-member-expression-to-functions@7.11.0
├─ @babel/plugin-syntax-typescript@7.10.4
├─ @babel/plugin-transform-flow-strip-types@7.9.0
├─ @babel/plugin-transform-runtime@7.9.0
├─ @babel/plugin-transform-typescript@7.11.0
├─ @babel/preset-typescript@7.9.0
├─ babel-preset-react-app@9.1.2
├─ cra-template-typescript@1.0.3
├─ eslint-config-react-app@5.2.1
├─ html-entities@1.3.1
├─ loglevel@1.6.8
├─ portfinder@1.0.28
├─ react-dev-utils@10.2.1
├─ react-dom@16.13.1
├─ react-error-overlay@6.0.7
├─ react-scripts@3.4.3
├─ react@16.13.1
├─ scheduler@0.19.1
├─ serialize-javascript@4.0.0
├─ sockjs@0.3.20
├─ spdy@4.0.2
├─ terser-webpack-plugin@2.3.8
└─ webpack-dev-server@3.11.0
✨ Done in 16.37s.
Initialized a git repository.
Installing template dependencies using yarnpkg...
yarn add v1.22.4
[1/4] 🔍 Resolving packages...
warning @testing-library/react > @types/testing-library__react > @types/testing-library__dom@7.5.0: This is a stub types definition. testing-library__dom provides its own type definitions, so you do not need this installed.
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 25 new dependencies.
info Direct dependencies
├─ @testing-library/jest-dom@4.2.4
├─ @testing-library/react@9.5.0
├─ @testing-library/user-event@7.2.1
├─ @types/jest@24.9.1
├─ @types/node@12.12.54
├─ @types/react-dom@16.9.8
├─ @types/react@16.9.46
├─ react-dom@16.13.1
├─ react@16.13.1
└─ typescript@3.7.5
info All dependencies
├─ @babel/runtime-corejs3@7.11.2
├─ @sheerun/mutationobserver-shim@0.3.3
├─ @testing-library/dom@6.16.0
├─ @testing-library/jest-dom@4.2.4
├─ @testing-library/react@9.5.0
├─ @testing-library/user-event@7.2.1
├─ @types/aria-query@4.2.0
├─ @types/jest@24.9.1
├─ @types/node@12.12.54
├─ @types/prop-types@15.7.3
├─ @types/react-dom@16.9.8
├─ @types/react@16.9.46
├─ @types/testing-library__dom@7.5.0
├─ @types/testing-library__react@9.1.3
├─ aria-query@4.2.2
├─ css.escape@1.5.1
├─ csstype@3.0.2
├─ dom-accessibility-api@0.3.0
├─ min-indent@1.0.1
├─ react-dom@16.13.1
├─ react@16.13.1
├─ redent@3.0.0
├─ strip-indent@3.0.0
├─ typescript@3.7.5
└─ wait-for-expect@3.0.2
✨ Done in 5.25s.
We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.
Your tsconfig.json has been populated with default values.
Removing template package using yarnpkg...
yarn remove v1.22.4
[1/2] 🗑 Removing module cra-template-typescript...
[2/2] 🔨 Regenerating lockfile and installing missing dependencies...
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
success Uninstalled packages.
✨ Done in 6.67s.
Created git commit.
Success! Created amplify-tutorial at /Users/mike/tmp/web-application-projects/amplify-tutorial
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd /Users/mike/tmp/web-application-projects/amplify-tutorial
yarn start
Happy hacking!
amplify-tutorial (master) $ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project amplifytutorial
? Enter a name for the environment tutorial
? Choose your default editor: Vim (via Terminal, Mac OS only)
? 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: yarn build
? Start Command: yarn 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 tutorial to AWS Amplify Console app: d1zosspqcu3fob
⠙ Initializing project in the cloud...
CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Tue Aug 18 2020 07:05:08 GMT+0900 (GMT+09:00)
CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Tue Aug 18 2020 07:05:08 GMT+0900 (GMT+09:00)
CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Tue Aug 18 2020 07:05:08 GMT+0900 (GMT+09:00)
CREATE_IN_PROGRESS amplify-amplifytutorial-tutorial-70500 AWS::CloudFormation::Stack Tue Aug 18 2020 07:05:03 GMT+0900 (GMT+09:00) User Initiated
⠋ Initializing project in the cloud...
CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Tue Aug 18 2020 07:05:10 GMT+0900 (GMT+09:00) Resource creation Initiated
CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Tue Aug 18 2020 07:05:10 GMT+0900 (GMT+09:00) Resource creation Initiated
CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Tue Aug 18 2020 07:05:09 GMT+0900 (GMT+09:00) Resource creation Initiated
⠸ Initializing project in the cloud...
CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Tue Aug 18 2020 07:05:30 GMT+0900 (GMT+09:00)
CREATE_COMPLETE AuthRole AWS::IAM::Role Tue Aug 18 2020 07:05:30 GMT+0900 (GMT+09:00)
CREATE_COMPLETE UnauthRole AWS::IAM::Role Tue Aug 18 2020 07:05:29 GMT+0900 (GMT+09:00)
⠋ Initializing project in the cloud...
CREATE_COMPLETE amplify-amplifytutorial-tutorial-70500 AWS::CloudFormation::Stack Tue Aug 18 2020 07:05:34 GMT+0900 (GMT+09:00)
✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
Initialized your environment successfully.
Your project has been successfully initialized and connected to the cloud!
Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud
Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything
amplify-tutorial +(master) $ yarn add aws-amplify "@aws-amplify/ui-react"
yarn add v1.22.4
[1/4] 🔍 Resolving packages...
warning aws-amplify > @aws-amplify/auth > amazon-cognito-identity-js > buffer@4.9.1: This version of 'buffer' is out-of-date. You must update to v4.9.2 or newer
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
warning "aws-amplify > @aws-amplify/api@3.1.22" has incorrect peer dependency "@aws-amplify/pubsub@^2.1.1".
warning "aws-amplify > @aws-amplify/datastore@2.2.9" has unmet peer dependency "@react-native-community/netinfo@^5.5.0".
warning "aws-amplify > @aws-amplify/api > @aws-amplify/api-graphql@1.1.5" has incorrect peer dependency "@aws-amplify/pubsub@^2.1.1".
warning "aws-amplify > @aws-amplify/analytics > @aws-sdk/client-firehose > @aws-sdk/middleware-retry > react-native-get-random-values@1.4.0" has unmet peer dependency "react-native@>=0.56".
warning "@aws-amplify/ui-react > @aws-amplify/ui-components@0.6.1" has unmet peer dependency "@aws-amplify/auth@^2.1.5".
warning "@aws-amplify/ui-react > @aws-amplify/ui-components@0.6.1" has unmet peer dependency "@aws-amplify/core@^2.2.4".
warning "@aws-amplify/ui-react > @aws-amplify/ui-components@0.6.1" has unmet peer dependency "@aws-amplify/xr@^1.1.5".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 75 new dependencies.
info Direct dependencies
├─ @aws-amplify/ui-react@0.2.14
└─ aws-amplify@3.0.23
info All dependencies
├─ @aws-amplify/analytics@3.2.6
├─ @aws-amplify/api-graphql@1.1.5
├─ @aws-amplify/datastore@2.2.9
├─ @aws-amplify/interactions@3.1.22
├─ @aws-amplify/predictions@3.1.22
├─ @aws-amplify/ui-components@0.6.1
├─ @aws-amplify/ui-react@0.2.14
├─ @aws-amplify/ui@2.0.2
├─ @aws-amplify/xr@2.1.22
├─ @aws-crypto/crc32@1.0.0-alpha.0
├─ @aws-crypto/ie11-detection@1.0.0-alpha.0
├─ @aws-crypto/supports-web-crypto@1.0.0-alpha.0
├─ @aws-sdk/abort-controller@1.0.0-gamma.3
├─ @aws-sdk/chunked-blob-reader-native@1.0.0-gamma.3
├─ @aws-sdk/chunked-blob-reader@1.0.0-gamma.3
├─ @aws-sdk/client-comprehend@1.0.0-gamma.4
├─ @aws-sdk/client-firehose@1.0.0-gamma.4
├─ @aws-sdk/client-kinesis@1.0.0-gamma.4
├─ @aws-sdk/client-lex-runtime-service@1.0.0-gamma.4
├─ @aws-sdk/client-personalize-events@1.0.0-gamma.4
├─ @aws-sdk/client-pinpoint@1.0.0-gamma.4
├─ @aws-sdk/client-polly@1.0.0-gamma.4
├─ @aws-sdk/client-rekognition@1.0.0-gamma.4
├─ @aws-sdk/client-s3@1.0.0-gamma.4
├─ @aws-sdk/client-textract@1.0.0-gamma.4
├─ @aws-sdk/client-translate@1.0.0-gamma.4
├─ @aws-sdk/credential-provider-cognito-identity@1.0.0-gamma.4
├─ @aws-sdk/credential-provider-env@1.0.0-gamma.3
├─ @aws-sdk/credential-provider-imds@1.0.0-gamma.3
├─ @aws-sdk/credential-provider-process@1.0.0-gamma.3
├─ @aws-sdk/hash-blob-browser@1.0.0-gamma.3
├─ @aws-sdk/hash-stream-node@1.0.0-gamma.3
├─ @aws-sdk/md5-js@1.0.0-gamma.3
├─ @aws-sdk/middleware-apply-body-checksum@1.0.0-gamma.3
├─ @aws-sdk/middleware-bucket-endpoint@1.0.0-gamma.3
├─ @aws-sdk/middleware-expect-continue@1.0.0-gamma.3
├─ @aws-sdk/middleware-header-default@1.0.0-gamma.3
├─ @aws-sdk/middleware-location-constraint@1.0.0-gamma.3
├─ @aws-sdk/middleware-sdk-s3@1.0.0-gamma.3
├─ @aws-sdk/middleware-ssec@1.0.0-gamma.3
├─ @aws-sdk/s3-request-presigner@1.0.0-gamma.3
├─ @aws-sdk/service-error-classification@1.0.0-gamma.3
├─ @aws-sdk/util-locate-window@1.0.0-gamma.5
├─ @aws-sdk/xml-builder@1.0.0-gamma.3
├─ @sinonjs/commons@1.8.1
├─ @sinonjs/samsam@3.3.3
├─ @sinonjs/text-encoding@0.7.1
├─ amazon-cognito-identity-js@4.3.3
├─ array-from@2.1.1
├─ aws-amplify@3.0.23
├─ buffer-alloc-unsafe@1.1.0
├─ buffer-alloc@1.2.0
├─ buffer-fill@1.0.0
├─ buffer@4.9.1
├─ diff@3.5.0
├─ dijkstrajs@1.0.1
├─ events@3.2.0
├─ fast-base64-decode@1.0.0
├─ fast-xml-parser@3.17.4
├─ follow-redirects@1.5.10
├─ idb@5.0.2
├─ iterall@1.3.0
├─ js-cookie@2.2.1
├─ just-extend@4.1.0
├─ lolex@4.2.0
├─ nise@1.5.3
├─ paho-mqtt@1.1.0
├─ pngjs@3.4.0
├─ qrcode@1.4.4
├─ react-native-get-random-values@1.4.0
├─ sinon@7.5.0
├─ type-detect@4.0.8
├─ ulid@2.3.0
├─ zen-observable@0.7.1
└─ zen-push@0.2.1
✨ Done in 28.50s.
amplify-tutorial +(master) $ vim src/index.tsx
amplify-tutorial +(master) $ amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: AmplifyTodoTutorial
? Choose the default authorization type for the API API key
? Enter a description for the API key: Amplify Tutorial API Key
? After how many days from now the API key should expire (1-365): 7
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)
The following types do not have '@auth' enabled. Consider using @auth with @model
- Todo
Learn more about @auth here: https://docs.amplify.aws/cli/graphql-transformer/directives#auth
GraphQL schema compiled successfully.
Edit your schema at /Users/mike/tmp/web-application-projects/amplify-tutorial/amplify/backend/api/AmplifyTodoTutorial/schema.graphql or place .graphql files in a directory at /Users/mike/tmp/web-application-projects/amplify-tutorial/amplify/backend/api/AmplifyTodoTutorial/schema
? Do you want to edit the schema now? Yes
Successfully added resource AmplifyTodoTutorial locally
Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud
amplify-tutorial +(master) $ tree ./amplify
./amplify
├── #current-cloud-backend
│   └── amplify-meta.json
├── backend
│   ├── amplify-meta.json
│   ├── api
│   │   └── AmplifyTodoTutorial
│   │   ├── build
│   │   │   ├── cloudformation-template.json
│   │   │   ├── functions
│   │   │   ├── parameters.json
│   │   │   ├── pipelineFunctions
│   │   │   ├── resolvers
│   │   │   │   ├── Mutation.createTodo.req.vtl
│   │   │   │   ├── Mutation.createTodo.res.vtl
│   │   │   │   ├── Mutation.deleteTodo.req.vtl
│   │   │   │   ├── Mutation.deleteTodo.res.vtl
│   │   │   │   ├── Mutation.updateTodo.req.vtl
│   │   │   │   ├── Mutation.updateTodo.res.vtl
│   │   │   │   ├── Query.getTodo.req.vtl
│   │   │   │   ├── Query.getTodo.res.vtl
│   │   │   │   ├── Query.listTodos.req.vtl
│   │   │   │   └── Query.listTodos.res.vtl
│   │   │   ├── schema.graphql
│   │   │   └── stacks
│   │   │   ├── CustomResources.json
│   │   │   └── Todo.json
│   │   ├── parameters.json
│   │   ├── resolvers
│   │   ├── schema.graphql
│   │   ├── stacks
│   │   │   └── CustomResources.json
│   │   └── transform.conf.json
│   └── backend-config.json
└── team-provider-info.json
11 directories, 23 files
amplify-tutorial +(master) $ cat ./amplify/backend/api/AmplifyTodoTutorial/schema.graphql
type Todo @model {
id: ID!
name: String!
description: String
}
amplify-tutorial +(master) $ java --version
Picked up _JAVA_OPTIONS: -Dfile.encoding=UTF-8
openjdk 14 2020-03-17
OpenJDK Runtime Environment (build 14+36-1461)
OpenJDK 64-Bit Server VM (build 14+36-1461, mixed mode, sharing)
amplify-tutorial +(master) $ amplify mock api
Failed to start API Mock endpoint TypeError: Cannot read property '0' of null
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment