English Night 6 ~Frontend Night!~ presentation from Kou

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

13. 13
aws-exports.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/

17. 17
Thanks!
Any questions?