This application illustrates how to use the Amazon Amplify with vue.js, it includes signup, signin, signout, recover password and account verification using email or sms codes. It uses bootstrap-vue for layout.
This example application currently illustrates the following:
Demo version is located at https://cognito-vue-bootstrapv2.wolfe.id.au/
Before you start have a read over What is Amazon Cognito?
To setup this project you first need to configure an aws mobile project using the following snapshot CognitoVue.
For more information on this process see Exporting and Importing AWS Mobile Hub Projects
Once you have imported the project you will have created:
Click on the integrate button in your aws mobile project, the download and extract the cloud config zip file, find aws-exports.js
inside, and replace this file in src/
directory.
I use yarn to build and run this project.
# install dependencies
yarn install
# serve with hot reload at localhost:8080
yarn serve
# build for production with minification
yarn build
Sync all the files from your dist
directory up to the S3 hosting bucket within your AWS Mobile project using the following command.
aws --region ap-southeast-2 s3 sync dist/ s3://cognitovuebootstrap-hosting-mobilehub-XXXXXXXXXX/ --delete --acl public-read
To host a website on a custom URL using AWS mobile I have found some changes to the current setup. Navigating to the buckets and CDN configuration is done via the Hosting And Streaming
panel in the mobile project UI.
/index.html
in cloudfrontalias
pointing to your Cloudfront distribution, then update the origin domain name to match the FQDN.For a more detailed explanation on how things work, checkout:
This project is released under the Apache License, Version 2.0.