now has built-in components for the library. This means that you can scaffold out pre-configured components for functionality like authentication flows, chatbots, & photo-pickers with just a few lines of code. AWS Amplify Vue You can also implement serverless GraphQL APIs, Lambda functions, analytics, hosting, VR / AR scenes & more using the Amplify CLI & library with Vue. AWS AppSync In this tutorial, we’ll walk through how to set up authentication, storage, and a GraphQL API using AWS Amplify & Vue. Getting Started Creating & configuring the Vue project To get started, we’ll first install the Vue CLI & create a new project: npm install -g @vue/cli Next, we’ll create a new Vue project: vue create vue-serverless-project For the preset, choose babel. Next, we’ll change into the new directory & install the AWS Amplify libraries: cd vue-serverless-project yarn add aws-amplify aws-amplify-vue Installing & configuring the Amplify CLI Now that the Vue project has been created, we can install the AWS Amplify CLI: npm install -g @aws-amplify/cli Next, we’ll need to configure the CLI with an AWS IAM user. To do so, we can run the command: configure amplify configure For a walkthrough of how to configure the CLI, check out video. this Now that the CLI has been installed & configured, we can create a new Amplify project inside the root directory of the new Vue project we just created: amplify init ☝️ Here you can choose the text editor you are using & then choose the default option for the rest of the choices. Adding Authentication Now that the Vue project is created & the Amplify project has been initialized, we can begin adding & using services. The first service we’d like to add is authentication. To add a service we can run the command, so we’ll run the following command: amplify add amplify add auth Do you want to use the default authentication and configuration? security Y Next, we’ll run the push command to create & enable the resources in our account: amplify push Configuring the Vue Project Now, the authentication service has been created in our account & we can begin using it. You can now view the Cognito authentication service anytime in your account . here The next thing we need to do is configure the actual Vue project to recognize & use the new Amplify project. To do this, we open & add the following: main.js import Amplify, * as AmplifyModules from 'aws-amplify';import { AmplifyPlugin } from 'aws-amplify-vue';import aws_exports from './aws-exports';Amplify.configure(aws_exports); Vue.use(AmplifyPlugin, AmplifyModules); Now, let’s open App.vue and add the authentication flow. To get started, let’s update App.vue to have the following code: Now, save the file & run the app: vue serve We now see both a sign in / sign up form as well as a sign out button. The component is what renders the sign in / sign up form, & the component is what renders the sign out button. <amplify-authenticator> <amplify-sign-out> This is a good start, but really we only want to show the sign out button if the user is already signed in & the sign up /sign in form if the user is already signed in. Let’s update our code to maintain some state that will control what is and isn’t shown. not In the above code, we’ve set some initial state to set the property to false. When the app loads, we check to see if the user has been signed in, if so we then update the value to be true in order to show our application as well as the sign out button. signedIn signedIn If the user is not signed in, then we show the form. We also create an event listener that will update the value whenever the user signs in or out. signedIn If you’re interested in learning how to create protected routes using Vue Router & AWS Amplify, this is pretty easy & I’ve created some sample code for you to check out. here Amplify also has an Auth class if you’d like to build your own custom authentication flow. There are over 30 methods available on the Auth class including , , , & forgotPassword(). To view all of the available methods, check out the docs & the API . signUp() confirmSignUp() signIn() confirmSignIn() here here Adding a Photo Picker with Amazon S3 The next thing we’ll do is add storage using Amazon S3. One very popular use case for S3 is storing media such as video & image files. Since that is the case, let’s look at how to implement a photo picker using the preconfigured Vue components. To add storage with S3, we’ll again run the command: amplify add amplify add storage Please select from one of the below mentioned services: Content (Images, audio, video, etc.) Please provide a friendly name for your resource: <SOMENAME> Please provide bucket name: <UNIQUEBUCKETNAME> Who should have access: Auth users only What kind of access do you want for Authenticated users: read/write Now, we can run amplify push to create the resources in our account: amplify push You can view the S3 buckets in your account at any time by visiting the console . here Now, the resource has been created & we can begin interacting with it! To do so, we’ll first create a photo picker & photo album! The components we will be using for this will be & . <amplify-photo-picker> <amplify-s3-album> The main things to note here are that in our script, we create a configuration object called photoPickerConfig, setting the path for the images we are uploading. In this case, we choose to upload them to a folder called images. In the S3 album component we also pass the same file path, images/, so that we will be looking in the correct location for the images we have already uploaded. We should now still see our Sign Out button at the top along with a way to choose photos to upload. Below the upload form we should see any photos that we have added to the S3 bucket. In addition to this preconfigured Vue component, we can use the Storage class directly to upload & download images: import Storage.list('images/') .then(data => console.log('images from S3: ', data)) .catch(err => console.log('error')) To learn more about the Storage class & to view all available methods, check out the docs & the API . here here GraphQL with AWS AppSync The first two example we looked at were using the preconfigured UI components for Vue, so let’s change things up a bit and use one of the core Amplify features, the feature. API With the feature we can create either REST or GraphQL APIs & also interact with them from any JavaScript or native app. API In this section, let’s create a coffee shop API that will keep up with our favorite coffee shops, their location & their rating. Creating the API To create the API, we’ll run the command, choosing GraphQL as the type: amplify add amplify add api Please select from one of the below mentioned services: GraphQL Provide API name: walkthroughcoffeeshopapi Choose an authorization type for the API: API key Do you have an annotated GraphQL schema? No Do you want a guided schema creation? Y What best describes your project: Single object with fields (e.g., “Todo” with ID, name, description) Do you want to edit the schema now? (Y/n) Y Here, edit the schema to be the following: type CoffeeShop {id: ID!name: String!description: Stringlocation: Stringrating: Int} @model Now, to create the resources in our account we’ll run : amplify push amplify push Do you want to generate code for your newly created GraphQL API No If you would like to have your queries, mutations & subscriptions automatically generated for you, you can choose yes in the above step. Because we are only using a couple, I decided we would write them from scratch. Now, the AWS AppSync GraphQL API has been created & we can begin interacting with it! You can view the AWS AppSync console at any time by visiting the console . here The UI for the app will look like this: We will still have the Sign Out button, but we will also have a form that will allow users to add new coffee shops to their list. We will also render all of the items that have been saved in the API, rendering their name & location. We will break this code into three parts: HTML, JavaScript, & CSS. Let’s first take a look at the HTML: Here, we have two inputs & a button for a form. We’ve added a few classes for styling, we’ve bound a click handler ( ) to the button & also added models to the inputs to keep up with user input as the user types. createCoffeeShop We’ve also included list using v-for to iterate over all of the coffee shops that we will be storing in our App. Next, let’s take a look at the JavaScript: There’s a lot going on here, so let’s walk through it: We import & from Amplify: API graphqlOperation import { Auth, API, graphqlOperation } from 'aws-amplify' We define the query & the mutation we will be using For the initial data in our component, we define a name & description property set to empty strings as well as a property set to an empty array. coffeeShops In the method, we call the API to fetch the list of restaurants, & then update the local data with the data from the API ( array). beforeCreate coffeeShops In the method, we first check to make sure that the name & description properties are not empty. We then create a new object ( ) with the info we will need for the mutation (name & description). We update the local array with the new data, & then make the API call to trigger the mutation & therefore creating a new item in our API. createCoffeeShop coffeeShop coffeeShops coffeeShop In addition to doing mutations & queries, we can also set up subscriptions for real-time data. To view the full documentation for the GraphQL client, click . here AWS AppSync has an additional GraphQL client that has a similar API to the Apollo client & offers first-class support for offline functionality out of the box! To check it out, go to the docs . here Conclusion In addition to working with GraphQL, storage, & authentication, AWS Amplify enables chat-bots, analytics, AR / VR, internationalization, Lambda functions & more. serverless The library is under development so look out for additional features as well in the future! To learn more, check out . the docs
