From 1fc713dca8cf87f9d99e846e2cec4877dfe4f985 Mon Sep 17 00:00:00 2001 From: Ivan Artemiev <29709626+iartemiev@users.noreply.github.com> Date: Fri, 20 Sep 2019 10:27:02 -0400 Subject: [PATCH] Add settings --- .github/CODE_OF_CONDUCT.md | 5 +- .github/ISSUE_TEMPLATE/bug_report.md | 20 +- .github/ISSUE_TEMPLATE/feature_request.md | 1 - .github/ISSUE_TEMPLATE/usage-question.md | 1 - .github/PULL_REQUEST_TEMPLATE.md | 5 +- .vscode/extensions.json | 12 + .vscode/settings.json | 4 + CONTRIBUTING.md | 21 +- README.md | 164 +- docs/404.md | 4 +- docs/_layouts/home.md | 3 +- docs/changelog.md | 2 +- docs/default.md | 2 +- docs/index.md | 2 +- docs/media/api_guide.md | 2 +- docs/media/api_reference_home.md | 2 +- docs/media/authentication_guide.md | 2 +- docs/media/cache_guide.md | 2 +- docs/media/cli_guide.md | 2 +- docs/media/configure.md | 2 +- docs/media/create/hybrid-mobile-apps.md | 23 +- docs/media/create/react-native-apps.md | 23 +- docs/media/create/static-web-sites.md | 18 +- docs/media/create/web-apps.md | 24 +- docs/media/developer_guide.md | 2 +- docs/media/examples.md | 2 +- docs/media/federated_identity_setup.md | 2 +- docs/media/get_started.md | 2 +- docs/media/hosting_guide.md | 2 +- docs/media/hub_guide.md | 2 +- docs/media/i18n_guide.md | 2 +- docs/media/install_n_config.md | 2 +- docs/media/interactions_guide.md | 2 +- docs/media/ionic_guide.md | 2 +- docs/media/logger_guide.md | 2 +- docs/media/pub_sub_guide.md | 2 +- docs/media/push_notifications_setup.md | 2 +- docs/media/quick_start.md | 2 +- docs/media/react_guide.md | 2 +- docs/media/react_native_guide.md | 2 +- docs/media/sample/service-worker.md | 96 +- docs/media/service_workers_guide.md | 2 +- docs/media/storage_guide.md | 2 +- docs/media/toolchain.md | 2 +- docs/media/tutorials.md | 2 +- .../tutorials/building-ionic-4-apps/index.md | 2 +- .../building-react-native-apps/index.md | 2 +- .../tutorials/building-web-apps/index.md | 2 +- docs/media/ui_guide.md | 2 +- docs/media/ui_library.md | 2 +- docs/media/vuejs_guide.md | 2 +- docs/media/xr_guide.md | 2 +- .../Providers/AmazonPersonalizeProvider.ts | 2 +- .../src/Auth/FederatedSignIn.tsx | 2 + .../aws-amplify-react/src/Auth/SignUp.tsx | 2 +- packages/aws-amplify-react/src/Auth/index.tsx | 9 +- .../src/Interactions/ChatBot.tsx | 1 + .../src/Interactions/aws-lex-audio.tsx | 8 + vscode/CHANGELOG.md | 12 +- vscode/README.md | 5 +- vscode/auto_snippet_documentation.md | 2680 ++++++++++------- vscode/src/extension.ts | 2 +- vscode/vsc-extension-quickstart.md | 49 +- 63 files changed, 1854 insertions(+), 1414 deletions(-) create mode 100644 .vscode/extensions.json create mode 100644 .vscode/settings.json diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md index 3b64466870c..ec98f2b76e8 100644 --- a/.github/CODE_OF_CONDUCT.md +++ b/.github/CODE_OF_CONDUCT.md @@ -1,4 +1,5 @@ ## Code of Conduct -This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct). -For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact + +This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct). +For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact opensource-codeofconduct@amazon.com with any additional questions or comments. diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 6f8601031d0..bf6bbc82c5c 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -4,7 +4,6 @@ about: Create a report to help us improve title: '' labels: '' assignees: '' - --- **Describe the bug** @@ -12,6 +11,7 @@ A clear and concise description of what the bug is. **To Reproduce** Steps to reproduce the behavior: + 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' @@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen. If applicable, add screenshots to help explain your problem. **Desktop (please complete the following information):** - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] - - Version [e.g. 22] + +- OS: [e.g. iOS] +- Browser [e.g. chrome, safari] +- Version [e.g. 22] **Smartphone (please complete the following information):** - - Device: [e.g. iPhone6] - - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] - - Version [e.g. 22] + +- Device: [e.g. iPhone6] +- OS: [e.g. iOS8.1] +- Browser [e.g. stock browser, safari] +- Version [e.g. 22] **Additional context** Add any other context about the problem here. @@ -40,4 +42,4 @@ Add any other context about the problem here. **Sample code** Include additional sample code or a sample repository to help us reproduce the issue. (Be sure to remove any sensitive data) -***You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.*** +**_You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app._** diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index bbcbbe7d615..2f28cead039 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -4,7 +4,6 @@ about: Suggest an idea for this project title: '' labels: '' assignees: '' - --- **Is your feature request related to a problem? Please describe.** diff --git a/.github/ISSUE_TEMPLATE/usage-question.md b/.github/ISSUE_TEMPLATE/usage-question.md index 76bf51d107a..35432bd68a6 100644 --- a/.github/ISSUE_TEMPLATE/usage-question.md +++ b/.github/ISSUE_TEMPLATE/usage-question.md @@ -4,7 +4,6 @@ about: Ask a question about AWS Amplify usage title: '' labels: '' assignees: '' - --- ** Which Category is your question related to? ** diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index ab40d21d778..3bfff5933bc 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,6 +1,5 @@ -*Issue #, if available:* - -*Description of changes:* +_Issue #, if available:_ +_Description of changes:_ By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license. diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 00000000000..748bd465350 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,12 @@ +{ + // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. + // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp + + // List of extensions which should be recommended for users of this workspace. + "recommendations": [ + "esbenp.prettier-vscode", + "tombonnike.vscode-status-bar-format-toggle" + ], + // List of extensions recommended by VS Code that should not be recommended for users of this workspace. + "unwantedRecommendations": [] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000000..b95a063bc92 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "editor.formatOnSave": true, + "editor.insertSpaces": false +} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3522d945edf..19f0fa2966a 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,26 +2,27 @@ Bug reports and feature suggestions are welcome. When filing a bug, try to include as much information as you can. Details like these are incredibly useful: -* A reproducible test case or series of steps -* The date/commit of the code you're running -* Any modifications you've made relevant to the bug -* Anything unusual about your environment or deployment +- A reproducible test case or series of steps +- The date/commit of the code you're running +- Any modifications you've made relevant to the bug +- Anything unusual about your environment or deployment # Pull Requests Pull requests are welcome! -You should open an issue to discuss your pull request, unless it's a trivial change. It's best to ensure that your proposed change would be accepted so that you don't waste your own time. If you would like to implement support for a significant feature that is not yet available, please talk to us beforehand to avoid any duplication of effort. +You should open an issue to discuss your pull request, unless it's a trivial change. It's best to ensure that your proposed change would be accepted so that you don't waste your own time. If you would like to implement support for a significant feature that is not yet available, please talk to us beforehand to avoid any duplication of effort. Pull requests should generally be opened against **master**. -Only include ***src*** files in your PR. Don't include any build files i.e. dist/ or lib/. These will be built upon publish to npm and when a release is created on GitHub. +Only include **_src_** files in your PR. Don't include any build files i.e. dist/ or lib/. These will be built upon publish to npm and when a release is created on GitHub. -Make sure you have attached a commit message before submitting the PR with the format: ```fix/feat(package_name): message``` +Make sure you have attached a commit message before submitting the PR with the format: `fix/feat(package_name): message` For example: - * A change is made in one of the file from @aws-amplify/auth - * When you want to commit the change: git commit -m 'fix(@aws-amplify/auth): the_message' - * Replace fix with feat when this is a feature change + +- A change is made in one of the file from @aws-amplify/auth +- When you want to commit the change: git commit -m 'fix(@aws-amplify/auth): the_message' +- Replace fix with feat when this is a feature change ## Tests diff --git a/README.md b/README.md index 4a2c4ec93fe..7194624e0f2 100644 --- a/README.md +++ b/README.md @@ -15,9 +15,9 @@

-### AWS Amplify is a JavaScript library for frontend and mobile developers building cloud-enabled applications. +### AWS Amplify is a JavaScript library for frontend and mobile developers building cloud-enabled applications. -AWS Amplify provides a declarative and easy-to-use interface across different categories of cloud operations. AWS Amplify goes well with any JavaScript based frontend workflow, and React Native for mobile developers. +AWS Amplify provides a declarative and easy-to-use interface across different categories of cloud operations. AWS Amplify goes well with any JavaScript based frontend workflow, and React Native for mobile developers. Our default implementation works with Amazon Web Services (AWS), but AWS Amplify is designed to be open and pluggable for any custom backend or service. @@ -25,45 +25,45 @@ Notice: Amplify@1.x.x has structural changes. For details please check [Amplify Modularization](https://github.com/aws/aws-amplify/wiki/Amplify-modularization). - ### Features / APIs -- [__Authentication__](https://aws.github.io/aws-amplify/media/authentication_guide): APIs and building blocks for developers who want to create user authentication experiences. -- [__Analytics__](https://aws.github.io/aws-amplify/media/analytics_guide): Easily collect analytics data for your app. Analytics data includes user sessions and other custom events that you want to track in your app. -- [__API__](https://aws.github.io/aws-amplify/media/api_guide): Provides a simple solution when making HTTP requests. It provides an automatic, lightweight signing process which complies with AWS Signature Version 4. -- [__GraphQL Client__](https://aws.github.io/aws-amplify/media/api_guide#configuration-for-graphql-server): Interact with your GraphQL server or AWS AppSync API with an easy-to-use & configured GraphQL client. -- [__Storage__](https://aws.github.io/aws-amplify/media/storage_guide): Provides a simple mechanism for managing user content for your app in public, protected or private storage buckets. -- [__Push Notifications__](https://aws.github.io/aws-amplify/media/push_notifications_setup): Allows you to integrate push notifications in your app with Amazon Pinpoint targeting and campaign management support. -- [__Interactions__](https://aws.github.io/aws-amplify/media/interactions_guide): Create conversational bots powered by deep learning technologies. -- [__PubSub__](https://aws.github.io/aws-amplify/media/pub_sub_guide): Provides connectivity with cloud-based message-oriented middleware. -- [__Internationalization__](https://aws.github.io/aws-amplify/media/i18n_guide): A lightweight internationalization solution. -- [__Cache__](https://aws.github.io/aws-amplify/media/cache_guide): Provides a generic LRU cache for JavaScript developers to store data with priority and expiration settings. -- [__Predictions__](https://aws-amplify.github.io/docs/js/predictions): Provides a solution for using AI and ML cloud services to enhance your application. +- [**Authentication**](https://aws.github.io/aws-amplify/media/authentication_guide): APIs and building blocks for developers who want to create user authentication experiences. +- [**Analytics**](https://aws.github.io/aws-amplify/media/analytics_guide): Easily collect analytics data for your app. Analytics data includes user sessions and other custom events that you want to track in your app. +- [**API**](https://aws.github.io/aws-amplify/media/api_guide): Provides a simple solution when making HTTP requests. It provides an automatic, lightweight signing process which complies with AWS Signature Version 4. +- [**GraphQL Client**](https://aws.github.io/aws-amplify/media/api_guide#configuration-for-graphql-server): Interact with your GraphQL server or AWS AppSync API with an easy-to-use & configured GraphQL client. +- [**Storage**](https://aws.github.io/aws-amplify/media/storage_guide): Provides a simple mechanism for managing user content for your app in public, protected or private storage buckets. +- [**Push Notifications**](https://aws.github.io/aws-amplify/media/push_notifications_setup): Allows you to integrate push notifications in your app with Amazon Pinpoint targeting and campaign management support. +- [**Interactions**](https://aws.github.io/aws-amplify/media/interactions_guide): Create conversational bots powered by deep learning technologies. +- [**PubSub**](https://aws.github.io/aws-amplify/media/pub_sub_guide): Provides connectivity with cloud-based message-oriented middleware. +- [**Internationalization**](https://aws.github.io/aws-amplify/media/i18n_guide): A lightweight internationalization solution. +- [**Cache**](https://aws.github.io/aws-amplify/media/cache_guide): Provides a generic LRU cache for JavaScript developers to store data with priority and expiration settings. +- [**Predictions**](https://aws-amplify.github.io/docs/js/predictions): Provides a solution for using AI and ML cloud services to enhance your application. #### Visit our [Web Site](https://aws.github.io/aws-amplify) to learn more about AWS Amplify. -* [Documentation](https://aws.github.io/aws-amplify) -* [Installation](#installation) -* [Configuration](#configuration) -* [Examples](#examples) -* [Contributing](https://github.com/aws/aws-amplify/blob/master/CONTRIBUTING.md) +- [Documentation](https://aws.github.io/aws-amplify) +- [Installation](#installation) +- [Configuration](#configuration) +- [Examples](#examples) +- [Contributing](https://github.com/aws/aws-amplify/blob/master/CONTRIBUTING.md) ## Installation AWS Amplify is available as `aws-amplify` package on [npm](https://www.npmjs.com/). -__Web__ +**Web** ```bash $ npm install aws-amplify --save ``` or you could install the module you want to use individually: + ```bash $ npm install @aws-amplify/auth --save ``` -__React__ +**React** If you are developing a [React](https://github.com/facebook/react/) app, you can install an additional package `aws-amplify-react` containing [Higher Order Components](https://reactjs.org/docs/higher-order-components.html): @@ -72,7 +72,7 @@ $ npm install aws-amplify --save $ npm install aws-amplify-react --save ``` -__Angular__ +**Angular** If you are developing an [Angular](https://github.com/angular/angular) app, you can install an additional package `aws-amplify-angular`. This package contains an [Angular module](https://angular.io/guide/architecture-modules) with a [provider and components](https://aws.github.io/aws-amplify/media/angular_guide): @@ -81,9 +81,9 @@ $ npm install aws-amplify --save $ npm install aws-amplify-angular --save ``` -Visit our [Installation Guide for Web](https://aws.github.io/aws-amplify/media/install_n_config?platform=javascript) to start building your web app. +Visit our [Installation Guide for Web](https://aws.github.io/aws-amplify/media/install_n_config?platform=javascript) to start building your web app. -__Vue__ +**Vue** If you are developing a [Vue](https://github.com/vuejs/vue) app, you can install an additional package `aws-amplify-vue`. This package contains a [Vue plugin](https://vuejs.org/v2/guide/plugins.html) for the Amplify library along with [Vue components](https://vuejs.org/v2/guide/components.html): @@ -92,9 +92,9 @@ $ npm install aws-amplify --save $ npm install aws-amplify-vue --save ``` -Visit our [Installation Guide for Web](https://aws-amplify.github.io/amplify-js/media/vue_guide#vue) to start building your Vue app. +Visit our [Installation Guide for Web](https://aws-amplify.github.io/amplify-js/media/vue_guide#vue) to start building your Vue app. -__React Native__ +**React Native** For React Native development, install `aws-amplify`: @@ -108,13 +108,13 @@ If you are developing a [React Native](https://github.com/facebook/react-native) $ npm install aws-amplify-react-native --save ``` -Visit our [Installation Guide for React Native](https://aws.github.io/aws-amplify/media/install_n_config?platform=react-native) to start building your web app. +Visit our [Installation Guide for React Native](https://aws.github.io/aws-amplify/media/install_n_config?platform=react-native) to start building your web app. -## Configuration +## Configuration Somewhere in your app, preferably at the root level, configure Amplify with your resources. -__Using AWS Resources__ +**Using AWS Resources** ```js import Amplify from 'aws-amplify'; @@ -129,16 +129,15 @@ import aws_exports from './aws-exports'; // in this way you are only importing Auth and configuring it. Amplify.configure(aws_exports); - ``` -__Without AWS__ +**Without AWS** ```js Amplify.configure({ - API: { - graphql_endpoint: 'https://www.example.com/my-graphql-endpoint' - } + API: { + graphql_endpoint: 'https://www.example.com/my-graphql-endpoint', + }, }); ``` @@ -156,7 +155,7 @@ import Analytics from '@aws-amplify/analytics'; Analytics.record('myCustomEvent'); ``` -See our [Analytics Developer Guide](https://aws.github.io/aws-amplify/media/analytics_guide) for detailed information. +See our [Analytics Developer Guide](https://aws.github.io/aws-amplify/media/analytics_guide) for detailed information. ### 2. Add Authentication to your App @@ -166,26 +165,25 @@ Add user sign up and sign in using two of the many methods available to the [Aut import Auth from '@aws-amplify/auth'; Auth.signUp({ - username: 'AmandaB', - password: 'MyCoolPassword1!', - attributes: { - email: 'someemail@example.com' - } + username: 'AmandaB', + password: 'MyCoolPassword1!', + attributes: { + email: 'someemail@example.com', + }, }); Auth.signIn(username, password) - .then(success => console.log('successful sign in')) - .catch(err => console.log(err)); + .then(success => console.log('successful sign in')) + .catch(err => console.log(err)); ``` -See our [Authentication Developer Guide](https://aws.github.io/aws-amplify/media/authentication_guide) for detailed information. +See our [Authentication Developer Guide](https://aws.github.io/aws-amplify/media/authentication_guide) for detailed information. -__React / React Native__ +**React / React Native** Adding authentication to your React or React Native app is as easy as wrapping your app's main component with our `withAuthenticator` higher order component. AWS Amplify will provide you customizable UI for common use cases such as user registration and login. ```jsx - // For React import { withAuthenticator } from 'aws-amplify-react'; @@ -195,7 +193,7 @@ import { withAuthenticator } from 'aws-amplify-react-native'; export default withAuthenticator(App); ``` -__Angular__ +**Angular** To add authentication to your Angular app you can also use the built-in service provider and components: @@ -233,7 +231,7 @@ AWS Amplify automatically signs your REST requests with [AWS Signature Version 4 import API from '@aws-amplify/api'; let apiName = 'MyApiName'; -let path = '/path'; +let path = '/path'; let options = { headers: {...} // OPTIONAL } @@ -242,38 +240,38 @@ API.get(apiName, path, options).then(response => { }); ``` -See our [API Developer Guide](https://aws.github.io/aws-amplify/media/api_guide) for detailed information. +See our [API Developer Guide](https://aws.github.io/aws-amplify/media/api_guide) for detailed information. -### 4. GraphQL API Operations +### 4. GraphQL API Operations To access a GraphQL API with your app, you need to make sure to configure the endpoint URL in your app’s configuration. ```js // configure a custom GraphQL endpoint Amplify.configure({ - API: { - graphql_endpoint: 'https://www.example.com/my-graphql-endpoint' - } + API: { + graphql_endpoint: 'https://www.example.com/my-graphql-endpoint', + }, }); - // Or configure an AWS AppSync endpoint. let myAppConfig = { - // ... - 'aws_appsync_graphqlEndpoint': 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql', - 'aws_appsync_region': 'us-east-1', - 'aws_appsync_authenticationType': 'API_KEY', - 'aws_appsync_apiKey': 'da2-xxxxxxxxxxxxxxxxxxxxxxxxxx', - // ... + // ... + aws_appsync_graphqlEndpoint: + 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql', + aws_appsync_region: 'us-east-1', + aws_appsync_authenticationType: 'API_KEY', + aws_appsync_apiKey: 'da2-xxxxxxxxxxxxxxxxxxxxxxxxxx', + // ... }; - + Amplify.configure(myAppConfig); ``` -__queries__ +**queries** ```js -import API, { graphqlOperation } from "@aws-amplify/api"; +import API, { graphqlOperation } from '@aws-amplify/api'; const ListEvents = `query ListEvents { listEvents { @@ -288,10 +286,10 @@ const ListEvents = `query ListEvents { const allEvents = await API.graphql(graphqlOperation(ListEvents)); ``` -__mutations__ +**mutations** ```js -import API, { graphqlOperation } from "@aws-amplify/api"; +import API, { graphqlOperation } from '@aws-amplify/api'; const CreateEvent = `mutation CreateEvent($name: String!, $when: String!, $where: String!, $description: String!) { createEvent(name: $name, when: $when, where: $where, description: $description) { @@ -304,19 +302,19 @@ const CreateEvent = `mutation CreateEvent($name: String!, $when: String!, $where }`; const eventDetails = { - name: 'Party tonight!', - when: '8:00pm', - where: 'Ballroom', - description: 'Coming together as a team!' + name: 'Party tonight!', + when: '8:00pm', + where: 'Ballroom', + description: 'Coming together as a team!', }; const newEvent = await API.graphql(graphqlOperation(CreateEvent, eventDetails)); ``` -__subscriptions__ +**subscriptions** ```js -import API, { graphqlOperation } from "@aws-amplify/api"; +import API, { graphqlOperation } from '@aws-amplify/api'; const SubscribeToEventComments = `subscription subscribeToComments { subscribeToComments { @@ -326,9 +324,9 @@ const SubscribeToEventComments = `subscription subscribeToComments { }`; const subscription = API.graphql( - graphqlOperation(SubscribeToEventComments) + graphqlOperation(SubscribeToEventComments) ).subscribe({ - next: (eventData) => console.log(eventData) + next: eventData => console.log(eventData), }); ``` @@ -336,20 +334,20 @@ See our [GraphQL API Developer Guide](https://aws.github.io/aws-amplify/media/ap ### 5. Upload and Download public or private content -AWS Amplify provides an easy-to-use API to store and get content from public or private storage folders: +AWS Amplify provides an easy-to-use API to store and get content from public or private storage folders: ```js -Storage.put(key, fileObj, {level: 'private'}) - .then (result => console.log(result)) - .catch(err => console.log(err)); - - // Store data with specifying its MIME type +Storage.put(key, fileObj, { level: 'private' }) + .then(result => console.log(result)) + .catch(err => console.log(err)); + +// Store data with specifying its MIME type Storage.put(key, fileObj, { - level: 'private', - contentType: 'text/plain' + level: 'private', + contentType: 'text/plain', }) -.then (result => console.log(result)) -.catch(err => console.log(err)); + .then(result => console.log(result)) + .catch(err => console.log(err)); ``` -See our [Storage Developer Guide](https://aws.github.io/aws-amplify/media/storage_guide) for detailed information. +See our [Storage Developer Guide](https://aws.github.io/aws-amplify/media/storage_guide) for detailed information. diff --git a/docs/404.md b/docs/404.md index 218a804d7ea..a13cec08791 100755 --- a/docs/404.md +++ b/docs/404.md @@ -5,6 +5,6 @@ title: 404 - Page not found # Content settings page_content: - title: 404 / Page not found - message: The link you clicked may be broken
or the page may have been removed. + title: 404 / Page not found + message: The link you clicked may be broken
or the page may have been removed. --- diff --git a/docs/_layouts/home.md b/docs/_layouts/home.md index 03e4a1e3aa2..a5fca98418f 100644 --- a/docs/_layouts/home.md +++ b/docs/_layouts/home.md @@ -2,7 +2,6 @@ layout: default --- -

Gitter Chat @@ -68,4 +67,4 @@ layout: default ## Contributing - See [Contributing Guidelines](https://github.com/aws/aws-amplify/blob/master/CONTRIBUTING.md) \ No newline at end of file + See [Contributing Guidelines](https://github.com/aws/aws-amplify/blob/master/CONTRIBUTING.md) diff --git a/docs/changelog.md b/docs/changelog.md index d8e1286e359..a2fcfd4d6a5 100644 --- a/docs/changelog.md +++ b/docs/changelog.md @@ -1,4 +1,4 @@ - 02/28/2008 + - New theme applied for documentation - New documentation home page (Removed dublicate installation guidance on homepage) diff --git a/docs/default.md b/docs/default.md index 9d828f5f046..58d4710aedb 100755 --- a/docs/default.md +++ b/docs/default.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/index.md b/docs/index.md index 9d828f5f046..58d4710aedb 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/api_guide.md b/docs/media/api_guide.md index 9a5ecddd11c..239e41f8896 100644 --- a/docs/media/api_guide.md +++ b/docs/media/api_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/api_reference_home.md b/docs/media/api_reference_home.md index 9a5ecddd11c..239e41f8896 100644 --- a/docs/media/api_reference_home.md +++ b/docs/media/api_reference_home.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/authentication_guide.md b/docs/media/authentication_guide.md index e29e1e31a99..70eaec2f580 100644 --- a/docs/media/authentication_guide.md +++ b/docs/media/authentication_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/cache_guide.md b/docs/media/cache_guide.md index af381373343..2c8833aee28 100644 --- a/docs/media/cache_guide.md +++ b/docs/media/cache_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/cli_guide.md b/docs/media/cli_guide.md index 573301fa6ef..91b0060752b 100644 --- a/docs/media/cli_guide.md +++ b/docs/media/cli_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/configure.md b/docs/media/configure.md index e8f69907da1..813e6a093e9 100644 --- a/docs/media/configure.md +++ b/docs/media/configure.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/create/hybrid-mobile-apps.md b/docs/media/create/hybrid-mobile-apps.md index 016f11bd4c5..d416831bcf0 100644 --- a/docs/media/create/hybrid-mobile-apps.md +++ b/docs/media/create/hybrid-mobile-apps.md @@ -1,6 +1,7 @@ --- layout: examples --- + # Hybrid Mobile apps with AWS Amplify #### AWS Amplify helps web developers to build cloud-powered hybrid mobile apps quickly. @@ -12,19 +13,19 @@ Hybrid development based on Apache Cordova is an easy path to create mobile apps For hybrid mobile developers, AWS Amplify provides following main benefits: -- **Easy integration** for cloud operations with declarative API +- **Easy integration** for cloud operations with declarative API - **CLI support** for bootstrapping your app backend quickly - **Local configuration and deployment** of your app's backend logic - **UI components** for common operations such as Authorization and Storage - **Monitoring** app usage and **engaging** users with campaign analytics -### Building Hybrid Mobile Apps with AWS Amplify +### Building Hybrid Mobile Apps with AWS Amplify Hybrid mobile development gives you the flexibility of creating multi-platform mobile apps with the tools and technologies you use for Web development. Combined with AWS Amplify's cloud services support, you can create your apps faster and iterate quickly to provide the best experience for your customers. -Creating a web app with JavaScript, CSS and HTML5 and packaging it as a mobile app for distribution is an exciting idea for many developers. Indeed, this is the easiest way to build a mobile app if you are familiar with web development. +Creating a web app with JavaScript, CSS and HTML5 and packaging it as a mobile app for distribution is an exciting idea for many developers. Indeed, this is the easiest way to build a mobile app if you are familiar with web development. -When building hybrid mobile apps with AWS Amplify, your app resources are bundled and deployed with the toolchain of your preference, and your app's backend integration will be handled by AWS Amplify. +When building hybrid mobile apps with AWS Amplify, your app resources are bundled and deployed with the toolchain of your preference, and your app's backend integration will be handled by AWS Amplify. You can import AWS Amplify in your Cordova or PhoneGap project to start working with your backend. In addition, AWS Amplify provides Angular components which you can use with Ionic. @@ -37,10 +38,10 @@ With AWS Amplify, you can focus more on your app's business logic and your end-u As an example, here is how you upload an image to a logged-in user's private storage: ```js - Storage.put('example.png', file, { - level: 'private', - contentType: 'image/png' - }) +Storage.put('example.png', file, { + level: 'private', + contentType: 'image/png', +}); ``` In this example, AWS Amplify Storage category already knows about the authenticated user context, your Amazon S3 buckets and request signing requirements for added security. All the underlying process is managed automatically under the hood, and you get what you want; uploading a user file to a protected location. @@ -55,7 +56,7 @@ amplify add api Amplify CLI creates the necessary folder structure and generates JavaScript files for your app's backend logic: -![Performance Results](../images/backend_cloud_api.png?raw=true "Performance Results") +![Performance Results](../images/backend_cloud_api.png?raw=true 'Performance Results') After working with your backend code, deploying your app backend is very simple with CLI: @@ -65,7 +66,7 @@ amplify push #### Manage your Backend with Amplify CLI -If you have existing AWS resources such as Amazon API Gateway endpoints or Amazon S3 buckets, you can use them with AWS Amplify by setting up resource credentials in your app's configuration. +If you have existing AWS resources such as Amazon API Gateway endpoints or Amazon S3 buckets, you can use them with AWS Amplify by setting up resource credentials in your app's configuration. Otherwise, AWS Amplify CLI is a great tool for creating AWS resources, related user roles, and security policies. @@ -107,7 +108,7 @@ Analytics.record('albumVisit', { genre: 'jazz', artist: 'Miles Davis' }); Analytics events are displayed in Amazon Pinpoint console. In the console, you can create targeted campaigns and push notifications to engage your customers. -![Pinpoint](../images/pinpoint_analytics.png?raw=true "Pinpoint") +![Pinpoint](../images/pinpoint_analytics.png?raw=true 'Pinpoint') #### Utilities diff --git a/docs/media/create/react-native-apps.md b/docs/media/create/react-native-apps.md index 946288e0f71..429351d68d8 100644 --- a/docs/media/create/react-native-apps.md +++ b/docs/media/create/react-native-apps.md @@ -20,13 +20,13 @@ With AWS Amplify's cloud connectivity support, you can create your apps quickly - **React Native UI components** for common operations such as authorization and storage - **Monitoring** app usage and **engaging** users with campaign analytics -### Building React Native Apps with AWS Amplify +### Building React Native Apps with AWS Amplify -React Native gives you the flexibility of creating multi-platform native mobile experiences with JavaScript. Unlike [hybrid mobile apps]({%if jekyll.environment == 'production'%}{{site.amplify.docs_baseurl}}{%endif%}/media/create/hybrid-mobile-apps) that run on a browser view, React Native apps run on a faster runtime environment which has better integration with native capabilities of the device. +React Native gives you the flexibility of creating multi-platform native mobile experiences with JavaScript. Unlike [hybrid mobile apps]({%if jekyll.environment == 'production'%}{{site.amplify.docs_baseurl}}{%endif%}/media/create/hybrid-mobile-apps) that run on a browser view, React Native apps run on a faster runtime environment which has better integration with native capabilities of the device. When building React Native apps, your app bundle is deployed to the app stores, and your mobile app's backend logic will be handled by cloud operations that you integrate with AWS Amplify. -Cloud services for mobile apps are often categorized as MBaaS (mobile back-end as a service). AWS Amplify offers MBaaS functionality for various categories of cloud operations so that you can create your mobile app backend easily. +Cloud services for mobile apps are often categorized as MBaaS (mobile back-end as a service). AWS Amplify offers MBaaS functionality for various categories of cloud operations so that you can create your mobile app backend easily. #### Declarative and easy-to-use API @@ -37,10 +37,10 @@ With AWS Amplify, you can concentrate more on your app's business logic, while y As an example, here is how you upload an image to a logged-in user's private storage: ```js - Storage.put('example.png', file, { - level: 'private', - contentType: 'image/png' - }) +Storage.put('example.png', file, { + level: 'private', + contentType: 'image/png', +}); ``` In this example, AWS Amplify Storage category already knows about the authenticated user context, your Amazon S3 buckets and request signing requirements for security. All the underlying operations are executed automatically under the hood, and you get what you want; uploading a user file to a secure location. @@ -53,9 +53,9 @@ Amplify CLI helps you to configure your app's backend easily. For example, the f amplify add api ``` -Amplify CLI generates JavaScript files for your app's backend logic, and places them to the appropriate folder structure in your project. +Amplify CLI generates JavaScript files for your app's backend logic, and places them to the appropriate folder structure in your project. -![Performance Results](../images/backend_cloud_api.png?raw=true "Performance Results") +![Performance Results](../images/backend_cloud_api.png?raw=true 'Performance Results') After working with your backend code, deploying your app backend is very simple with the CLI: @@ -77,7 +77,7 @@ amplify push #### React Native components -To speed-up your React Native development, AWS Amplify provides UI components. You can import the UI components and use out-of-the box functionality for Authentication and Storage categories. +To speed-up your React Native development, AWS Amplify provides UI components. You can import the UI components and use out-of-the box functionality for Authentication and Storage categories. As an example, in you React Native app, you can use a Higher-Order Components to provide a sign-in/sign-out experience for your app simply by wrapping your app's main component: @@ -96,9 +96,10 @@ Also, collecting more data with Analytics category is simple: ```js Analytics.record('albumVisit', { genre: 'jazz', artist: 'Miles Davis' }); ``` + Analytics events are displayed in Amazon Pinpoint console. In the console, you can create targeted campaigns and send push notifications to engage your customers. -![Performance Results](../images/pinpoint_analytics.png?raw=true "Performance Results") +![Performance Results](../images/pinpoint_analytics.png?raw=true 'Performance Results') #### Utilities diff --git a/docs/media/create/static-web-sites.md b/docs/media/create/static-web-sites.md index 05cb6c4b92b..595b4c086dd 100644 --- a/docs/media/create/static-web-sites.md +++ b/docs/media/create/static-web-sites.md @@ -1,6 +1,7 @@ --- layout: examples --- + # Static Websites with AWS Amplify #### Deploy your Static Website with AWS Amplify @@ -16,13 +17,13 @@ For static websites, AWS Amplify provides following main benefits: - **Streaming** support for your audio and video files - **Testing** your website's loading times on real devices - **Monitoring** and **engaging** users with campaign analytics -- **Adding cloud services** to your website quickly with the **CLI** +- **Adding cloud services** to your website quickly with the **CLI** -### Building Static Websites with AWS Amplify +### Building Static Websites with AWS Amplify -When building static websites with AWS Amplify, your static assets are deployed to highly available globally CDN service for hosting and media streaming. +When building static websites with AWS Amplify, your static assets are deployed to highly available globally CDN service for hosting and media streaming. -If you wish to add new features such as user-signup, API access or analytics, AWS Amplify enables you to integrate those features quickly. +If you wish to add new features such as user-signup, API access or analytics, AWS Amplify enables you to integrate those features quickly. Our CLI will handle deployments and backend service orchestration, so you can focus on your content and user experience without worrying about managing server resources. @@ -33,9 +34,10 @@ Amplify CLI provides a one-line deploy command that pushes your app's static ass ```bash amplify publish ``` + CDN service, which is provided by Amazon CloudFront, will handle the high-performance delivery of your static assets. -![CDN](../images/mobile_hub_cdn.png?raw=true "CDN"){: style="max-height:450px;"} +![CDN](../images/mobile_hub_cdn.png?raw=true 'CDN'){: style="max-height:450px;"} If your website includes video or audio files, those assets will be automatically streamed to the browser. @@ -43,7 +45,7 @@ If your website includes video or audio files, those assets will be automaticall Every time you deploy your website, a performance test is executed using real devices. The test results will show the initial loading time for your website. -![Performance Results](../images/performance_results.png?raw=true "Performance Results") +![Performance Results](../images/performance_results.png?raw=true 'Performance Results') #### Easily Add Cloud Features to your Website @@ -67,9 +69,9 @@ Once you deploy your website, the next challenge is understanding how your users AWS Amplify provides analytics capabilities, push notifications and targeted messaging campaigns out-of-the-box. You will start getting key engagement metrics such as the number of user sessions and the number of app launches automatically after you deploy your website. -Analytics events are displayed in Amazon Pinpoint console. In the console, you can create targeted campaigns and push notifications to engage your customers. +Analytics events are displayed in Amazon Pinpoint console. In the console, you can create targeted campaigns and push notifications to engage your customers. -![Pinpoint](../images/pinpoint_analytics.png?raw=true "Pinpoint"){: style="max-height:450px;"} +![Pinpoint](../images/pinpoint_analytics.png?raw=true 'Pinpoint'){: style="max-height:450px;"} ### Start Building now! diff --git a/docs/media/create/web-apps.md b/docs/media/create/web-apps.md index 3a17cd970d6..8cbd4ef935f 100644 --- a/docs/media/create/web-apps.md +++ b/docs/media/create/web-apps.md @@ -1,6 +1,7 @@ --- layout: examples --- + # Web Apps with AWS Amplify #### AWS Amplify helps developers to create high-quality web apps quickly @@ -19,7 +20,7 @@ For Web developers, AWS Amplify provides following main benefits: - **UI components** for common operations such as Authorization and Storage - **Monitoring** app usage and **engaging** users with campaign analytics -### Building and Deploying Web Apps with AWS Amplify +### Building and Deploying Web Apps with AWS Amplify When building serverless web apps with AWS Amplify, your frontend resources are deployed for hosting, and your app's backend will be handled by cloud services that you integrate. @@ -34,10 +35,10 @@ With AWS Amplify, you can focus more on your app's business logic, and let the s As an example, here is how you upload an image to a logged-in user's private storage: ```js - Storage.put('example.png', file, { - level: 'private', - contentType: 'image/png' - }) +Storage.put('example.png', file, { + level: 'private', + contentType: 'image/png', +}); ``` In the example, AWS Amplify Storage category already knows about the authenticated user context, your Amazon S3 buckets and request signing requirements for added security. All the underlying process is managed automatically under the hood, and you get what you want; uploading a user file to a protected location. @@ -52,7 +53,7 @@ amplify add api Amplify CLI creates the necessary folder structure and generates JavaScript files for your app's backend: -![Performance Results](../images/backend_cloud_api.png?raw=true "Performance Results") +![Performance Results](../images/backend_cloud_api.png?raw=true 'Performance Results') After working with your backend code, deploying your app backend is very simple with CLI: @@ -66,7 +67,7 @@ If you have existing AWS resources such as Amazon API Gateway endpoints or Amazo Otherwise, Amplify CLI is a great tool for creating AWS resources, related user roles, and security policies. -Mix and match building blocks for your app, and start implementing cloud operations like Authorization, Storage and Cloud API. +Mix and match building blocks for your app, and start implementing cloud operations like Authorization, Storage and Cloud API. Syncing your latest backend configuration with your local app project is simple with the CLI: @@ -85,9 +86,10 @@ With Amplify CLI, you can deploy your app with single line command: ```bash amplify publish ``` + Amazon CloudFront will handle the delivery of your static assets to the browser. -![CDN](../images/mobile_hub_cdn.png?raw=true "CDN") +![CDN](../images/mobile_hub_cdn.png?raw=true 'CDN') If your web app resources include media files like video or audio, those assets will be automatically streamed to the browser, providing the best user experience. @@ -95,7 +97,7 @@ If your web app resources include media files like video or audio, those assets Every time you deploy your app to hosting, a performance test will be automatically executed using real devices. The test results will show the initial load times for your app. -![Performance Results](../images/performance_results.png?raw=true "Performance Results") +![Performance Results](../images/performance_results.png?raw=true 'Performance Results') #### Use your Favorite Frontend Library @@ -125,9 +127,9 @@ Also, collecting more data with Analytics category is as simple as; Analytics.record('albumVisit', { genre: 'jazz', artist: 'Miles Davis' }); ``` -Analytics events are displayed in Amazon Pinpoint console. In the console, you can create targeted campaigns and push notifications to engage your customers. +Analytics events are displayed in Amazon Pinpoint console. In the console, you can create targeted campaigns and push notifications to engage your customers. -![Pinpoint](../images/pinpoint_analytics.png?raw=true "Pinpoint") +![Pinpoint](../images/pinpoint_analytics.png?raw=true 'Pinpoint') #### Utilities diff --git a/docs/media/developer_guide.md b/docs/media/developer_guide.md index e8f69907da1..813e6a093e9 100644 --- a/docs/media/developer_guide.md +++ b/docs/media/developer_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/examples.md b/docs/media/examples.md index e8f69907da1..813e6a093e9 100644 --- a/docs/media/examples.md +++ b/docs/media/examples.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/federated_identity_setup.md b/docs/media/federated_identity_setup.md index f098987e849..616d4ad40fc 100644 --- a/docs/media/federated_identity_setup.md +++ b/docs/media/federated_identity_setup.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/get_started.md b/docs/media/get_started.md index e8f69907da1..813e6a093e9 100644 --- a/docs/media/get_started.md +++ b/docs/media/get_started.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/hosting_guide.md b/docs/media/hosting_guide.md index ca8e096119d..d2377e64dbd 100644 --- a/docs/media/hosting_guide.md +++ b/docs/media/hosting_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/hub_guide.md b/docs/media/hub_guide.md index 5c804ad05f5..7e63753df5b 100644 --- a/docs/media/hub_guide.md +++ b/docs/media/hub_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/i18n_guide.md b/docs/media/i18n_guide.md index fc04cfd9965..977da03029f 100644 --- a/docs/media/i18n_guide.md +++ b/docs/media/i18n_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/install_n_config.md b/docs/media/install_n_config.md index e8f69907da1..813e6a093e9 100644 --- a/docs/media/install_n_config.md +++ b/docs/media/install_n_config.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/interactions_guide.md b/docs/media/interactions_guide.md index f369d646c43..c7279eb7397 100644 --- a/docs/media/interactions_guide.md +++ b/docs/media/interactions_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/ionic_guide.md b/docs/media/ionic_guide.md index 3d1684fbae7..8eb2b3119b4 100644 --- a/docs/media/ionic_guide.md +++ b/docs/media/ionic_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/logger_guide.md b/docs/media/logger_guide.md index d868ec642ec..895a30ec03f 100644 --- a/docs/media/logger_guide.md +++ b/docs/media/logger_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/pub_sub_guide.md b/docs/media/pub_sub_guide.md index cd4237af447..f26056ad232 100644 --- a/docs/media/pub_sub_guide.md +++ b/docs/media/pub_sub_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/push_notifications_setup.md b/docs/media/push_notifications_setup.md index 7c260c399a1..4d0aab41559 100644 --- a/docs/media/push_notifications_setup.md +++ b/docs/media/push_notifications_setup.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/quick_start.md b/docs/media/quick_start.md index e8f69907da1..813e6a093e9 100644 --- a/docs/media/quick_start.md +++ b/docs/media/quick_start.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/react_guide.md b/docs/media/react_guide.md index 305cae1b02c..509792f9aba 100644 --- a/docs/media/react_guide.md +++ b/docs/media/react_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/react_native_guide.md b/docs/media/react_native_guide.md index 305cae1b02c..509792f9aba 100644 --- a/docs/media/react_native_guide.md +++ b/docs/media/react_native_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/sample/service-worker.md b/docs/media/sample/service-worker.md index 336d72d9ad5..913d821769a 100644 --- a/docs/media/sample/service-worker.md +++ b/docs/media/sample/service-worker.md @@ -1,54 +1,51 @@ --- --- -```js +```js /** * @copyright 2018 Amazon Web Services - * + * * An example service worker that utilizes lifecycle events. * https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers - * + * * This service worker provides the means to cache local static assets - * into browsers Cache Storage as well as network requests using the + * into browsers Cache Storage as well as network requests using the * fetch events. Network requests and static assets are cached and * available offline. Other strategies exist for offline application development: * https://hacks.mozilla.org/2016/10/offline-strategies-come-to-the-service-worker-cookbook/ - * + * */ /** * Static assets to cache. This is specific on your application * and build process and framework */ -var appCacheFiles = [ - '/', - '/index.html' -], -// The name of the Cache Storage -appCache = 'aws-amplify-v1'; +var appCacheFiles = ['/', '/index.html'], + // The name of the Cache Storage + appCache = 'aws-amplify-v1'; /** - * The install event is fired when the service worker + * The install event is fired when the service worker * is installed. * https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API */ -addEventListener('install', (event) => { - console.log('[Service Worker] Install Event', event) +addEventListener('install', event => { + console.log('[Service Worker] Install Event', event); event.waitUntil( - caches.open(appCache).then(function(cache) { - return cache.addAll(appCacheFiles); - }) - ); -}) + caches.open(appCache).then(function(cache) { + return cache.addAll(appCacheFiles); + }) + ); +}); /** * The activate vent is fired when the service worker is activated * and added to the home screen. * https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API */ -addEventListener('activate', (event) => { - console.log('[Service Worker] Activate Event ', event) -}) +addEventListener('activate', event => { + console.log('[Service Worker] Activate Event ', event); +}); /** * The fetch event is fired for every network request. It is also dependent @@ -57,20 +54,23 @@ addEventListener('activate', (event) => { */ addEventListener('fetch', function(event) { //return fetch(event.request); - console.log('[Service Worker] Fetch: ', event); + console.log('[Service Worker] Fetch: ', event); let url = new URL(event.request.url); //url.pathname - event.respondWith( - caches.match(event.request).then(function(resp) { - return resp || fetch(event.request).then(function(response) { - return caches.open(appCache).then(function(cache) { - if (event.request.method === 'GET') { - cache.put(event.request, response.clone()); - } - return response; - }); - }); - }) + event.respondWith( + caches.match(event.request).then(function(resp) { + return ( + resp || + fetch(event.request).then(function(response) { + return caches.open(appCache).then(function(cache) { + if (event.request.method === 'GET') { + cache.put(event.request, response.clone()); + } + return response; + }); + }) + ); + }) ); }); /** @@ -79,45 +79,43 @@ addEventListener('fetch', function(event) { * other clients (browser restrictions currently exist) * https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessage */ -addEventListener('message', (event) => { - console.log('[Service Worker] Message Event: ', event.data) -}) +addEventListener('message', event => { + console.log('[Service Worker] Message Event: ', event.data); +}); /** * Listen for incoming Push events */ -addEventListener('push', (event) => { +addEventListener('push', event => { console.log('[Service Worker] Push Received.'); console.log(`[Service Worker] Push had this data: "${event.data.text()}"`); if (!(self.Notification && self.Notification.permission === 'granted')) return; - + var data = {}; - if (event.data) - data = event.data.json(); + if (event.data) data = event.data.json(); - var title = data.title || "Web Push Notification"; - var message = data.message || "New Push Notification Received"; - var icon = "images/notification-icon.png"; + var title = data.title || 'Web Push Notification'; + var message = data.message || 'New Push Notification Received'; + var icon = 'images/notification-icon.png'; var badge = 'images/notification-badge.png'; var options = { body: message, icon: icon, - badge: badge + badge: badge, }; - event.waitUntil(self.registration.showNotification(title,options)); + event.waitUntil(self.registration.showNotification(title, options)); }); /** * Handle a notification click */ -addEventListener('notificationclick', (event) => { +addEventListener('notificationclick', event => { console.log('[Service Worker] Notification click: ', event); event.notification.close(); event.waitUntil( clients.openWindow('https://aws-amplify.github.io/amplify-js') ); }); - -``` \ No newline at end of file +``` diff --git a/docs/media/service_workers_guide.md b/docs/media/service_workers_guide.md index f2337c85061..33a7f61a9bf 100644 --- a/docs/media/service_workers_guide.md +++ b/docs/media/service_workers_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/storage_guide.md b/docs/media/storage_guide.md index 3baca17b157..a6ac086492b 100644 --- a/docs/media/storage_guide.md +++ b/docs/media/storage_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/toolchain.md b/docs/media/toolchain.md index 6b7d052a3d0..bc896518618 100644 --- a/docs/media/toolchain.md +++ b/docs/media/toolchain.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/tutorials.md b/docs/media/tutorials.md index e8f69907da1..813e6a093e9 100644 --- a/docs/media/tutorials.md +++ b/docs/media/tutorials.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/tutorials/building-ionic-4-apps/index.md b/docs/media/tutorials/building-ionic-4-apps/index.md index ed5941f31a5..d0e3ed57e51 100644 --- a/docs/media/tutorials/building-ionic-4-apps/index.md +++ b/docs/media/tutorials/building-ionic-4-apps/index.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/tutorials/building-react-native-apps/index.md b/docs/media/tutorials/building-react-native-apps/index.md index fa185e019b2..d87ba359955 100644 --- a/docs/media/tutorials/building-react-native-apps/index.md +++ b/docs/media/tutorials/building-react-native-apps/index.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/tutorials/building-web-apps/index.md b/docs/media/tutorials/building-web-apps/index.md index 9d828f5f046..58d4710aedb 100644 --- a/docs/media/tutorials/building-web-apps/index.md +++ b/docs/media/tutorials/building-web-apps/index.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/ui_guide.md b/docs/media/ui_guide.md index 2955570b16c..f00ab9c8218 100644 --- a/docs/media/ui_guide.md +++ b/docs/media/ui_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/ui_library.md b/docs/media/ui_library.md index 2955570b16c..f00ab9c8218 100644 --- a/docs/media/ui_library.md +++ b/docs/media/ui_library.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/vuejs_guide.md b/docs/media/vuejs_guide.md index 6b68d177597..3909fbaff0d 100644 --- a/docs/media/vuejs_guide.md +++ b/docs/media/vuejs_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/media/xr_guide.md b/docs/media/xr_guide.md index 7e75102fd4e..510ce6fbe30 100644 --- a/docs/media/xr_guide.md +++ b/docs/media/xr_guide.md @@ -1 +1 @@ - \ No newline at end of file + diff --git a/packages/analytics/src/Providers/AmazonPersonalizeProvider.ts b/packages/analytics/src/Providers/AmazonPersonalizeProvider.ts index 91f407b8d28..3a9e84dd62f 100644 --- a/packages/analytics/src/Providers/AmazonPersonalizeProvider.ts +++ b/packages/analytics/src/Providers/AmazonPersonalizeProvider.ts @@ -224,7 +224,7 @@ export default class AmazonPersonalizeProvider implements AnalyticsProvider { private generateRequestParams(params, sessionInfo): RequestParams { const requestParams = {}; const { eventType, properties } = params.event; - requestParams.eventData = { eventType: eventType, properties: properties }; + requestParams.eventData = { eventType, properties }; requestParams.sessionInfo = sessionInfo; requestParams.sentAt = params.sentAt; requestParams.credentials = params.credentials; diff --git a/packages/aws-amplify-react/src/Auth/FederatedSignIn.tsx b/packages/aws-amplify-react/src/Auth/FederatedSignIn.tsx index 3004132820c..07b4ac710df 100644 --- a/packages/aws-amplify-react/src/Auth/FederatedSignIn.tsx +++ b/packages/aws-amplify-react/src/Auth/FederatedSignIn.tsx @@ -132,6 +132,7 @@ export class FederatedButtons extends Component { federated.oauth_config = Object.assign( {}, federated.oauth_config, + // @ts-ignore oauth.awsCognito ); } @@ -189,6 +190,7 @@ export default class FederatedSignIn extends Component { federated.oauth_config = Object.assign( {}, federated.oauth_config, + // @ts-ignore oauth.awsCognito ); } diff --git a/packages/aws-amplify-react/src/Auth/SignUp.tsx b/packages/aws-amplify-react/src/Auth/SignUp.tsx index f7cfb69c106..1e4e3e079fb 100644 --- a/packages/aws-amplify-react/src/Auth/SignUp.tsx +++ b/packages/aws-amplify-react/src/Auth/SignUp.tsx @@ -231,8 +231,8 @@ export default class SignUp extends AuthPiece { const inputVals = Object.values(this.inputs); inputKeys.forEach((key, index) => { - // @ts-ignore if ( + // @ts-ignore !['username', 'password', 'checkedValue', 'dial_code'].includes(key) ) { if ( diff --git a/packages/aws-amplify-react/src/Auth/index.tsx b/packages/aws-amplify-react/src/Auth/index.tsx index 9728466b864..81748879120 100644 --- a/packages/aws-amplify-react/src/Auth/index.tsx +++ b/packages/aws-amplify-react/src/Auth/index.tsx @@ -135,18 +135,23 @@ export class AuthenticatorWrapper extends Component { this.state = { auth: 'init' }; this.handleAuthState = this.handleAuthState.bind(this); + this.renderChildren = this.renderChildren.bind(this); } handleAuthState(state, data) { this.setState({ auth: state, authData: data }); } + renderChildren() { + // @ts-ignore + return this.props.children(this.state.auth); + } + render() { return (

- {// @ts-ignore - this.props.children(this.state.auth)} + {this.renderChildren()}
); } diff --git a/packages/aws-amplify-react/src/Interactions/ChatBot.tsx b/packages/aws-amplify-react/src/Interactions/ChatBot.tsx index 1c311ef7afb..8c2a8996922 100644 --- a/packages/aws-amplify-react/src/Interactions/ChatBot.tsx +++ b/packages/aws-amplify-react/src/Interactions/ChatBot.tsx @@ -356,6 +356,7 @@ export class ChatBot extends Component { // @ts-ignore dialog: [ ...this.state.dialog, + // @ts-ignore response && { from: 'bot', message: response.message }, ], inputText: '', diff --git a/packages/aws-amplify-react/src/Interactions/aws-lex-audio.tsx b/packages/aws-amplify-react/src/Interactions/aws-lex-audio.tsx index dfdb5209501..9c2aa3d37c6 100644 --- a/packages/aws-amplify-react/src/Interactions/aws-lex-audio.tsx +++ b/packages/aws-amplify-react/src/Interactions/aws-lex-audio.tsx @@ -18,9 +18,12 @@ if (!n[o]) { if (!t[o]) { var a = typeof require == 'function' && require; + // @ts-ignore if (!u && a) return a(o, !0); + // @ts-ignore if (i) return i(o, !0); var f = new Error("Cannot find module '" + o + "'"); + // @ts-ignore throw ((f.code = 'MODULE_NOT_FOUND'), f); } var l = (n[o] = { exports: {} }); @@ -28,6 +31,7 @@ l.exports, function(e) { var n = t[o][1][e]; + // @ts-ignore return s(n ? n : e); }, l, @@ -41,6 +45,7 @@ return n[o].exports; } var i = typeof require == 'function' && require; + // @ts-ignore for (var o = 0; o < r.length; o++) s(r[o]); return s; })( @@ -602,6 +607,7 @@ sources[skey] = [ // @ts-ignore Function( + // @ts-ignore ['require'], // try to call default if defined to also support babel esmodule // exports @@ -649,6 +655,7 @@ // @ts-ignore var URL = + // @ts-ignore window.URL || window.webkitURL || window.mozURL || window.msURL; var blob = new Blob([src], { type: 'text/javascript' }); @@ -831,6 +838,7 @@ if (typeof audio_context === 'undefined') { // @ts-ignore window.AudioContext = + // @ts-ignore window.AudioContext || window.webkitAudioContext; audio_context = new AudioContext(); } diff --git a/vscode/CHANGELOG.md b/vscode/CHANGELOG.md index 8572e388e56..42cf40991e7 100644 --- a/vscode/CHANGELOG.md +++ b/vscode/CHANGELOG.md @@ -1,14 +1,18 @@ # Change Log ## 0.0.1 + - Initial release ## 0.0.2 - - Documentation updates + +- Documentation updates ## 0.0.3 - - Add icon + +- Add icon ## 0.0.4 - - Add TypeScript support - - Update Readme \ No newline at end of file + +- Add TypeScript support +- Update Readme diff --git a/vscode/README.md b/vscode/README.md index 5690ea6f20f..bcd3aab2094 100644 --- a/vscode/README.md +++ b/vscode/README.md @@ -1,4 +1,3 @@ - # AWS Amplify Visual Studio Code Extension Code snippets and completion for the [AWS Amplify](https://aws-amplify.github.io/amplify-js) API. @@ -7,7 +6,7 @@ Code snippets and completion for the [AWS Amplify](https://aws-amplify.github.io Visit [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=aws-amplify.aws-amplify-vscode) and click "Install". -Alternatively, go to the *Extension Marketplace* in VS Code and search for AWS Amplify. Click install on the extension with title "AWS Amplify API". +Alternatively, go to the _Extension Marketplace_ in VS Code and search for AWS Amplify. Click install on the extension with title "AWS Amplify API". ## Usage @@ -16,9 +15,11 @@ In a JavaScript, TypeScript, or JSX file, start typing an AWS Amplify API comman ## Naming convention The naming convention for code snippets is "Amplify " + action prefix. So, in the code editor, you can type: + ``` Amplify Update User Attributes ``` + to output the related code block: ![Alt Text](gifs/update_endpoint_example.gif) diff --git a/vscode/auto_snippet_documentation.md b/vscode/auto_snippet_documentation.md index 2f4fbaa32a5..a93cb2d0f05 100644 --- a/vscode/auto_snippet_documentation.md +++ b/vscode/auto_snippet_documentation.md @@ -1,84 +1,96 @@ # Automatically Generated Snippet Documentation -##### prefix: ```Amplify Automated Setup``` + +##### prefix: `Amplify Automated Setup` + ```js import Amplify, { Analytics } from 'aws-amplify'; import aws_exports from './aws-exports'; Amplify.configure(aws_exports); ``` -##### prefix: ```Amplify Manual Setup``` + +##### prefix: `Amplify Manual Setup` + ```js import { Analytics } from 'aws-amplify'; Analytics.configure({ - // OPTIONAL - disable Analytics if true - disabled: false, - // OPTIONAL - Allow recording session events. Default is true. - autoSessionRecord: true, - - AWSPinpoint: { - // OPTIONAL - Amazon Pinpoint App Client ID - appId: 'XXXXXXXXXXabcdefghij1234567890ab', - // OPTIONAL - Amazon service region - region: 'XX-XXXX-X', - // OPTIONAL - Customized endpoint - endpointId: 'XXXXXXXXXXXX', - // OPTIONAL - client context - clientContext: { - clientId: 'xxxxx', - appTitle: 'xxxxx', - appVersionName: 'xxxxx', - appVersionCode: 'xxxxx', - appPackageName: 'xxxxx', - platform: 'xxxxx', - platformVersion: 'xxxxx', - model: 'xxxxx', - make: 'xxxxx', - locale: 'xxxxx' - }, - - // Buffer settings used for reporting analytics events. - - // OPTIONAL - The buffer size for events in number of items. - bufferSize: 1000, - - // OPTIONAL - The interval in milliseconds to perform a buffer check and flush if necessary. - flushInterval: 5000, // 5s - - // OPTIONAL - The number of events to be deleted from the buffer when flushed. - flushSize: 100, - - // OPTIONAL - The limit for failed recording retries. - resendLimit: 5 - } + // OPTIONAL - disable Analytics if true + disabled: false, + // OPTIONAL - Allow recording session events. Default is true. + autoSessionRecord: true, + + AWSPinpoint: { + // OPTIONAL - Amazon Pinpoint App Client ID + appId: 'XXXXXXXXXXabcdefghij1234567890ab', + // OPTIONAL - Amazon service region + region: 'XX-XXXX-X', + // OPTIONAL - Customized endpoint + endpointId: 'XXXXXXXXXXXX', + // OPTIONAL - client context + clientContext: { + clientId: 'xxxxx', + appTitle: 'xxxxx', + appVersionName: 'xxxxx', + appVersionCode: 'xxxxx', + appPackageName: 'xxxxx', + platform: 'xxxxx', + platformVersion: 'xxxxx', + model: 'xxxxx', + make: 'xxxxx', + locale: 'xxxxx', + }, + + // Buffer settings used for reporting analytics events. + + // OPTIONAL - The buffer size for events in number of items. + bufferSize: 1000, + + // OPTIONAL - The interval in milliseconds to perform a buffer check and flush if necessary. + flushInterval: 5000, // 5s + + // OPTIONAL - The number of events to be deleted from the buffer when flushed. + flushSize: 100, + + // OPTIONAL - The limit for failed recording retries. + resendLimit: 5, + }, }); ``` -##### prefix: ```Amplify Recording A Custom Tracking Event``` + +##### prefix: `Amplify Recording A Custom Tracking Event` + ```js import { Analytics } from 'aws-amplify'; Analytics.record({ name: 'albumVisit' }); ``` -##### prefix: ```Amplify Record A Custom Tracking Event With Attributes``` + +##### prefix: `Amplify Record A Custom Tracking Event With Attributes` + ```js import { Analytics } from 'aws-amplify'; Analytics.record({ - name: 'albumVisit', - attributes: { genre: '', artist: '' } + name: 'albumVisit', + attributes: { genre: '', artist: '' }, }); ``` -##### prefix: ```Amplify Record Engagement Metrics``` + +##### prefix: `Amplify Record Engagement Metrics` + ```js import { Analytics } from 'aws-amplify'; Analytics.record({ - name: 'albumVisit', - attributes: {}, - metrics: { minutesListened: 30 } + name: 'albumVisit', + attributes: {}, + metrics: { minutesListened: 30 }, }); ``` -##### prefix: ```Amplify Disable/Enable Analytics``` + +##### prefix: `Amplify Disable/Enable Analytics` + ```js import { Analytics } from 'aws-amplify'; @@ -88,126 +100,138 @@ Analytics.disable(); // to enable Analytics Analytics.enable(); ``` -##### prefix: ```Amplify Record Authentication Events``` + +##### prefix: `Amplify Record Authentication Events` + ```js import { Analytics } from 'aws-amplify'; // Sign-in event Analytics.record({ - name: '_userauth.sign_in' + name: '_userauth.sign_in', }); // Sign-up event Analytics.record({ - name: '_userauth.sign_up' + name: '_userauth.sign_up', }); // Authentication failure event Analytics.record({ - name: '_userauth.auth_fail' + name: '_userauth.auth_fail', }); ``` -##### prefix: ```Amplify Update User Attributes``` + +##### prefix: `Amplify Update User Attributes` + ```js import { Analytics } from 'aws-amplify'; Analytics.updateEndpoint({ - // Customized userId - UserId: 'XXXXXXXXXXXX', - // User attributes - Attributes: { - interests: ['football', 'basketball', 'AWS'] - // ... - }, - // Custom user attributes - UserAttributes: { - hobbies: ['piano', 'hiking'] - // ... - } -}) + // Customized userId + UserId: 'XXXXXXXXXXXX', + // User attributes + Attributes: { + interests: ['football', 'basketball', 'AWS'], + // ... + }, + // Custom user attributes + UserAttributes: { + hobbies: ['piano', 'hiking'], + // ... + }, +}); ``` -##### prefix: ```Amplify Installation And Configuration``` + +##### prefix: `Amplify Installation And Configuration` + ```js import { Analytics, AWSKinesisProvider } from 'aws-amplify'; Analytics.addPluggable(new AWSKinesisProvider()); - ``` -##### prefix: ```Amplify Installation And Configuration 2``` + +##### prefix: `Amplify Installation And Configuration 2` + ```json { - "Version": "2012-10-17", - "Statement": [ - { - "Effect": "Allow", - "Action": [ - "kinesis:PutRecord", - "kinesis:PutRecords" - ], - "Resource": "*" - } - ] + "Version": "2012-10-17", + "Statement": [ + { + "Effect": "Allow", + "Action": ["kinesis:PutRecord", "kinesis:PutRecords"], + "Resource": "*" + } + ] } ``` -##### prefix: ```Amplify Installation And Configuration 3``` -```js +##### prefix: `Amplify Installation And Configuration 3` + +```js // Configure the plugin after adding it to the Analytics module Analytics.configure({ - AWSKinesis: { - - // OPTIONAL - Amazon Kinesis service region - region: 'XX-XXXX-X', - - // OPTIONAL - The buffer size for events in number of items. - bufferSize: 1000, - - // OPTIONAL - The number of events to be deleted from the buffer when flushed. - flushSize: 100, - - // OPTIONAL - The interval in milliseconds to perform a buffer check and flush if necessary. - flushInterval: 5000, // 5s - - // OPTIONAL - The limit for failed recording retries. - resendLimit: 5 - } -}); + AWSKinesis: { + // OPTIONAL - Amazon Kinesis service region + region: 'XX-XXXX-X', + + // OPTIONAL - The buffer size for events in number of items. + bufferSize: 1000, + + // OPTIONAL - The number of events to be deleted from the buffer when flushed. + flushSize: 100, + // OPTIONAL - The interval in milliseconds to perform a buffer check and flush if necessary. + flushInterval: 5000, // 5s + + // OPTIONAL - The limit for failed recording retries. + resendLimit: 5, + }, +}); ``` -##### prefix: ```Amplify Working With The Api``` + +##### prefix: `Amplify Working With The Api` + ```js -Analytics.record({ - data: { - // The data blob to put into the record - }, - // OPTIONAL - partitionKey: 'myPartitionKey', - streamName: 'myKinesisStream' -}, 'AWSKinesis'); +Analytics.record( + { + data: { + // The data blob to put into the record + }, + // OPTIONAL + partitionKey: 'myPartitionKey', + streamName: 'myKinesisStream', + }, + 'AWSKinesis' +); ``` -##### prefix: ```Amplify Using A Custom Plugin``` + +##### prefix: `Amplify Using A Custom Plugin` + ```typescript import { Analytics, AnalyticsProvider } from 'aws-amplify'; export default class MyAnalyticsProvider implements AnalyticsProvider { - // category and provider name - static category = 'Analytics'; - static providerName = 'MyAnalytics'; + // category and provider name + static category = 'Analytics'; + static providerName = 'MyAnalytics'; - // you need to implement these four methods - // configure your provider - configure(config: object): object; + // you need to implement these four methods + // configure your provider + configure(config: object): object; - // record events and returns true if succeeds - record(params: object): Promise; + // record events and returns true if succeeds + record(params: object): Promise; - // return 'Analytics'; - getCategory(): string; + // return 'Analytics'; + getCategory(): string; - // return the name of you provider - getProviderName(): string; + // return the name of you provider + getProviderName(): string; } ``` -##### prefix: ```Amplify Using A Custom Plugin 2``` + +##### prefix: `Amplify Using A Custom Plugin 2` + ```js // add the plugin Analytics.addPluggable(new MyAnalyticsProvider()); @@ -220,39 +244,47 @@ Analytics.removePluggable(MyAnalyticsProvider.providerName); // send configuration into Amplify Analytics.configure({ - YOUR_PLUGIN_NAME: { - // My Analytics provider configuration - } + YOUR_PLUGIN_NAME: { + // My Analytics provider configuration + }, }); - ``` -##### prefix: ```Amplify Using Modularized Module``` + +##### prefix: `Amplify Using Modularized Module` + ```js import Analytics from '@aws-amplify/analytics'; Analytics.configure(); - ``` -##### prefix: ```Amplify Setup``` + +##### prefix: `Amplify Setup` + ```js "scripts": { "start": "[ -f src/aws-exports.js ] && mv src/aws-exports.js src/aws-exports.ts || ng serve; ng serve", "build": "[ -f src/aws-exports.js ] && mv src/aws-exports.js src/aws-exports.ts || ng build --prod; ng build --prod" } ``` -##### prefix: ```Amplify Setup 2``` + +##### prefix: `Amplify Setup 2` + ```js import Amplify from 'aws-amplify'; import awsmobile from './aws-exports'; Amplify.configure(awsmobile); ``` -##### prefix: ```Amplify Setup 3``` + +##### prefix: `Amplify Setup 3` + ```json "compilerOptions": { "types" : ["node"] } ``` -##### prefix: ```Amplify Setup 4``` + +##### prefix: `Amplify Setup 4` + ```js "defaults": { "styleExt": "css", @@ -262,7 +294,9 @@ Amplify.configure(awsmobile); } } ``` -##### prefix: ```Amplify Importing Amplify``` + +##### prefix: `Amplify Importing Amplify` + ```js import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular'; @@ -280,7 +314,9 @@ import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular'; ... }); ``` -##### prefix: ```Amplify Using Dependency Injection``` + +##### prefix: `Amplify Using Dependency Injection` + ```js import { AmplifyService } from 'aws-amplify-angular'; @@ -294,7 +330,9 @@ constructor( } ... ``` -##### prefix: ```Amplify Using Aws Amplify Categories``` + +##### prefix: `Amplify Using Aws Amplify Categories` + ```js import { Component } from '@angular/core'; import { AmplifyService } from 'aws-amplify-angular'; @@ -306,11 +344,11 @@ import { AmplifyService } from 'aws-amplify-angular'; }) export class AppComponent { - + constructor( public amplify:AmplifyService ) { - + this.amplifyService = amplify; - + /** now you can access category APIs: * this.amplifyService.auth(); // AWS Amplify Auth * this.amplifyService.analytics(); // AWS Amplify Analytics @@ -320,10 +358,12 @@ export class AppComponent { * this.amplifyService.pubsub(); // AWS Amplify PubSub **/ } - + } ``` -##### prefix: ```Amplify Usage Example: Subscribe To Authentication State Changes``` + +##### prefix: `Amplify Usage Example: Subscribe To Authentication State Changes` + ```js import { AmplifyService } from 'aws-amplify-angular'; @@ -345,87 +385,100 @@ constructor( public amplifyService: AmplifyService ) { } ``` -##### prefix: ```Amplify Photo Picker``` + +##### prefix: `Amplify Photo Picker` + ```js onImagePicked( file ) { let key = `pics/${file.name}`; - + this.amplify.storage().put( key, file, { 'level': 'private', 'contentType': file.type }) .then (result => console.log('uploaded: ', result)) .catch(err => console.log('upload error: ', err)); - + } ``` -##### prefix: ```Amplify S3 Album``` + +##### prefix: `Amplify S3 Album` + ```js onAlbumImageSelected( event ) { window.open( event, '_blank' ); } ``` -##### prefix: ```Amplify Automated Setup``` + +##### prefix: `Amplify Automated Setup` + ```js import Amplify, { API } from 'aws-amplify'; import aws_exports from './aws-exports'; Amplify.configure(aws_exports); ``` -##### prefix: ```Amplify Manual Setup``` + +##### prefix: `Amplify Manual Setup` + ```js import Amplify, { API } from 'aws-amplify'; Amplify.configure({ - Auth: { - // REQUIRED - Amazon Cognito Identity Pool ID - identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', - // REQUIRED - Amazon Cognito Region - region: 'XX-XXXX-X', - // OPTIONAL - Amazon Cognito User Pool ID - userPoolId: 'XX-XXXX-X_abcd1234', - // OPTIONAL - Amazon Cognito Web Client ID - userPoolWebClientId: 'XX-XXXX-X_abcd1234', - }, - API: { - endpoints: [ - { - name: "MyAPIGatewayAPI", - endpoint: "https://1234567890-abcdefgh.amazonaws.com" - }, - { - name: "MyCustomCloudFrontApi", - endpoint: "https://api.my-custom-cloudfront-domain.com", - - }, - { - name: "MyCustomLambdaApi", - endpoint: "https://lambda.us-east-1.amazonaws.com/2015-03-31/functions/yourFuncName/invocations", - service: "lambda", - region: "us-east-1" - } - ] - } + Auth: { + // REQUIRED - Amazon Cognito Identity Pool ID + identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', + // REQUIRED - Amazon Cognito Region + region: 'XX-XXXX-X', + // OPTIONAL - Amazon Cognito User Pool ID + userPoolId: 'XX-XXXX-X_abcd1234', + // OPTIONAL - Amazon Cognito Web Client ID + userPoolWebClientId: 'XX-XXXX-X_abcd1234', + }, + API: { + endpoints: [ + { + name: 'MyAPIGatewayAPI', + endpoint: 'https://1234567890-abcdefgh.amazonaws.com', + }, + { + name: 'MyCustomCloudFrontApi', + endpoint: 'https://api.my-custom-cloudfront-domain.com', + }, + { + name: 'MyCustomLambdaApi', + endpoint: + 'https://lambda.us-east-1.amazonaws.com/2015-03-31/functions/yourFuncName/invocations', + service: 'lambda', + region: 'us-east-1', + }, + ], + }, }); ``` -##### prefix: ```Amplify Aws Regional Endpoints``` + +##### prefix: `Amplify Aws Regional Endpoints` + ```js API: { - endpoints: [ - { - name: "MyCustomLambdaApi", - endpoint: "https://lambda.us-east-1.amazonaws.com/2015-03-31/functions/yourFuncName/invocations", - service: "lambda", - region: "us-east-1" - } - ] + endpoints: [ + { + name: 'MyCustomLambdaApi', + endpoint: + 'https://lambda.us-east-1.amazonaws.com/2015-03-31/functions/yourFuncName/invocations', + service: 'lambda', + region: 'us-east-1', + }, + ]; } ``` -##### prefix: ```Amplify Get**``` + +##### prefix: `Amplify Get**` + ```js let apiName = 'MyApiName'; -let path = '/path'; +let path = '/path'; let myInit = { // OPTIONAL headers: {} // OPTIONAL response: true // OPTIONAL (return entire response object instead of response.data) @@ -437,268 +490,331 @@ API.get(apiName, path, myInit).then(response => { console.log(error.response) }); ``` -##### prefix: ```Amplify Get** 2``` + +##### prefix: `Amplify Get** 2` + ```js -async function getData() { - let apiName = 'MyApiName'; - let path = '/path'; - let myInit = { // OPTIONAL - headers: {} // OPTIONAL - } - return await API.get(apiName, path, myInit); +async function getData() { + let apiName = 'MyApiName'; + let path = '/path'; + let myInit = { + // OPTIONAL + headers: {}, // OPTIONAL + }; + return await API.get(apiName, path, myInit); } getData(); ``` -##### prefix: ```Amplify Get** 3``` + +##### prefix: `Amplify Get** 3` + ```js let items = await API.get('myCloudApi', '/items', { - 'queryStringParameters': { - 'order': 'byPrice' - } + queryStringParameters: { + order: 'byPrice', + }, }); ``` -##### prefix: ```Amplify Get** 4``` + +##### prefix: `Amplify Get** 4` + ```js exports.handler = function(event, context, callback) { - console.log (event.queryStringParameters); -} + console.log(event.queryStringParameters); +}; ``` -##### prefix: ```Amplify Get** 5``` + +##### prefix: `Amplify Get** 5` + ```js -var awsServerlessExpressMiddleware = require('aws-serverless-express/middleware') -app.use(awsServerlessExpressMiddleware.eventContext()) +var awsServerlessExpressMiddleware = require('aws-serverless-express/middleware'); +app.use(awsServerlessExpressMiddleware.eventContext()); ``` -##### prefix: ```Amplify Get** 6``` + +##### prefix: `Amplify Get** 6` + ```js app.get('/items', function(req, res) { - // req.apiGateway.event.queryStringParameters - res.json(req.apiGateway.event) + // req.apiGateway.event.queryStringParameters + res.json(req.apiGateway.event); }); ``` -##### prefix: ```Amplify Get** 7``` + +##### prefix: `Amplify Get** 7` + ```js API.get('sampleCloudApi', '/items?q=test'); ``` -##### prefix: ```Amplify Post**``` + +##### prefix: `Amplify Post**` + ```js let apiName = 'MyApiName'; // replace this with your api name. let path = '/path'; //replace this with the path you have configured on your API let myInit = { - body: {}, // replace this with attributes you need - headers: {} // OPTIONAL -} + body: {}, // replace this with attributes you need + headers: {}, // OPTIONAL +}; -API.post(apiName, path, myInit).then(response => { - // Add your code here -}).catch(error => { - console.log(error.response) -}); +API.post(apiName, path, myInit) + .then(response => { + // Add your code here + }) + .catch(error => { + console.log(error.response); + }); ``` -##### prefix: ```Amplify Post** 2``` + +##### prefix: `Amplify Post** 2` + ```js -async function postData() { - let apiName = 'MyApiName'; - let path = '/path'; - let myInit = { // OPTIONAL - body: {}, // replace this with attributes you need - headers: {} // OPTIONAL - } - return await API.post(apiName, path, myInit); +async function postData() { + let apiName = 'MyApiName'; + let path = '/path'; + let myInit = { + // OPTIONAL + body: {}, // replace this with attributes you need + headers: {}, // OPTIONAL + }; + return await API.post(apiName, path, myInit); } postData(); ``` -##### prefix: ```Amplify Put**``` + +##### prefix: `Amplify Put**` + ```js let apiName = 'MyApiName'; // replace this with your api name. let path = '/path'; // replace this with the path you have configured on your API let myInit = { - body: {}, // replace this with attributes you need - headers: {} // OPTIONAL -} + body: {}, // replace this with attributes you need + headers: {}, // OPTIONAL +}; -API.put(apiName, path, myInit).then(response => { - // Add your code here -}).catch(error => { - console.log(error.response) -}); +API.put(apiName, path, myInit) + .then(response => { + // Add your code here + }) + .catch(error => { + console.log(error.response); + }); ``` -##### prefix: ```Amplify Put** 2``` + +##### prefix: `Amplify Put** 2` + ```js -async function putData() { - let apiName = 'MyApiName'; - let path = '/path'; - let myInit = { // OPTIONAL - body: {}, // replace this with attributes you need - headers: {} // OPTIONAL - } - return await API.put(apiName, path, myInit); +async function putData() { + let apiName = 'MyApiName'; + let path = '/path'; + let myInit = { + // OPTIONAL + body: {}, // replace this with attributes you need + headers: {}, // OPTIONAL + }; + return await API.put(apiName, path, myInit); } putData(); ``` -##### prefix: ```Amplify Put** 3``` + +##### prefix: `Amplify Put** 3` + ```js const params = { - body: { - itemId: '12345', - itemDesc: ' update description' - } -} + body: { + itemId: '12345', + itemDesc: ' update description', + }, +}; const apiResponse = await API.put('MyTableCRUD', '/manage-items', params); ``` -##### prefix: ```Amplify Delete**``` + +##### prefix: `Amplify Delete**` + ```js let apiName = 'MyApiName'; // replace this with your api name. let path = '/path'; //replace this with the path you have configured on your API -let myInit = { // OPTIONAL - headers: {} // OPTIONAL -} +let myInit = { + // OPTIONAL + headers: {}, // OPTIONAL +}; -API.del(apiName, path, myInit).then(response => { - // Add your code here -}).catch(error => { - console.log(error.response) -}); +API.del(apiName, path, myInit) + .then(response => { + // Add your code here + }) + .catch(error => { + console.log(error.response); + }); ``` -##### prefix: ```Amplify Delete** 2``` + +##### prefix: `Amplify Delete** 2` + ```js -async function deleteData() { - let apiName = 'MyApiName'; - let path = '/path'; - let myInit = { // OPTIONAL - headers: {} // OPTIONAL - } - return await API.del(apiName, path, myInit); +async function deleteData() { + let apiName = 'MyApiName'; + let path = '/path'; + let myInit = { + // OPTIONAL + headers: {}, // OPTIONAL + }; + return await API.del(apiName, path, myInit); } deleteData(); ``` -##### prefix: ```Amplify Head**``` + +##### prefix: `Amplify Head**` + ```js let apiName = 'MyApiName'; // replace this with your api name. let path = '/path'; //replace this with the path you have configured on your API -let myInit = { // OPTIONAL - headers: {} // OPTIONAL -} +let myInit = { + // OPTIONAL + headers: {}, // OPTIONAL +}; API.head(apiName, path, myInit).then(response => { - // Add your code here + // Add your code here }); ``` -##### prefix: ```Amplify Head** 2``` + +##### prefix: `Amplify Head** 2` + ```js -async function head() { - let apiName = 'MyApiName'; - let path = '/path'; - let myInit = { // OPTIONAL - headers: {} // OPTIONAL - } - return await API.head(apiName, path, myInit); +async function head() { + let apiName = 'MyApiName'; + let path = '/path'; + let myInit = { + // OPTIONAL + headers: {}, // OPTIONAL + }; + return await API.head(apiName, path, myInit); } head(); ``` -##### prefix: ```Amplify Custom Request Headers``` + +##### prefix: `Amplify Custom Request Headers` + ```js Amplify.configure({ - API: { - endpoints: [ - { - name: "sampleCloudApi", - endpoint: "https://xyz.execute-api.us-east-1.amazonaws.com/Development", - custom_header: async () => { - return { Authorization : 'token' } - // Alternatively, with Cognito User Pools use this: - // return { (await Auth.currentSession()).idToken.jwtToken } - } - } - ] - } + API: { + endpoints: [ + { + name: 'sampleCloudApi', + endpoint: 'https://xyz.execute-api.us-east-1.amazonaws.com/Development', + custom_header: async () => { + return { Authorization: 'token' }; + // Alternatively, with Cognito User Pools use this: + // return { (await Auth.currentSession()).idToken.jwtToken } + }, + }, + ], + }, }); ``` -##### prefix: ```Amplify Configuration For Graphql Server``` + +##### prefix: `Amplify Configuration For Graphql Server` + ```js +import Amplify, { API } from 'aws-amplify'; +import aws_config from './aws-exports'; -import Amplify, { API } from "aws-amplify"; -import aws_config from "./aws-exports"; - -// Considering you have an existing aws-exports.js configuration file +// Considering you have an existing aws-exports.js configuration file Amplify.configure(aws_config); // Configure a custom GraphQL endpoint Amplify.configure({ - API: { - graphql_endpoint: 'https:/www.example.com/my-graphql-endpoint' - } + API: { + graphql_endpoint: 'https:/www.example.com/my-graphql-endpoint', + }, }); - ``` -##### prefix: ```Amplify Set Custom Request Headers For Graphql ``` + +##### prefix: `Amplify Set Custom Request Headers For Graphql` + ```js Amplify.configure({ - API: { - graphql_headers: async () => ({ - 'My-Custom-Header': 'my value' - }) - } + API: { + graphql_headers: async () => ({ + 'My-Custom-Header': 'my value', + }), + }, }); ``` -##### prefix: ```Amplify Automated Configuration With Cli``` + +##### prefix: `Amplify Automated Configuration With Cli` + ```js -import aws_config from "./aws-exports"; +import aws_config from './aws-exports'; Amplify.configure(aws_config); ``` -##### prefix: ```Amplify Using Api_Key``` + +##### prefix: `Amplify Using Api_Key` + ```js let myAppConfig = { - // ... - 'aws_appsync_graphqlEndpoint': 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql', - 'aws_appsync_region': 'us-east-1', - 'aws_appsync_authenticationType': 'API_KEY', - 'aws_appsync_apiKey': 'da2-xxxxxxxxxxxxxxxxxxxxxxxxxx', - // ... -} + // ... + aws_appsync_graphqlEndpoint: + 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql', + aws_appsync_region: 'us-east-1', + aws_appsync_authenticationType: 'API_KEY', + aws_appsync_apiKey: 'da2-xxxxxxxxxxxxxxxxxxxxxxxxxx', + // ... +}; Amplify.configure(myAppConfig); ``` -##### prefix: ```Amplify Using Aws_Iam``` + +##### prefix: `Amplify Using Aws_Iam` + ```js let myAppConfig = { - // ... - 'aws_appsync_graphqlEndpoint': 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql', - 'aws_appsync_region': 'us-east-1', - 'aws_appsync_authenticationType': 'AWS_IAM', - // ... -} + // ... + aws_appsync_graphqlEndpoint: + 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql', + aws_appsync_region: 'us-east-1', + aws_appsync_authenticationType: 'AWS_IAM', + // ... +}; Amplify.configure(myAppConfig); ``` -##### prefix: ```Amplify Using Amazon_Cognito_User_Pools``` + +##### prefix: `Amplify Using Amazon_Cognito_User_Pools` + ```js let myAppConfig = { - // ... - 'aws_appsync_graphqlEndpoint': 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql', - 'aws_appsync_region': 'us-east-1', - 'aws_appsync_authenticationType': 'AMAZON_COGNITO_USER_POOLS', // You have configured Auth with Amazon Cognito User Pool ID and Web Client Id - // ... -} + // ... + aws_appsync_graphqlEndpoint: + 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql', + aws_appsync_region: 'us-east-1', + aws_appsync_authenticationType: 'AMAZON_COGNITO_USER_POOLS', // You have configured Auth with Amazon Cognito User Pool ID and Web Client Id + // ... +}; Amplify.configure(myAppConfig); ``` -##### prefix: ```Amplify Using Openid_Connect``` + +##### prefix: `Amplify Using Openid_Connect` + ```js let myAppConfig = { - // ... - 'aws_appsync_graphqlEndpoint': 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql', - 'aws_appsync_region': 'us-east-1', - 'aws_appsync_authenticationType': 'OPENID_CONNECT', // Before calling API.graphql(...) is required to do Auth.federatedSignIn(...) check authentication guide for details. - // ... -} + // ... + aws_appsync_graphqlEndpoint: + 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql', + aws_appsync_region: 'us-east-1', + aws_appsync_authenticationType: 'OPENID_CONNECT', // Before calling API.graphql(...) is required to do Auth.federatedSignIn(...) check authentication guide for details. + // ... +}; Amplify.configure(myAppConfig); ``` -##### prefix: ```Amplify Query Declarations``` + +##### prefix: `Amplify Query Declarations` + ```js const ListEvents = `query ListEvents { listEvents { @@ -710,7 +826,9 @@ const ListEvents = `query ListEvents { } }`; ``` -##### prefix: ```Amplify Query Declarations 2``` + +##### prefix: `Amplify Query Declarations 2` + ```js const GetEvent = `query GetEvent($id: ID! $nextToken: String) { getEvent(id: $id) { @@ -725,9 +843,11 @@ const GetEvent = `query GetEvent($id: ID! $nextToken: String) { } }`; ``` -##### prefix: ```Amplify Simple Query``` + +##### prefix: `Amplify Simple Query` + ```js -import Amplify, { API, graphqlOperation } from "aws-amplify"; +import Amplify, { API, graphqlOperation } from 'aws-amplify'; const ListEvents = `query ListEvents { listEvents { @@ -756,13 +876,16 @@ const GetEvent = `query GetEvent($id: ID! $nextToken: String) { const allEvents = await API.graphql(graphqlOperation(ListEvents)); // Query using a parameter -const oneEvent = await API.graphql(graphqlOperation(GetEvent, { id: 'some id' })); +const oneEvent = await API.graphql( + graphqlOperation(GetEvent, { id: 'some id' }) +); console.log(oneEvent); - ``` -##### prefix: ```Amplify Mutations``` + +##### prefix: `Amplify Mutations` + ```js -import Amplify, { API, graphqlOperation } from "aws-amplify"; +import Amplify, { API, graphqlOperation } from 'aws-amplify'; const CreateEvent = `mutation CreateEvent($name: String!, $when: String!, $where: String!, $description: String!) { createEvent(name: $name, when: $when, where: $where, description: $description) { @@ -776,18 +899,20 @@ const CreateEvent = `mutation CreateEvent($name: String!, $when: String!, $where // Mutation const eventDetails = { - name: 'Party tonight!', - when: '8:00pm', - where: 'Ballroom', - description: 'Coming together as a team!' + name: 'Party tonight!', + when: '8:00pm', + where: 'Ballroom', + description: 'Coming together as a team!', }; const newEvent = await API.graphql(graphqlOperation(CreateEvent, eventDetails)); console.log(newEvent); ``` -##### prefix: ```Amplify Subscriptions``` + +##### prefix: `Amplify Subscriptions` + ```js -import Amplify, { API, graphqlOperation } from "aws-amplify"; +import Amplify, { API, graphqlOperation } from 'aws-amplify'; const SubscribeToEventComments = `subscription SubscribeToEventComments($eventId: String!) { subscribeToEventComments(eventId: $eventId) { @@ -799,62 +924,69 @@ const SubscribeToEventComments = `subscription SubscribeToEventComments($eventId // Subscribe with eventId 123 const subscription = API.graphql( - graphqlOperation(SubscribeToEventComments, { eventId: '123' }) + graphqlOperation(SubscribeToEventComments, { eventId: '123' }) ).subscribe({ - next: (eventData) => console.log(eventData) + next: eventData => console.log(eventData), }); // Stop receiving data updates from the subscription subscription.unsubscribe(); - ``` -##### prefix: ```Amplify Subscriptions 2``` + +##### prefix: `Amplify Subscriptions 2` + ```js Amplify.configure({ - Auth: { - identityPoolId: 'xxx', - region: 'xxx' , - cookieStorage: { - domain: 'xxx', - path: 'xxx', - secure: true - } - }, - aws_appsync_graphqlEndpoint: 'xxxx', - aws_appsync_region: 'xxxx', - aws_appsync_authenticationType: 'xxxx', - aws_appsync_apiKey: 'xxxx' + Auth: { + identityPoolId: 'xxx', + region: 'xxx', + cookieStorage: { + domain: 'xxx', + path: 'xxx', + secure: true, + }, + }, + aws_appsync_graphqlEndpoint: 'xxxx', + aws_appsync_region: 'xxxx', + aws_appsync_authenticationType: 'xxxx', + aws_appsync_apiKey: 'xxxx', }); ``` -##### prefix: ```Amplify Signing Request With Iam``` + +##### prefix: `Amplify Signing Request With Iam` + ```js Amplify.configure({ - API: { - graphql_endpoint: 'https://www.example.com/my-graphql-endpoint', - graphql_endpoint_iam_region: 'my_graphql_apigateway_region' - } + API: { + graphql_endpoint: 'https://www.example.com/my-graphql-endpoint', + graphql_endpoint_iam_region: 'my_graphql_apigateway_region', + }, }); ``` -##### prefix: ```Amplify Connect``` + +##### prefix: `Amplify Connect` + ```js import React from 'react'; -import Amplify, { graphqlOperation } from "aws-amplify"; -import { Connect } from "aws-amplify-react"; +import Amplify, { graphqlOperation } from 'aws-amplify'; +import { Connect } from 'aws-amplify-react'; class App extends React.Component { - - render() { - - const ListView = ({ events }) => ( -
-

All events

-
    - {events.map(event =>
  • {event.name} ({event.id})
    • )} -
-
- ); - - const ListEvents = `query ListEvents { + render() { + const ListView = ({ events }) => ( +
+

All events

+
    + {events.map(event => ( +
  • + {event.name} ({event.id}) +
    • + ))} +
+
+ ); + + const ListEvents = `query ListEvents { listEvents { items { id @@ -864,298 +996,345 @@ class App extends React.Component { } }`; - return ( - - {({ data: { listEvents } }) => ( - - )} - - ) - } -} + return ( + + {({ data: { listEvents } }) => } + + ); + } +} export default App; - ``` -##### prefix: ```Amplify Connect 2``` -```js - { - console.log ( subscribeToEventComments); - return prev; }}> - {({ data: { listEvents } }) => ( - - )} - +##### prefix: `Amplify Connect 2` +```js + { + console.log(subscribeToEventComments); + return prev; + }} +> + {({ data: { listEvents } }) => ( + + )} + ``` -##### prefix: ```Amplify Connect 3``` + +##### prefix: `Amplify Connect 3` + ```js class CreateEvent extends React.Component { - // ... - // This component calls its onCreate prop to trigger the mutation - // ... + // ... + // This component calls its onCreate prop to trigger the mutation + // ... } - {({ mutation }) => ( - - )} - + {({ mutation }) => } +; ``` -##### prefix: ```Amplify Using Modularized Module``` + +##### prefix: `Amplify Using Modularized Module` + ```js import API from '@aws-amplify/api'; API.configure(); - ``` -##### prefix: ```Amplify Automated Setup``` + +##### prefix: `Amplify Automated Setup` + ```js import Amplify, { Auth } from 'aws-amplify'; import aws_exports from './aws-exports'; // specify the location of aws-exports.js file on your project Amplify.configure(aws_exports); ``` -##### prefix: ```Amplify Manual Setup``` + +##### prefix: `Amplify Manual Setup` + ```js import Amplify from 'aws-amplify'; Amplify.configure({ - Auth: { - - // REQUIRED only for Federated Authentication - Amazon Cognito Identity Pool ID - identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', - - // REQUIRED - Amazon Cognito Region - region: 'XX-XXXX-X', - - // OPTIONAL - Amazon Cognito User Pool ID - userPoolId: 'XX-XXXX-X_abcd1234', - - // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string) - userPoolWebClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3', - - // OPTIONAL - Enforce user authentication prior to accessing AWS resources or not - mandatorySignIn: false, - - // OPTIONAL - Configuration for cookie storage - cookieStorage: { - // REQUIRED - Cookie domain (only required if cookieStorage is provided) - domain: '.yourdomain.com', - // OPTIONAL - Cookie path - path: '/', - // OPTIONAL - Cookie expiration in days - expires: 365, - // OPTIONAL - Cookie secure flag - secure: true - }, - - // OPTIONAL - customized storage object - storage: new MyStorage(), - - // OPTIONAL - Manually set the authentication flow type. Default is 'USER_SRP_AUTH' - authenticationFlowType: 'USER_PASSWORD_AUTH' - } + Auth: { + // REQUIRED only for Federated Authentication - Amazon Cognito Identity Pool ID + identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', + + // REQUIRED - Amazon Cognito Region + region: 'XX-XXXX-X', + + // OPTIONAL - Amazon Cognito User Pool ID + userPoolId: 'XX-XXXX-X_abcd1234', + + // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string) + userPoolWebClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3', + + // OPTIONAL - Enforce user authentication prior to accessing AWS resources or not + mandatorySignIn: false, + + // OPTIONAL - Configuration for cookie storage + cookieStorage: { + // REQUIRED - Cookie domain (only required if cookieStorage is provided) + domain: '.yourdomain.com', + // OPTIONAL - Cookie path + path: '/', + // OPTIONAL - Cookie expiration in days + expires: 365, + // OPTIONAL - Cookie secure flag + secure: true, + }, + + // OPTIONAL - customized storage object + storage: new MyStorage(), + + // OPTIONAL - Manually set the authentication flow type. Default is 'USER_SRP_AUTH' + authenticationFlowType: 'USER_PASSWORD_AUTH', + }, }); ``` -##### prefix: ```Amplify Node.Js Support``` + +##### prefix: `Amplify Node.Js Support` + ```js global.fetch = require('node-fetch'); ``` -##### prefix: ```Amplify Sign In``` + +##### prefix: `Amplify Sign In` + ```js import { Auth } from 'aws-amplify'; Auth.signIn(username, password) - .then(user => console.log(user)) - .catch(err => console.log(err)); + .then(user => console.log(user)) + .catch(err => console.log(err)); // If MFA is enabled, sign-in should be confirmed with the congirmation code // `user` : Return object from Auth.signIn() -// `code` : Confirmation code +// `code` : Confirmation code // `mfaType` : MFA Type e.g. SMS, TOTP. Auth.confirmSignIn(user, code, mfaType) - .then(data => console.log(data)) - .catch(err => console.log(err)); + .then(data => console.log(data)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify Sign Up``` + +##### prefix: `Amplify Sign Up` + ```js import { Auth } from 'aws-amplify'; Auth.signUp({ - username, - password, - attributes: { - email, // optional - phone_number, // optional - E.164 number convention - // other custom attributes - }, - validationData: [] //optional - }) - .then(data => console.log(data)) - .catch(err => console.log(err)); + username, + password, + attributes: { + email, // optional + phone_number, // optional - E.164 number convention + // other custom attributes + }, + validationData: [], //optional +}) + .then(data => console.log(data)) + .catch(err => console.log(err)); // After retrieveing the confirmation code from the user Auth.confirmSignUp(username, code, { - // Optional. Force user confirmation irrespective of existing alias. By default set to True. - forceAliasCreation: true -}).then(data => console.log(data)) - .catch(err => console.log(err)); + // Optional. Force user confirmation irrespective of existing alias. By default set to True. + forceAliasCreation: true, +}) + .then(data => console.log(data)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify Sign Out``` + +##### prefix: `Amplify Sign Out` + ```js import { Auth } from 'aws-amplify'; Auth.signOut() - .then(data => console.log(data)) - .catch(err => console.log(err)); + .then(data => console.log(data)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify Change Password``` + +##### prefix: `Amplify Change Password` + ```js import { Auth } from 'aws-amplify'; Auth.currentAuthenticatedUser() - .then(user => { - return Auth.changePassword(user, 'oldPassword', 'newPassword'); - }) - .then(data => console.log(data)) - .catch(err => console.log(err)); + .then(user => { + return Auth.changePassword(user, 'oldPassword', 'newPassword'); + }) + .then(data => console.log(data)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify Forgot Password``` + +##### prefix: `Amplify Forgot Password` + ```js import { Auth } from 'aws-amplify'; Auth.forgotPassword(username) - .then(data => console.log(data)) - .catch(err => console.log(err)); + .then(data => console.log(data)) + .catch(err => console.log(err)); // Collect confirmation code and new password, then Auth.forgotPasswordSubmit(username, code, new_password) - .then(data => console.log(data)) - .catch(err => console.log(err)); + .then(data => console.log(data)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify Retrieve Current Session``` + +##### prefix: `Amplify Retrieve Current Session` + ```js let session = Auth.currentSession(); // CognitoUserSession => { idToken, refreshToken, accessToken } ``` -##### prefix: ```Amplify Managing Security Tokens``` + +##### prefix: `Amplify Managing Security Tokens` + ```js -var data = { UserPoolId : 'us-east-1_resgd', ClientId : 'xyz' }; +var data = { UserPoolId: 'us-east-1_resgd', ClientId: 'xyz' }; var userPool = new AmazonCognitoIdentity.CognitoUserPool(data); var cognitoUser = userPool.getCurrentUser(); if (cognitoUser != null) { - cognitoUser.getSession(function(err, session) { - if (err) { alert(err); return; } - - // Get refresh token before refreshing session - refresh_token = session.getRefreshToken(); - - if (AWS.config.credentials.needsRefresh()) { - cognitoUser.refreshSession(refresh_token, (err, session) => { - if(err) { console.log(err); } - else { - AWS.config.credentials.params.Logins['cognito-idp..amazonaws.com/'] = session.getIdToken().getJwtToken(); - AWS.config.credentials.refresh((err)=> { - if(err) { console.log(err); } - else{ - console.log("TOKEN SUCCESSFULLY UPDATED"); - } - }); - } - }); - } - }); + cognitoUser.getSession(function(err, session) { + if (err) { + alert(err); + return; + } + + // Get refresh token before refreshing session + refresh_token = session.getRefreshToken(); + + if (AWS.config.credentials.needsRefresh()) { + cognitoUser.refreshSession(refresh_token, (err, session) => { + if (err) { + console.log(err); + } else { + AWS.config.credentials.params.Logins[ + 'cognito-idp..amazonaws.com/' + ] = session.getIdToken().getJwtToken(); + AWS.config.credentials.refresh(err => { + if (err) { + console.log(err); + } else { + console.log('TOKEN SUCCESSFULLY UPDATED'); + } + }); + } + }); + } + }); } ``` -##### prefix: ```Amplify Using Withauthenticator Hoc``` + +##### prefix: `Amplify Using Withauthenticator Hoc` + ```js import { withAuthenticator } from 'aws-amplify-react'; // or 'aws-amplify-react-native'; ... export default withAuthenticator(App); ``` -##### prefix: ```Amplify Enabling Federated Identities``` + +##### prefix: `Amplify Enabling Federated Identities` + ```js const AppWithAuth = withAuthenticator(App); const federated = { - google_client_id: '', - facebook_app_id: '', - amazon_client_id: '' + google_client_id: '', + facebook_app_id: '', + amazon_client_id: '', }; -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render( + , + document.getElementById('root') +); ``` -##### prefix: ```Amplify Enabling Federated Identities 2``` + +##### prefix: `Amplify Enabling Federated Identities 2` + ```js import { Auth } from 'aws-amplify'; // Retrieve active Google user session const ga = window.gapi.auth2.getAuthInstance(); ga.signIn().then(googleUser => { - const { id_token, expires_at } = googleUser.getAuthResponse(); - const profile = googleUser.getBasicProfile(); - const user = { - email: profile.getEmail(), - name: profile.getName() - }; - - return Auth.federatedSignIn( - // Initiate federated sign-in with Google identity provider - 'google', - { - // the JWT token - token: id_token, - // the expiration time - expires_at - }, - // a user object - user - ).then(() => { - // ... - }); + const { id_token, expires_at } = googleUser.getAuthResponse(); + const profile = googleUser.getBasicProfile(); + const user = { + email: profile.getEmail(), + name: profile.getName(), + }; + + return Auth.federatedSignIn( + // Initiate federated sign-in with Google identity provider + 'google', + { + // the JWT token + token: id_token, + // the expiration time + expires_at, + }, + // a user object + user + ).then(() => { + // ... + }); }); ``` -##### prefix: ```Amplify Enabling Federated Identities 3``` + +##### prefix: `Amplify Enabling Federated Identities 3` + ```js import { Cache } from 'aws-amplify'; // Run this after the sign-in Cache.getItem('federatedInfo').then(federatedInfo => { - const { token } = federatedInfo; + const { token } = federatedInfo; }); ``` -##### prefix: ```Amplify Enabling Federated Identities 4``` + +##### prefix: `Amplify Enabling Federated Identities 4` + ```js import { Auth } from 'aws-amplify'; function refreshToken() { - // refresh the token here and get the new token info - // ...... - - return new Promise((res, rej) => { - const data = { - token, // the token from the provider - expires_at, // the timestamp for the expiration - identity_id, // optional, the identityId for the credentials - } - res(data); - }); + // refresh the token here and get the new token info + // ...... + + return new Promise((res, rej) => { + const data = { + token, // the token from the provider + expires_at, // the timestamp for the expiration + identity_id, // optional, the identityId for the credentials + }; + res(data); + }); } Auth.configure({ - refreshHandlers: { - 'developer': refreshToken - } -}) + refreshHandlers: { + developer: refreshToken, + }, +}); ``` -##### prefix: ```Amplify Rendering A Sign Out Button``` + +##### prefix: `Amplify Rendering A Sign Out Button` + ```js export default withAuthenticator(App, { includeGreetings: true }); ``` -##### prefix: ```Amplify Wrapping Your Component``` + +##### prefix: `Amplify Wrapping Your Component` + ```js import { Authenticator } from 'aws-amplify-react'; // or 'aws-amplify-react-native' ... @@ -1174,63 +1353,80 @@ class AppWithAuth extends Component { export default AppWithAuth; ``` -##### prefix: ```Amplify Show Your App After Sign-In``` + +##### prefix: `Amplify Show Your App After Sign-In` + ```js this._validAuthStates = ['signedIn']; ``` -##### prefix: ```Amplify Federated Identities (Social Sign-In)``` + +##### prefix: `Amplify Federated Identities (Social Sign-In)` + ```js import Expo from 'expo'; import Amplify, { Auth } from 'aws-amplify'; import { Authenticator } from 'aws-amplify-react-native'; export default class App extends React.Component { - async signIn() { - const { type, token, expires } = await Expo.Facebook.logInWithReadPermissionsAsync('YOUR_FACEBOOK_APP_ID', { - permissions: ['public_profile'], - }); - if (type === 'success') { - // sign in with federated identity - Auth.federatedSignIn('facebook', { token, expires_at: expires}, { name: 'USER_NAME' }) - .then(credentials => { - console.log('get aws credentials', credentials); - }).catch(e => { - console.log(e); - }); - } - } - - // ... - - render() { - return ( - - - - - ) - } + // ... + render() { + return ; + } } export default withOAuth(MyApp); ``` -##### prefix: ```Amplify Enabling Totp``` + +##### prefix: `Amplify Enabling Totp` + ```js import { Auth } from 'aws-amplify'; // To setup TOTP, first you need to get a `authorization code` from Amazon Cognito // `user` is the current Authenticated user -Auth.setupTOTP(user).then((code) => { - // You can directly display the `code` to the user or convert it to a QR code to be scanned. - // E.g., use following code sample to render a QR code with `qrcode.react` component: - // import QRCode from 'qrcode.react'; - // const str = "otpauth://totp/AWSCognito:"+ username + "?secret=" + code + "&issuer=" + issuer; - // +Auth.setupTOTP(user).then(code => { + // You can directly display the `code` to the user or convert it to a QR code to be scanned. + // E.g., use following code sample to render a QR code with `qrcode.react` component: + // import QRCode from 'qrcode.react'; + // const str = "otpauth://totp/AWSCognito:"+ username + "?secret=" + code + "&issuer=" + issuer; + // }); // ... // Then you will have your TOTP account in your TOTP-generating app (like Google Authenticator) // Use the generated one-time password to verify the setup -Auth.verifyTotpToken(user, challengeAnswer).then(() => { - - // don't forget to set TOTP as the preferred MFA method - Auth.setPreferredMFA(user, 'TOTP'); - // ... -}).catch( e => { - // Token is not verified -}); +Auth.verifyTotpToken(user, challengeAnswer) + .then(() => { + // don't forget to set TOTP as the preferred MFA method + Auth.setPreferredMFA(user, 'TOTP'); + // ... + }) + .catch(e => { + // Token is not verified + }); ``` -##### prefix: ```Amplify Setup Mfa Type``` + +##### prefix: `Amplify Setup Mfa Type` + ```js import { Auth } from 'aws-amplify'; // You can select preferred mfa type, for example: // Select TOTP as preferred -Auth.setPreferredMFA(user, 'TOTP').then((data) => { - console.log(data); - // ... -}).catch(e => {}); +Auth.setPreferredMFA(user, 'TOTP') + .then(data => { + console.log(data); + // ... + }) + .catch(e => {}); // Select SMS as preferred Auth.setPreferredMFA(user, 'SMS'); @@ -1326,7 +1533,9 @@ Auth.setPreferredMFA(user, 'SMS'); // Select no-mfa Auth.setPreferredMFA(user, 'NOMFA'); ``` -##### prefix: ```Amplify Letting User Select Mfa Type``` + +##### prefix: `Amplify Letting User Select Mfa Type` + ```js import Amplify from 'aws-amplify'; import awsmobile from './aws-exports'; @@ -1354,125 +1563,152 @@ class App extends Component { export default withAuthenticator(App, true); ``` -##### prefix: ```Amplify Switching Authentication Flow Type``` + +##### prefix: `Amplify Switching Authentication Flow Type` + ```js Auth.configure({ - // other configurations... - // ... - authenticationFlowType: 'USER_PASSWORD_AUTH', -}) + // other configurations... + // ... + authenticationFlowType: 'USER_PASSWORD_AUTH', +}); ``` -##### prefix: ```Amplify Creating A Captcha``` -```js -export const handler = async (event) => { - if (!event.request.session || event.request.session.length === 0) { - event.response.publicChallengeParameters = { - captchaUrl: "url/123.jpg", - }; - event.response.privateChallengeParameters = { - answer: "5", - }; - event.response.challengeMetadata = "CAPTCHA_CHALLENGE"; - } - return event; + +##### prefix: `Amplify Creating A Captcha` + +```js +export const handler = async event => { + if (!event.request.session || event.request.session.length === 0) { + event.response.publicChallengeParameters = { + captchaUrl: 'url/123.jpg', + }; + event.response.privateChallengeParameters = { + answer: '5', + }; + event.response.challengeMetadata = 'CAPTCHA_CHALLENGE'; + } + return event; }; ``` -##### prefix: ```Amplify Defining A Custom Challenge``` -```js -export const handler = async (event) => { - if (!event.request.session || event.request.session.length === 0) { - // If we don't have a session or it is empty then send a CUSTOM_CHALLENGE - event.response.challengeName = "CUSTOM_CHALLENGE"; - event.response.failAuthentication = false; - event.response.issueTokens = false; - } else if (event.request.session.length === 1 && event.request.session[0].challengeResult === true) { - // If we passed the CUSTOM_CHALLENGE then issue token - event.response.failAuthentication = false; - event.response.issueTokens = true; - } else { - // Something is wrong. Fail authentication - event.response.failAuthentication = true; - event.response.issueTokens = false; - } - return event; +##### prefix: `Amplify Defining A Custom Challenge` + +```js +export const handler = async event => { + if (!event.request.session || event.request.session.length === 0) { + // If we don't have a session or it is empty then send a CUSTOM_CHALLENGE + event.response.challengeName = 'CUSTOM_CHALLENGE'; + event.response.failAuthentication = false; + event.response.issueTokens = false; + } else if ( + event.request.session.length === 1 && + event.request.session[0].challengeResult === true + ) { + // If we passed the CUSTOM_CHALLENGE then issue token + event.response.failAuthentication = false; + event.response.issueTokens = true; + } else { + // Something is wrong. Fail authentication + event.response.failAuthentication = true; + event.response.issueTokens = false; + } + + return event; }; ``` -##### prefix: ```Amplify Defining A Custom Challenge 2``` + +##### prefix: `Amplify Defining A Custom Challenge 2` + ```js export const handler = async (event, context) => { - if (event.request.privateChallengeParameters.answer === event.request.challengeAnswer) { - event.response.answerCorrect = true; - } else { - event.response.answerCorrect = false; - } - - return event; + if ( + event.request.privateChallengeParameters.answer === + event.request.challengeAnswer + ) { + event.response.answerCorrect = true; + } else { + event.response.answerCorrect = false; + } + + return event; }; ``` -##### prefix: ```Amplify Using A Custom Challenge``` + +##### prefix: `Amplify Using A Custom Challenge` + ```js import { Auth } from 'aws-amplify'; -let challengeResponse = "the answer for the challenge"; +let challengeResponse = 'the answer for the challenge'; Auth.signIn(username) - .then(user => { - if (user.challengeName === 'CUSTOM_CHALLENGE') { - Auth.sendCustomChallengeAnswer(user, challengeResponse) - .then(user => console.log(user)) - .catch(err => console.log(err)); - } else { - console.log(user); - } - }) - .catch(err => console.log(err)); + .then(user => { + if (user.challengeName === 'CUSTOM_CHALLENGE') { + Auth.sendCustomChallengeAnswer(user, challengeResponse) + .then(user => console.log(user)) + .catch(err => console.log(err)); + } else { + console.log(user); + } + }) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify Working With User Attributes``` + +##### prefix: `Amplify Working With User Attributes` + ```js Auth.signUp({ - 'username': 'jdoe', - 'password': 'mysecurerandompassword#123', - 'attributes': { - 'email': 'me@domain.com', - 'phone_number': '+12128601234', // E.164 number convention - 'given_name': 'Jane', - 'family_name': 'Doe', - 'nickname': 'Jane' - } + username: 'jdoe', + password: 'mysecurerandompassword#123', + attributes: { + email: 'me@domain.com', + phone_number: '+12128601234', // E.164 number convention + given_name: 'Jane', + family_name: 'Doe', + nickname: 'Jane', + }, }); ``` -##### prefix: ```Amplify Working With User Attributes 2``` + +##### prefix: `Amplify Working With User Attributes 2` + ```js let user = await Auth.currentAuthenticatedUser(); ``` -##### prefix: ```Amplify Working With User Attributes 3``` + +##### prefix: `Amplify Working With User Attributes 3` + ```js let result = await Auth.updateUserAttributes(user, { - 'email': 'me@anotherdomain.com', - 'family_name': 'Lastname' + email: 'me@anotherdomain.com', + family_name: 'Lastname', }); console.log(result); // SUCCESS ``` -##### prefix: ```Amplify Working With User Attributes 4``` + +##### prefix: `Amplify Working With User Attributes 4` + ```js let result = await Auth.verifyCurrentUserAttributeSubmit('email', 'abc123'); ``` -##### prefix: ```Amplify Working With Aws Service Objects``` + +##### prefix: `Amplify Working With Aws Service Objects` + ```js import Route53 from 'aws-sdk/clients/route53'; -Auth.currentCredentials() - .then(credentials => { - const route53 = new Route53({ - apiVersion: '2013-04-01', - credentials: Auth.essentialCredentials(credentials) - }); +Auth.currentCredentials().then(credentials => { + const route53 = new Route53({ + apiVersion: '2013-04-01', + credentials: Auth.essentialCredentials(credentials), + }); - // more code working with route53 object - // route53.changeResourceRecordSets(); - }) + // more code working with route53 object + // route53.changeResourceRecordSets(); +}); ``` -##### prefix: ```Amplify Customize `Withauthenticator```` + +##### prefix: ``` Amplify Customize `Withauthenticator `` + ```js import React, { Component } from 'react'; import { ConfirmSignIn, ConfirmSignUp, ForgotPassword, SignIn, SignUp, VerifyContact, withAuthenticator } from 'aws-amplify-react'; @@ -1499,22 +1735,29 @@ export default withAuthenticator(App, false, [ ]); ``` -##### prefix: ```Amplify Using Modularized Module``` + +##### prefix: `Amplify Using Modularized Module` + ```js import Auth from '@aws-amplify/auth'; Auth.configure(); - ``` -##### prefix: ```Amplify Working With The Api``` + +##### prefix: `Amplify Working With The Api` + ```js import { Cache } from 'aws-amplify'; ``` -##### prefix: ```Amplify Setitem()``` + +##### prefix: `Amplify Setitem()` + ```js Cache.setItem(key, value, [options]); ``` -##### prefix: ```Amplify Setitem() 2``` + +##### prefix: `Amplify Setitem() 2` + ```js // Standard case Cache.setItem('key', 'value'); @@ -1526,16 +1769,22 @@ Cache.setItem('key', 'value', { priority: 3 }); const expiration = new Date(2018, 1, 1); Cache.setItem('key', 'value', { expires: expiration.getTime() }); ``` -##### prefix: ```Amplify Setitem() 3``` + +##### prefix: `Amplify Setitem() 3` + ```js Cache.setItem('mothersBirthday', 'July 18th', { priority: 1 }); Cache.setItem('breakfastFoodOrder', 'Pancakes', { priority: 3 }); ``` -##### prefix: ```Amplify Getitem()``` + +##### prefix: `Amplify Getitem()` + ```js Cache.getItem(key[, options]); ``` -##### prefix: ```Amplify Getitem() 2``` + +##### prefix: `Amplify Getitem() 2` + ```js // Standard case Cache.getItem('key'); @@ -1545,190 +1794,229 @@ Cache.getItem('key'); // After the callback function returns, the value will be set into cache. Cache.getItem('key', { callback: callback }); ``` -##### prefix: ```Amplify Removeitem()``` + +##### prefix: `Amplify Removeitem()` + ```js Cache.removeItem(key); ``` -##### prefix: ```Amplify Clear()``` + +##### prefix: `Amplify Clear()` + ```js Cache.clear(); ``` -##### prefix: ```Amplify Getallkeys()``` + +##### prefix: `Amplify Getallkeys()` + ```js Cache.getAllKeys(); ``` -##### prefix: ```Amplify Getcachecursize()``` + +##### prefix: `Amplify Getcachecursize()` + ```js const size = Cache.getCacheCurSize(); ``` -##### prefix: ```Amplify Configure()``` + +##### prefix: `Amplify Configure()` + ```js const config = { - itemMaxSize: 3000, // 3000 bytes - defaultPriority: 4 - // ... + itemMaxSize: 3000, // 3000 bytes + defaultPriority: 4, + // ... }; const myCacheConfig = Cache.configure(config); // You can modify parameters such as cache size, item default ttl and etc. // But don't try to modify keyPrefix which is the identifier of Cache. ``` -##### prefix: ```Amplify Createinstance()``` + +##### prefix: `Amplify Createinstance()` + ```js const config = { - itemMaxSize: 3000, // 3000 bytes - storage: window.sessionStorage // switch to sessionStorage - // ... + itemMaxSize: 3000, // 3000 bytes + storage: window.sessionStorage, // switch to sessionStorage + // ... }; const newCache = Cache.createInstance(config); // Please provide a new keyPrefix which is the identifier of Cache. ``` -##### prefix: ```Amplify Using Modularized Module``` + +##### prefix: `Amplify Using Modularized Module` + ```js import Cache from '@aws-amplify/cache'; Cache.configure(); - ``` -##### prefix: ```Amplify Installation``` + +##### prefix: `Amplify Installation` + ```js import { Hub } from 'aws-amplify'; ``` -##### prefix: ```Amplify Dispatch()``` + +##### prefix: `Amplify Dispatch()` + ```js Hub.dispatch('auth', { event: 'signIn', data: user }, 'Auth'); ``` -##### prefix: ```Amplify Listen()``` + +##### prefix: `Amplify Listen()` + ```js import { Hub, Logger } from 'aws-amplify'; const logger = new Logger('MyClass'); class MyClass { - constructor() { - Hub.listen('auth', this, 'MyListener'); - } - - // Default handler for listening events - onHubCapsule(capsule) { - const { channel, payload } = capsule; - if (channel === 'auth') { onAuthEvent(payload); } - } + constructor() { + Hub.listen('auth', this, 'MyListener'); + } + + // Default handler for listening events + onHubCapsule(capsule) { + const { channel, payload } = capsule; + if (channel === 'auth') { + onAuthEvent(payload); + } + } } ``` -##### prefix: ```Amplify Listening Authentication Events``` + +##### prefix: `Amplify Listening Authentication Events` + ```js import { Hub, Logger } from 'aws-amplify'; const alex = new Logger('Alexander_the_auth_watcher'); -alex.onHubCapsule = (capsule) => { - - switch (capsule.payload.event) { - - case 'signIn': - alex.error('user signed in'); //[ERROR] Alexander_the_auth_watcher - user signed in - break; - case 'signUp': - alex.error('user signed up'); - break; - case 'signOut': - alex.error('user signed out'); - break; - case 'signIn_failure': - alex.error('user sign in failed'); - break; - - } -} +alex.onHubCapsule = capsule => { + switch (capsule.payload.event) { + case 'signIn': + alex.error('user signed in'); //[ERROR] Alexander_the_auth_watcher - user signed in + break; + case 'signUp': + alex.error('user signed up'); + break; + case 'signOut': + alex.error('user signed out'); + break; + case 'signIn_failure': + alex.error('user sign in failed'); + break; + } +}; Hub.listen('auth', alex); ``` -##### prefix: ```Amplify Installation``` + +##### prefix: `Amplify Installation` + ```js import { I18n } from 'aws-amplify'; ``` -##### prefix: ```Amplify Setlanguage()``` + +##### prefix: `Amplify Setlanguage()` + ```js I18n.setLanguage('fr'); ``` -##### prefix: ```Amplify Putvocabularies()``` + +##### prefix: `Amplify Putvocabularies()` + ```js const dict = { - 'fr': { - 'Sign In': "Se connecter", - 'Sign Up': "S'inscrire" - }, - 'es': { - 'Sign In': "Registrarse", - 'Sign Up': "Regístrate" - } + fr: { + 'Sign In': 'Se connecter', + 'Sign Up': "S'inscrire", + }, + es: { + 'Sign In': 'Registrarse', + 'Sign Up': 'Regístrate', + }, }; I18n.putVocabularies(dict); ``` -##### prefix: ```Amplify Get()``` + +##### prefix: `Amplify Get()` + ```js I18n.get('Sign In'); ``` -##### prefix: ```Amplify Automated Setup``` + +##### prefix: `Amplify Automated Setup` + ```js import Amplify, { Auth } from 'aws-amplify'; import aws_exports from './aws-exports'; // specify the location of aws-exports.js file on your project Amplify.configure(aws_exports); ``` -##### prefix: ```Amplify Manual Setup``` + +##### prefix: `Amplify Manual Setup` + ```js import Amplify from 'aws-amplify'; Amplify.configure({ - Auth: { - identityPoolId: 'us-east-1:xxx-xxx-xxx-xxx-xxx', - region: 'us-east-1' - }, - Interactions: { - bots: { - "BookTripMOBILEHUB": { - "name": "BookTripMOBILEHUB", - "alias": "$LATEST", - "region": "us-east-1", - }, - } - } + Auth: { + identityPoolId: 'us-east-1:xxx-xxx-xxx-xxx-xxx', + region: 'us-east-1', + }, + Interactions: { + bots: { + BookTripMOBILEHUB: { + name: 'BookTripMOBILEHUB', + alias: '$LATEST', + region: 'us-east-1', + }, + }, + }, }); ``` -##### prefix: ```Amplify Working With The Api``` + +##### prefix: `Amplify Working With The Api` + ```js import { Interactions } from 'aws-amplify'; ``` -##### prefix: ```Amplify Send() Method``` + +##### prefix: `Amplify Send() Method` + ```js import { Interactions } from 'aws-amplify'; -let userInput = "I want to reserve a hotel for tonight"; +let userInput = 'I want to reserve a hotel for tonight'; // Provide a bot name and user input -const response = await Interactions.send("BookTripMOBILEHUB", userInput); +const response = await Interactions.send('BookTripMOBILEHUB', userInput); // Log chatbot response -console.log (response.message); +console.log(response.message); ``` -##### prefix: ```Amplify Oncomplete() Method``` -```js -var handleComplete = function (err, confirmation) { - if (err) { - alert('bot conversation failed') - return; - } - alert('done: ' + JSON.stringify(confirmation, null, 2)); +##### prefix: `Amplify Oncomplete() Method` - return 'Trip booked. Thank you! what would you like to do next?'; -} +```js +var handleComplete = function(err, confirmation) { + if (err) { + alert('bot conversation failed'); + return; + } + alert('done: ' + JSON.stringify(confirmation, null, 2)); -Interactions.onComplete(botName, handleComplete ); + return 'Trip booked. Thank you! what would you like to do next?'; +}; + +Interactions.onComplete(botName, handleComplete); ``` -##### prefix: ```Amplify Using With React``` + +##### prefix: `Amplify Using With React` + ```js import React, { Component } from 'react'; import Amplify, { Interactions } from 'aws-amplify'; @@ -1736,64 +2024,65 @@ import { ChatBot, AmplifyTheme } from 'aws-amplify-react'; // Imported default theme can be customized by overloading attributes const myTheme = { - ...AmplifyTheme, - sectionHeader: { - ...AmplifyTheme.sectionHeader, - backgroundColor: '#ff6600' - } + ...AmplifyTheme, + sectionHeader: { + ...AmplifyTheme.sectionHeader, + backgroundColor: '#ff6600', + }, }; Amplify.configure({ - Auth: { - // Use your Amazon Cognito Identity Pool Id - identityPoolId: 'us-east-1:xxx-xxx-xxx-xxx-xxx', - region: 'us-east-1' - }, - Interactions: { - bots: { - "BookTripMOBILEHUB": { - "name": "BookTripMOBILEHUB", - "alias": "$LATEST", - "region": "us-east-1", - }, - } - } + Auth: { + // Use your Amazon Cognito Identity Pool Id + identityPoolId: 'us-east-1:xxx-xxx-xxx-xxx-xxx', + region: 'us-east-1', + }, + Interactions: { + bots: { + BookTripMOBILEHUB: { + name: 'BookTripMOBILEHUB', + alias: '$LATEST', + region: 'us-east-1', + }, + }, + }, }); class App extends Component { - - handleComplete(err, confirmation) { - if (err) { - alert('Bot conversation failed') - return; - } - - alert('Success: ' + JSON.stringify(confirmation, null, 2)); - return 'Trip booked. Thank you! what would you like to do next?'; - } - - render() { - return ( -
-
-

Welcome to ChatBot Demo

-
- -
- ); - } + handleComplete(err, confirmation) { + if (err) { + alert('Bot conversation failed'); + return; + } + + alert('Success: ' + JSON.stringify(confirmation, null, 2)); + return 'Trip booked. Thank you! what would you like to do next?'; + } + + render() { + return ( +
+
+

Welcome to ChatBot Demo

+
+ +
+ ); + } } export default App; ``` -##### prefix: ```Amplify Using With React Native``` + +##### prefix: `Amplify Using With React Native` + ```js import React from 'react'; import { StyleSheet, Text, SafeAreaView, Alert, StatusBar } from 'react-native'; @@ -1801,88 +2090,90 @@ import Amplify from 'aws-amplify'; import { ChatBot } from 'aws-amplify-react-native'; Amplify.configure({ - Auth: { - identityPoolId: 'us-east-1:xxx-xxx-xxx-xxx-xxx', - region: 'us-east-1' - }, - Interactions: { - bots: { - "BookTripMOBILEHUB": { - "name": "BookTripMOBILEHUB", - "alias": "$LATEST", - "region": "us-east-1", - }, - } - } + Auth: { + identityPoolId: 'us-east-1:xxx-xxx-xxx-xxx-xxx', + region: 'us-east-1', + }, + Interactions: { + bots: { + BookTripMOBILEHUB: { + name: 'BookTripMOBILEHUB', + alias: '$LATEST', + region: 'us-east-1', + }, + }, + }, }); const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#fff', - alignItems: 'center', - justifyContent: 'center', - paddingTop: StatusBar.currentHeight, - }, + container: { + flex: 1, + backgroundColor: '#fff', + alignItems: 'center', + justifyContent: 'center', + paddingTop: StatusBar.currentHeight, + }, }); export default class App extends React.Component { - - state = { - botName: 'BookTripMOBILEHUB', - welcomeMessage: 'Welcome, what would you like to do today?', - }; - - constructor(props) { - super(props); - this.handleComplete = this.handleComplete.bind(this); - } - - handleComplete(err, confirmation) { - if (err) { - Alert.alert('Error', 'Bot conversation failed', [{ text: 'OK' }]); - return; - } - - Alert.alert('Done', JSON.stringify(confirmation, null, 2), [{ text: 'OK' }]); - - this.setState({ - botName: 'BookTripMOBILEHUB', - }); - - return 'Trip booked. Thank you! what would you like to do next?'; - } - - render() { - const { botName, showChatBot, welcomeMessage } = this.state; - - return ( - - - - ); - } - + state = { + botName: 'BookTripMOBILEHUB', + welcomeMessage: 'Welcome, what would you like to do today?', + }; + + constructor(props) { + super(props); + this.handleComplete = this.handleComplete.bind(this); + } + + handleComplete(err, confirmation) { + if (err) { + Alert.alert('Error', 'Bot conversation failed', [{ text: 'OK' }]); + return; + } + + Alert.alert('Done', JSON.stringify(confirmation, null, 2), [ + { text: 'OK' }, + ]); + + this.setState({ + botName: 'BookTripMOBILEHUB', + }); + + return 'Trip booked. Thank you! what would you like to do next?'; + } + + render() { + const { botName, showChatBot, welcomeMessage } = this.state; + + return ( + + + + ); + } } ``` -##### prefix: ```Amplify Installation``` + +##### prefix: `Amplify Installation` + ```js import { Logger } from 'aws-amplify'; - ``` -##### prefix: ```Amplify Working With The Api``` -```js +##### prefix: `Amplify Working With The Api` + +```js const logger = new Logger('foo'); logger.info('info bar'); @@ -1890,7 +2181,9 @@ logger.debug('debug bar'); logger.warn('warn bar'); logger.error('error bar'); ``` -##### prefix: ```Amplify Working With The Api 2``` + +##### prefix: `Amplify Working With The Api 2` + ```js try { ... @@ -1898,13 +2191,17 @@ try { logger.error('error happened', e); } ``` -##### prefix: ```Amplify Setting Logging Levels``` + +##### prefix: `Amplify Setting Logging Levels` + ```js const logger = new Logger('foo', 'INFO'); logger.debug('callback data', data); // this will not write the message ``` -##### prefix: ```Amplify Setting Logging Levels 2``` + +##### prefix: `Amplify Setting Logging Levels 2` + ```js Amplify.Logger.LOG_LEVEL = 'DEBUG'; @@ -1912,82 +2209,114 @@ const logger = new Logger('foo', 'INFO'); logger.debug('callback data', data); // this will write the message since the global log level is 'DEBUG' ``` -##### prefix: ```Amplify Setting Logging Levels 3``` + +##### prefix: `Amplify Setting Logging Levels 3` + ```js window.LOG_LEVEL = 'DEBUG'; ``` -##### prefix: ```Amplify Aws Iot``` + +##### prefix: `Amplify Aws Iot` + ```js import Amplify, { PubSub } from 'aws-amplify'; import { AWSIoTProvider } from 'aws-amplify/lib/PubSub/Providers'; ``` -##### prefix: ```Amplify Aws Iot 2``` + +##### prefix: `Amplify Aws Iot 2` + ```js // Apply plugin with configuration -Amplify.addPluggable(new AWSIoTProvider({ - aws_pubsub_region: '', - aws_pubsub_endpoint: 'wss://xxxxxxxxxxxxx.iot..amazonaws.com/mqtt', - })); +Amplify.addPluggable( + new AWSIoTProvider({ + aws_pubsub_region: '', + aws_pubsub_endpoint: + 'wss://xxxxxxxxxxxxx.iot..amazonaws.com/mqtt', + }) +); ``` -##### prefix: ```Amplify Aws Iot 3``` + +##### prefix: `Amplify Aws Iot 3` + ```js - Auth.currentCredentials().then((info) => { - const cognitoIdentityId = info._identityId; - }); +Auth.currentCredentials().then(info => { + const cognitoIdentityId = info._identityId; +}); ``` -##### prefix: ```Amplify Third Party Mqtt Providers``` + +##### prefix: `Amplify Third Party Mqtt Providers` + ```js import { PubSub } from 'aws-amplify'; -import { MqttOverWSProvider } from "aws-amplify/lib/PubSub/Providers"; +import { MqttOverWSProvider } from 'aws-amplify/lib/PubSub/Providers'; ``` -##### prefix: ```Amplify Third Party Mqtt Providers 2``` + +##### prefix: `Amplify Third Party Mqtt Providers 2` + ```js // Apply plugin with configuration -Amplify.addPluggable(new MqttOverWSProvider({ - aws_pubsub_endpoint: 'wss://iot.eclipse.org:443/mqtt', -})); +Amplify.addPluggable( + new MqttOverWSProvider({ + aws_pubsub_endpoint: 'wss://iot.eclipse.org:443/mqtt', + }) +); ``` -##### prefix: ```Amplify Subscribe To A Topic``` + +##### prefix: `Amplify Subscribe To A Topic` + ```js PubSub.subscribe('myTopic').subscribe({ - next: data => console.log('Message received', data), - error: error => console.error(error), - close: () => console.log('Done'), + next: data => console.log('Message received', data), + error: error => console.error(error), + close: () => console.log('Done'), }); ``` -##### prefix: ```Amplify Subscribe To Multiple Topics``` + +##### prefix: `Amplify Subscribe To Multiple Topics` + ```js -PubSub.subscribe(['myTopic1','myTopic1']).subscribe({ - // ... +PubSub.subscribe(['myTopic1', 'myTopic1']).subscribe({ + // ... }); ``` -##### prefix: ```Amplify Publish To A Topic``` + +##### prefix: `Amplify Publish To A Topic` + ```js await PubSub.publish('myTopic1', { msg: 'Hello to all subscribers!' }); ``` -##### prefix: ```Amplify Publish To A Topic 2``` + +##### prefix: `Amplify Publish To A Topic 2` + ```js -await PubSub.publish(['myTopic1','myTopic2'], { msg: 'Hello to all subscribers!' }); +await PubSub.publish(['myTopic1', 'myTopic2'], { + msg: 'Hello to all subscribers!', +}); ``` -##### prefix: ```Amplify Unsubscribe From A Topic``` + +##### prefix: `Amplify Unsubscribe From A Topic` + ```js const sub1 = PubSub.subscribe('myTopicA').subscribe({ - next: data => console.log('Message received', data), - error: error => console.error(error), - close: () => console.log('Done'), + next: data => console.log('Message received', data), + error: error => console.error(error), + close: () => console.log('Done'), }); sub1.unsubscribe(); // You will no longer get messages for 'myTopicA' ``` -##### prefix: ```Amplify Using Modularized Module``` + +##### prefix: `Amplify Using Modularized Module` + ```js import Pubsub from '@aws-amplify/pubsub'; Pubsub.configure(); - ``` -##### prefix: ```Amplify Setup For Ios``` + +##### prefix: `Amplify Setup For Ios` + ```js $ react-native init myapp $ cd myapp @@ -1996,7 +2325,9 @@ $ npm install aws-amplify --save $ npm install aws-amplify-react-native --save $ react-native link aws-amplify-react-native ``` -##### prefix: ```Amplify Configure Your App``` + +##### prefix: `Amplify Configure Your App` + ```js import { PushNotificationIOS } from 'react-native'; import Analytics from '@aws-amplify/analytics'; @@ -2004,14 +2335,16 @@ import PushNotification from '@aws-amplify/pushnotification'; // PushNotification need to work with Analytics Analytics.configure({ - // You configuration will come here... + // You configuration will come here... }); PushNotification.configure({ - appId: 'XXXXXXXXXXabcdefghij1234567890ab', + appId: 'XXXXXXXXXXabcdefghij1234567890ab', }); ``` -##### prefix: ```Amplify Configure Your App 2``` + +##### prefix: `Amplify Configure Your App 2` + ```js import { PushNotificationIOS } from 'react-native'; import Analytics from '@aws-amplify/analytics'; @@ -2023,141 +2356,166 @@ Analytics.configure(aws_exports); PushNotification.configure(aws_exports); ``` -##### prefix: ```Amplify Working With The Api``` + +##### prefix: `Amplify Working With The Api` + ```js // get the notification data -PushNotification.onNotification((notification) => { - // Note that the notification object structure is different from Android and IOS - console.log('in app notification', notification); +PushNotification.onNotification(notification => { + // Note that the notification object structure is different from Android and IOS + console.log('in app notification', notification); - // required on iOS only (see fetchCompletionHandler docs: https://facebook.github.io/react-native/docs/pushnotificationios.html) - notification.finish(PushNotificationIOS.FetchResult.NoData); + // required on iOS only (see fetchCompletionHandler docs: https://facebook.github.io/react-native/docs/pushnotificationios.html) + notification.finish(PushNotificationIOS.FetchResult.NoData); }); // get the registration token -PushNotification.onRegister((token) => { - console.log('in app registration', token); +PushNotification.onRegister(token => { + console.log('in app registration', token); }); ``` -##### prefix: ```Amplify Installation``` + +##### prefix: `Amplify Installation` + ```js import { ServiceWorker } from 'aws-amplify'; const myServiceWorker = new ServiceWorker(); ``` -##### prefix: ```Amplify Register()``` + +##### prefix: `Amplify Register()` + ```js // Register the service worker with `service-worker.js` with service worker scope `/`. myServiceWorker = await this.serviceWorker.register('/service-worker.js', '/'); ``` -##### prefix: ```Amplify Register() 2``` + +##### prefix: `Amplify Register() 2` + ```js - myServiceWorker.enablePush('BLx__NGvdasMNkjd6VYPdzQJVBkb2qafh') +myServiceWorker.enablePush('BLx__NGvdasMNkjd6VYPdzQJVBkb2qafh'); ``` -##### prefix: ```Amplify Handling A Push Notification``` + +##### prefix: `Amplify Handling A Push Notification` + ```js /** * Listen for incoming Push events */ -addEventListener('push', (event) => { - var data = {}; - console.log('[Service Worker] Push Received.'); - console.log(`[Service Worker] Push had this data: "${event.data.text()}"`); - - if (!(self.Notification && self.Notification.permission === 'granted')) - return; - - if (event.data) - data = event.data.json(); - - // Customize the UI for the message box - var title = data.title || "Web Push Notification"; - var message = data.message || "New Push Notification Received"; - var icon = "images/notification-icon.png"; - var badge = 'images/notification-badge.png'; - var options = { - body: message, - icon: icon, - badge: badge - }; - - event.waitUntil(self.registration.showNotification(title,options)); +addEventListener('push', event => { + var data = {}; + console.log('[Service Worker] Push Received.'); + console.log(`[Service Worker] Push had this data: "${event.data.text()}"`); + + if (!(self.Notification && self.Notification.permission === 'granted')) + return; + if (event.data) data = event.data.json(); + + // Customize the UI for the message box + var title = data.title || 'Web Push Notification'; + var message = data.message || 'New Push Notification Received'; + var icon = 'images/notification-icon.png'; + var badge = 'images/notification-badge.png'; + var options = { + body: message, + icon: icon, + badge: badge, + }; + + event.waitUntil(self.registration.showNotification(title, options)); }); ``` -##### prefix: ```Amplify Send()``` -```js - myServiceWorker.send({ - 'message': 'CleanAllCache' - }); +##### prefix: `Amplify Send()` +```js +myServiceWorker.send({ + message: 'CleanAllCache', +}); ``` -##### prefix: ```Amplify Receiving Messages ``` + +##### prefix: `Amplify Receiving Messages` + ```js - /** - * The message will receive messages sent from the application. - * This can be useful for updating a service worker or messaging - * other clients (browser restrictions currently exist) - * https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessage - */ - addEventListener('message', (event) => { - console.log('[Service Worker] Message Event: ', event.data) - }) - +/** + * The message will receive messages sent from the application. + * This can be useful for updating a service worker or messaging + * other clients (browser restrictions currently exist) + * https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessage + */ +addEventListener('message', event => { + console.log('[Service Worker] Message Event: ', event.data); +}); ``` -##### prefix: ```Amplify Using Modularized Module``` + +##### prefix: `Amplify Using Modularized Module` + ```js import { ServiceWorker } from '@aws-amplify/core'; - ``` -##### prefix: ```Amplify Automated Setup``` + +##### prefix: `Amplify Automated Setup` + ```js import Amplify, { Storage } from 'aws-amplify'; import aws_exports from './aws-exports'; Amplify.configure(aws_exports); ``` -##### prefix: ```Amplify Manual Setup``` + +##### prefix: `Amplify Manual Setup` + ```js import Amplify from 'aws-amplify'; Amplify.configure({ - Auth: { - identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', //REQUIRED - Amazon Cognito Identity Pool ID - region: 'XX-XXXX-X', // REQUIRED - Amazon Cognito Region - userPoolId: 'XX-XXXX-X_abcd1234', //OPTIONAL - Amazon Cognito User Pool ID - userPoolWebClientId: 'XX-XXXX-X_abcd1234', //OPTIONAL - Amazon Cognito Web Client ID - }, - Storage: { - bucket: '', //REQUIRED - Amazon S3 bucket - region: 'XX-XXXX-X', //OPTIONAL - Amazon service region - } + Auth: { + identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', //REQUIRED - Amazon Cognito Identity Pool ID + region: 'XX-XXXX-X', // REQUIRED - Amazon Cognito Region + userPoolId: 'XX-XXXX-X_abcd1234', //OPTIONAL - Amazon Cognito User Pool ID + userPoolWebClientId: 'XX-XXXX-X_abcd1234', //OPTIONAL - Amazon Cognito Web Client ID + }, + Storage: { + bucket: '', //REQUIRED - Amazon S3 bucket + region: 'XX-XXXX-X', //OPTIONAL - Amazon service region + }, }); - ``` -##### prefix: ```Amplify File Access Levels``` + +##### prefix: `Amplify File Access Levels` + ```js Storage.configure({ level: 'private' }); Storage.get('welcome.png'); // Gets the welcome.png belongs to current user ``` -##### prefix: ```Amplify File Access Levels 2``` + +##### prefix: `Amplify File Access Levels 2` + ```js Storage.get('welcome.png', { level: 'public' }); // Gets welcome.png in public space ``` -##### prefix: ```Amplify File Access Levels 3``` + +##### prefix: `Amplify File Access Levels 3` + ```js Storage.get('welcome.png'); // Get welcome.png in public space ``` -##### prefix: ```Amplify File Access Levels 4``` + +##### prefix: `Amplify File Access Levels 4` + ```js Storage.vault.get('welcome.png'); // Get the welcome.png belonging to current user ``` -##### prefix: ```Amplify Working With The Api``` + +##### prefix: `Amplify Working With The Api` + ```js import { Storage } from 'aws-amplify'; ``` -##### prefix: ```Amplify Working With The Api 2``` + +##### prefix: `Amplify Working With The Api 2` + ```js Storage.configure({ bucket: //Your bucket ARN; @@ -2165,53 +2523,60 @@ Storage.configure({ identityPoolId: //Specify your identityPoolId for Auth and Unauth access to your bucket; }); ``` -##### prefix: ```Amplify Put``` + +##### prefix: `Amplify Put` + ```js Storage.put('test.txt', 'Hello') - .then (result => console.log(result)) - .catch(err => console.log(err)); + .then(result => console.log(result)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify Put 2``` + +##### prefix: `Amplify Put 2` + ```js Storage.put('test.txt', 'Protected Content', { - level: 'protected', - contentType: 'text/plain' + level: 'protected', + contentType: 'text/plain', }) -.then (result => console.log(result)) -.catch(err => console.log(err)); + .then(result => console.log(result)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify Put 3``` + +##### prefix: `Amplify Put 3` + ```js Storage.put('test.txt', 'Private Content', { - level: 'private', - contentType: 'text/plain' + level: 'private', + contentType: 'text/plain', }) -.then (result => console.log(result)) -.catch(err => console.log(err)); + .then(result => console.log(result)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify Put 4``` + +##### prefix: `Amplify Put 4` + ```js class S3ImageUpload extends React.Component { - onChange(e) { - const file = e.target.files[0]; - Storage.put('example.png', file, { - contentType: 'image/png' - }) - .then (result => console.log(result)) - .catch(err => console.log(err)); - } - - render() { - return ( - this.onChange(e)} - /> - ) - } + onChange(e) { + const file = e.target.files[0]; + Storage.put('example.png', file, { + contentType: 'image/png', + }) + .then(result => console.log(result)) + .catch(err => console.log(err)); + } + + render() { + return ( + this.onChange(e)} /> + ); + } } ``` -##### prefix: ```Amplify Put 5``` + +##### prefix: `Amplify Put 5` + ```js import RNFetchBlob from 'react-native-fetch-blob'; @@ -2227,93 +2592,123 @@ readFile(imagePath).then(buffer => { console.log(e); }); ``` -##### prefix: ```Amplify Get``` + +##### prefix: `Amplify Get` + ```js Storage.get('test.txt') - .then(result => console.log(result)) - .catch(err => console.log(err)); + .then(result => console.log(result)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify Get 2``` + +##### prefix: `Amplify Get 2` + ```js Storage.get('test.txt', { level: 'protected' }) - .then(result => console.log(result)) - .catch(err => console.log(err)); + .then(result => console.log(result)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify Get 3``` + +##### prefix: `Amplify Get 3` + ```js -Storage.get('test.txt', { - level: 'protected', - identityId: 'xxxxxxx' // the identityId of that user +Storage.get('test.txt', { + level: 'protected', + identityId: 'xxxxxxx', // the identityId of that user }) -.then(result => console.log(result)) -.catch(err => console.log(err)); + .then(result => console.log(result)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify Get 4``` + +##### prefix: `Amplify Get 4` + ```js -Storage.get('test.txt', {level: 'private'}) - .then(result => console.log(result)) - .catch(err => console.log(err)); +Storage.get('test.txt', { level: 'private' }) + .then(result => console.log(result)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify Get 5``` + +##### prefix: `Amplify Get 5` + ```js -Storage.get('test.txt', {expires: 60}) - .then(result => console.log(result)) - .catch(err => console.log(err)); +Storage.get('test.txt', { expires: 60 }) + .then(result => console.log(result)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify Remove``` + +##### prefix: `Amplify Remove` + ```js Storage.remove('test.txt') - .then(result => console.log(result)) - .catch(err => console.log(err)); + .then(result => console.log(result)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify Remove 2``` + +##### prefix: `Amplify Remove 2` + ```js -Storage.remove('test.txt', {level: 'protected'}) - .then(result => console.log(result)) - .catch(err => console.log(err)); +Storage.remove('test.txt', { level: 'protected' }) + .then(result => console.log(result)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify Remove 3``` + +##### prefix: `Amplify Remove 3` + ```js -Storage.remove('test.txt', {level: 'private'}) - .then(result => console.log(result)) - .catch(err => console.log(err)); +Storage.remove('test.txt', { level: 'private' }) + .then(result => console.log(result)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify List``` + +##### prefix: `Amplify List` + ```js Storage.list('photos/') - .then(result => console.log(result)) - .catch(err => console.log(err)); + .then(result => console.log(result)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify List 2``` + +##### prefix: `Amplify List 2` + ```js Storage.list('photos/', { level: 'protected' }) - .then(result => console.log(result)) - .catch(err => console.log(err)); + .then(result => console.log(result)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify List 3``` + +##### prefix: `Amplify List 3` + ```js -Storage.list('photos/', { - level: 'protected', - identityId: 'xxxxxxx' // the identityId of that user +Storage.list('photos/', { + level: 'protected', + identityId: 'xxxxxxx', // the identityId of that user }) -.then(result => console.log(result)) -.catch(err => console.log(err)); + .then(result => console.log(result)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify List 4``` + +##### prefix: `Amplify List 4` + ```js -Storage.list('photos/', {level: 'private'}) - .then(result => console.log(result)) - .catch(err => console.log(err)); +Storage.list('photos/', { level: 'private' }) + .then(result => console.log(result)) + .catch(err => console.log(err)); ``` -##### prefix: ```Amplify Tracking Events``` + +##### prefix: `Amplify Tracking Events` + ```js -Storage.configure({ track: true }) +Storage.configure({ track: true }); ``` -##### prefix: ```Amplify Tracking Events 2``` + +##### prefix: `Amplify Tracking Events 2` + ```js Storage.get('welcome.png', { track: true }); ``` -##### prefix: ```Amplify Customize Upload Path ``` + +##### prefix: `Amplify Customize Upload Path` + ```js const customPrefix: { public: 'myPublicPrefix/', @@ -2328,10 +2723,11 @@ Storage.put('test.txt', 'Hello', { .then (result => console.log(result)) .catch(err => console.log(err)); ``` -##### prefix: ```Amplify Using Modularized Module``` + +##### prefix: `Amplify Using Modularized Module` + ```js import Storage from '@aws-amplify/storage'; Storage.configure(); - ``` diff --git a/vscode/src/extension.ts b/vscode/src/extension.ts index 9d73f2e1af2..3ee0d83af74 100644 --- a/vscode/src/extension.ts +++ b/vscode/src/extension.ts @@ -28,4 +28,4 @@ export function activate(context: vscode.ExtensionContext) { // this method is called when your extension is deactivated export function deactivate() { } -*/ \ No newline at end of file +*/ diff --git a/vscode/vsc-extension-quickstart.md b/vscode/vsc-extension-quickstart.md index 8a91f638e8f..df64e9212b9 100644 --- a/vscode/vsc-extension-quickstart.md +++ b/vscode/vsc-extension-quickstart.md @@ -1,33 +1,38 @@ # Welcome to your VS Code Extension ## What's in the folder -* This folder contains all of the files necessary for your extension. -* `package.json` - this is the manifest file in which you declare your extension and command. -The sample plugin registers a command and defines its title and command name. With this information -VS Code can show the command in the command palette. It doesn’t yet need to load the plugin. -* `src/extension.ts` - this is the main file where you will provide the implementation of your command. -The file exports one function, `activate`, which is called the very first time your extension is -activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`. -We pass the function containing the implementation of the command as the second parameter to -`registerCommand`. + +- This folder contains all of the files necessary for your extension. +- `package.json` - this is the manifest file in which you declare your extension and command. + The sample plugin registers a command and defines its title and command name. With this information + VS Code can show the command in the command palette. It doesn’t yet need to load the plugin. +- `src/extension.ts` - this is the main file where you will provide the implementation of your command. + The file exports one function, `activate`, which is called the very first time your extension is + activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`. + We pass the function containing the implementation of the command as the second parameter to + `registerCommand`. ## Get up and running straight away -* Press `F5` to open a new window with your extension loaded. -* Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`. -* Set breakpoints in your code inside `src/extension.ts` to debug your extension. -* Find output from your extension in the debug console. + +- Press `F5` to open a new window with your extension loaded. +- Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`. +- Set breakpoints in your code inside `src/extension.ts` to debug your extension. +- Find output from your extension in the debug console. ## Make changes -* You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`. -* You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes. + +- You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`. +- You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes. ## Explore the API -* You can open the full set of our API when you open the file `node_modules/vscode/vscode.d.ts`. + +- You can open the full set of our API when you open the file `node_modules/vscode/vscode.d.ts`. ## Run tests -* Open the debug viewlet (`Ctrl+Shift+D` or `Cmd+Shift+D` on Mac) and from the launch configuration dropdown pick `Launch Tests`. -* Press `F5` to run the tests in a new window with your extension loaded. -* See the output of the test result in the debug console. -* Make changes to `test/extension.test.ts` or create new test files inside the `test` folder. - * By convention, the test runner will only consider files matching the name pattern `**.test.ts`. - * You can create folders inside the `test` folder to structure your tests any way you want. + +- Open the debug viewlet (`Ctrl+Shift+D` or `Cmd+Shift+D` on Mac) and from the launch configuration dropdown pick `Launch Tests`. +- Press `F5` to run the tests in a new window with your extension loaded. +- See the output of the test result in the debug console. +- Make changes to `test/extension.test.ts` or create new test files inside the `test` folder. + - By convention, the test runner will only consider files matching the name pattern `**.test.ts`. + - You can create folders inside the `test` folder to structure your tests any way you want.