nueverest / vue_flask

Vue.js, Flask, and Firebase

vue_flask

Responsive AWS Serverless SPA using Vue.js, Flask, Firebase, and more.

Live Serverless Demo

https://kw4udfbos9.execute-api.us-west-2.amazonaws.com/production

Benefits of Serverless

Serverless operations do use a server, but it only runs 20-60 milliseconds at a time.

• High Performance
• High Availability
• High Scalability
• No Server and associated infrastructure to understand and maintain.
• Easy undeployment

Disadvantage of Serverless

• Deployment and Update actions require the entire project to be uploaded. Even a tiny change such as adding one character to a file requires the full project to be uploaded. Projects take minutes to upload.

Technologies Used

• Vue.js - Frontend Javascript Framework https://vuejs.org/
• Vuefire - Firebase Anonymous Authentication https://github.com/chrisbraddock/vuefire-auth-demo
• Flask - Python Web Framework http://flask.pocoo.org/
• Flask-S3 - Serve Static Media from AWS S3. https://flask-s3.readthedocs.io/en/latest/
• Firebase - Realtime Persistent Datastore https://firebase.google.com/
• Zurb Foundation 6 - CSS Frontend Framework http://foundation.zurb.com/
• Blowdrycss - Python Atomic CSS compiler https://github.com/nueverest/blowdrycss
• Google Material Icons - Icons that behave like fonts https://google.github.io/material-design-icons/
• SCSS - Sassy CSS a superset of CSS3's syntax.
• Zappa - Python serverless deployment interface https://github.com/Miserlou/Zappa
• Amazon Web Services (AWS) - Cloud Infrastructure - S3, Lambda, API Gateway, CloudWatch, IAM https://aws.amazon.com/

Requirements

• Python 2.7.x or Python 3.6+
• See requirements.txt

How to Setup Firebase

• Setup a firebase account.
• In firebase, click "Create New Project".
• Open the project.
• On the Overview page for your project click "Add Firebase to your web app".
• Use this data to replace apiKey, authDomain, databaseURL, storageBucket, and messagingSenderId in templates/index.html.

Change Flask-S3 Config in vue_flask.py

• app.config['FLASKS3_BUCKET_NAME'] = 'your_s3_bucket_name_here'

How to Deploy using Zappa - Serverless.

• Create and Activate a virtual environment for this project. Reference: https://virtualenv.pypa.io/en/stable/installation/
• pip install requirements.txt
• Place aws credentials with correct permissions in <path to user folder>\.aws\credentials Reference: Miserlou/Zappa#244
• Open zappa_settings.json and change "s3_bucket" and "aws_region" to match your AWS account.
• zappa deploy production
• Navigate to generated url.

How to Update Deployment

• zappa update production

How to Undeploy

• zappa undeploy production