Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to How to setup aws amplify in a vue project
Similar to How to setup aws amplify in a vue project (20)
Recently uploaded
Recently uploaded (20)
How to setup aws amplify in a vue project
- 1. How To setup AWS Amplify in a Vue Project 2020/12/26 Kou
- 2. Hello! I am Kou I am a front-end engineer, now working for MARKET ENTERPRISE Company. @xysama 2 We Are Hiring!!
- 3. What I will talk about 3 1. Introduction to Amplify 2. Prerequisites 3. Make It Work 4. High Level Steps
- 4. Introduction to Amplify 4 An open-source framework that you can use to build cloud-powered mobile and web apps ▧ Quick CLI setup and configuration ▧ UI components like authorization and storage ▧ Local configurations, deployment of your app’s backend logic
- 5. 5 DEMO More info : https://docs.amplify.aws/
- 6. Prerequisites 6 ▧ Node.js v10.x or later ▧ npm v5.x or later ▧ git v2.14.1 or later Before we begin, make sure you have the following installed: Any other thing ? If you don’t have an AWS account, you’ll need to create one
- 7. “Then Getting Started ! 7
- 8. 1. Install and configure the Amplify CLI command line tool for configuring and integrating cloud services. 8 npm install -g @aws-amplify/cli amplify configure Specify the AWS Region ? region: # Your preferred region Specify the username of the new IAM user: ? user name: # User name for Amplify IAM user Complete the user creation using the AWS console
- 9. npm install -g @vue/cli vue create myapp ? Please pick a preset: (Use arrow keys) ❯ default (babel, eslint) <-- Manually select features cd myapp 2. Creating & configuring the Vue project To get started, we’ll first install the Vue CLI & create a new project, (selecting the defaults will work for this project) 9
- 10. 3. Initialize a new backend Now we can create the necessary backend services : 10 myapp
- 11. npm install aws-amplify @aws-amplify/ui-vue 4. Install Amplify libraries The @aws-amplify/ui-vue package is a set of Vue-specific UI components that make it easy to integrate functionality like end- to-end authentication flows. 11
- 12. import Amplify from 'aws-amplify'; import '@aws-amplify/ui-vue'; import aws_exports from './aws-exports'; Amplify.configure(aws_exports); 5. Set up frontend Next, we need to configure Amplify on the frontend so that we can use it to interact with our backend services. 12 src/main.js
- 14. “Setup Finished ! 14 Now Amplify has been successfully configured.
- 15. 15 High Level Steps ▧ Create GraphQL API and database ▧ Deploy your GraphQL API ▧ Generate frontend code for the GraphQL API ▧ Connect frontend to API
- 16. 16 DEMO More info : https://docs.amplify.aws/
Editor's Notes
- amplify configure will ask you to sign into the AWS Console. Once you’re signed in, Amplify CLI will ask you to create an IAM user.
- that we have a running Vue app, it’s time to set up Amplify so that From the root of the project, run:
- that we have a running Vue app, it’s time to set up Amplify so that From the root of the project, run:
- Open src/main.js and add the following code below the last import:
- Open src/main.js and add the following code below the last import:
- As you add or remove categories and make updates to your backend configuration using the Amplify CLI, the configuration in aws-exports.js will update automatically.