VisionYi

S3 Static Sites

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

Resources

VisionYi

<template>
  name: <input type="text" v-model="nameSync">
  year: <input type="number" v-model="yearSync">
</template>

<script>
export default {
  //...
  props: {
    name: {

VisionYi

<template>
  <div v-for="(item, index) in valueSync" :key="item.id">
    name: <input type="text" v-model="item.name" @input="syncPropValue"> <!-- add event -->
    years: <input type="number" v-model="item.years" @input="syncPropValue"> <!-- add event -->
    <button @click="removePepole(index)">remove</button>
  </div>
</template>

<script>
export default {

VisionYi

<template>
  <div v-for="(item, index) in valueSync" :key="item.id">
    name: <input type="text" v-model="item.name">
    years: <input type="number" v-model="item.years">
    <button @click="removePepole(index)">remove</button>
  </div>
</template>

<script>
export default {

VisionYi

<script>
export default {
  //...
  watch: {
    value: {
      handler(value, oldValue) {
        // 同步 value 與 valueSync
        if (value !== this.valueSync) {
          this.valueSync = value
        }

VisionYi

<template>
  <div v-for="(item, index) in valueSync" :key="item.id">
    name: <input type="text" v-model="item.name" @input="syncPropValue">
    years: <input type="number" v-model="item.year" @input="syncPropValue">
    <button @click="removePepole(index)">remove</button>
  </div>
</template>

<script>
export default {

VisionYi

[
   {
      "districts":[
         {
            "zip":"100",
            "name":"中正區"
         },
         {
            "zip":"103",
            "name":"大同區"

VisionYi

const path = require('path');
const webpack = require('webpack');
const chokidar = require('chokidar'); // hot reload for html, webpack-dev-server has include this plugin.
const htmlWebpackPlugin = require('html-webpack-plugin');
const miniCssExtractPlugin = require("mini-css-extract-plugin");
const terserPlugin = require("terser-webpack-plugin"); // minify js
const optimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const cleanWebpackPlugin = require('clean-webpack-plugin');

const devMode = process.env.NODE_ENV !== 'production';

VisionYi

Project Name

TODO: Write a project description

Installation

TODO: Describe the installation process

Usage

VisionYi

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites