Jonathan Alexander jonalexander

Deverus Vue.js Style Guide

Guide for developing Vue.js applications.

v. 0.0.1

Vue.js is an amazing framework, which can be as powerful as Angular or React, the two big heavy hitters in the world of front-end frameworks.

However, most of Vue's ease-of-use is due to the use of Observables - a pattern that triggers re-renders and other function calls with the reassignment of a variable.

S3 Static Sites

⚠ This post is fairly old. I don't keep it up to date. Be sure to see comments where some people have posted updates

What this will cover

Host a static website at S3
Redirect www.website.com to website.com
Website can be an SPA (requiring all requests to return index.html)
Free AWS SSL certs
Deployment with CDN invalidation

This is how I configured the deploy of my rails apps to AWS Elastic Beanstalk through CircleCI 1.0.

If you are using the Circle CI 2.0, take a look at this article from ryansimms

Configure Environments Variables

On Project Settings > Environment Variables add this keys:

AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
The aws user must have the right permissions. This can be hard, maybe, this can help you.

	import localforage from 'localforage';
	import { Auth } from 'aws-amplify';

	export class LocalForageStorage {
	syncPromise = null;
	memoryStore = {};
	asyncStore = localforage.createInstance({
	name: 'amplifyStore'
	});

	/**
	* @usage:
	*
	* <CheckBox label="Foo" value="foo" v-model="MySelectedValues" />
	* <CheckBox label="Bar" value="bar" v-model="MySelectedValues" />
	* <CheckBox label="Baz" value="baz" v-model="MySelectedValues" />
	*
	* data(){
	* return {
	* MySelectedValues: [],

	'use strict';

	exports.handler = (event, context, callback) => {
	console.log('Received event:', JSON.stringify(event, null, 2))
	const modifiedEvent = event

	// check that we're acting on the right trigger
	if (event.triggerSource === "PreSignUp_SignUp"){

	// auto confirm the user

	import AWS from 'aws-sdk/global'
	import eventEmitter from 'event-emitter'
	import differenceInMilliseconds from 'date-fns/difference_in_milliseconds'
	import minDate from 'date-fns/min'

	// Set this to match your setup
	const env = {
	awsRegion: XXXX,
	identityPoolId: XXXX,
	userPoolId: XXXX,

	def lambda_handler(event, context):
	import subprocess
	result = subprocess.call("curl -I http://foo.bar", shell=True)
	return result

	// Async/Await requirements: Latest Chrome/FF browser or Babel: https://babeljs.io/docs/plugins/transform-async-to-generator/
	// Fetch requirements: Latest Chrome/FF browser or Github fetch polyfill: https://github.com/github/fetch

	// async function
	async function fetchAsync () {
	// await response of fetch call
	let response = await fetch('https://api.github.com');
	// only proceed once promise is resolved
	let data = await response.json();
	// only proceed once second promise is resolved

	<!DOCTYPE html>
	<html>
	<head>
	<title>AWS Cognito + Facebook Login JavaScript Example</title>
	<meta charset="UTF-8">
	</head>
	<body>
	<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.41.min.js"></script>
	<script>