Giter Club home page Giter Club logo

full-stack-serverless-app-with-vue-and-aws-amplify's Introduction

full-stack-serverless-app-with-Vue-and-AWS-Amplify

I'm going to follow a tutorial I just found on Medium authored by @gerard.sans

Here is the url https://medium.com/@gerard.sans/build-your-first-full-stack-serverless-app-with-vue-and-aws-amplify-9ed7ef9e9926

This is basically a Full-stack serverless app using Vue and AWS Amplify, with full authorization flow using the authenticator component.

Pre requisites:

  • Node.js v10.x or later
  • npm v5.x or later
  • git bash (if using windows)

Install dependencies

Run the following command

./install-dependencies.sh

Configure amplify

sign up to your AWS Account and configure it, follow instructions on the following link:

https://docs.amplify.aws/start/getting-started/installation/q/integration/vue#option-2-follow-the-instructions

amplify configure

Setting up your Amplify project

AWS Amplify allows you to create different environments to define your preferences and settings. For any new project you need to run the command below and answer as follows:

amplify init
  • Enter a name for the project: amplify-app
  • Enter a name for the environment: dev
  • Choose your default editor: Visual Studio Code
  • Please choose the type of app that you’re building javascript
  • What javascript framework are you using vue
  • Source Directory Path: src
  • Distribution Directory Path: dist
  • Build Command: npm run-script build
  • Start Command: npm run-script serve
  • Do you want to use an AWS profile? Yes
  • Please choose the profile you want to use default

Adding authentication

amplify add auth

When prompted choose:

  • Do you want to use default authentication and security configuration?: Default - configuration
  • How do you want users to be able to sign in when using your Cognito User Pool?: Username
  • Do you want to configure advanced settings? No

Pushing changes to the cloud

By running the push command, the cloud resources will be provisioned and created in your AWS account.

amplify push

To quickly check your newly created Cognito User Pool you can run

amplify status

Install and run the vue app

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

To access the AWS Cognito Console at any time, go to the dashboard at https://console.aws.amazon.com/cognito. Also be sure that your region is set correctly.

To view any users that were created, go back to the Cognito Dashboard at https://console.aws.amazon.com/cognito. Also be sure that your region is set correctly. Alternatively you can also use: amplify console auth

Accessing User Data

To access the user’s info using the Auth API. This will return a promise.

import { Auth } from 'aws-amplify';
Auth.currentAuthenticatedUser().then(console.log)

Publishing your app

To deploy and host your app on AWS, we can use the hosting category.

amplify add hosting

  • Select the plugin module to execute: Amazon CloudFront and S3
  • Select the environment setup: DEV
  • hosting bucket name YOURBUCKETNAME
  • index doc for the website index.html
  • error doc for the website index.html

Now, everything is set up & we can publish it:

amplify publish

Cleaning up Services

To wipe out all resources from your project and your AWS Account, you can do this by running: amplify delete

full-stack-serverless-app-with-vue-and-aws-amplify's People

Contributors

jomendez avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.