U.S. Taiwan Watch Site

Nuxt.js project

Known Issues

No parser and no filepath given, using 'babylon'

you'll find it in file node_modules/vue-loader/lib/template-compiler/index.js line 80 replacing it with this

code = prettier.format(code, { semi: false, parser: 'babylon' })

will fix all errors.

Clone SubModules

If you clone this repo, make sure you also clone its sub modules as well.

git clone --recurse-submodules

If you already cloned the repo, use:

git submodule update --init --recursive

Stack

Front-End

• Vue.js - component-based MVVM library
• vue-router
• Vuex - Flux application architecture for Vue.js
• iView - A high quality UI Toolkit built on Vue.js
• Nuxt.js - Vue SSR
• vue-apollo - GraphQL Client
• Vue-i18n - i18n
• aws-serverless-express - Run serverless applications and REST APIs using your existing Node.js application framework, on top of AWS Lambda and Amazon API Gateway
• express-session - Simple session middleware for Express
• mobile-detect - Device detection (phone, tablet, desktop, mobile grade, os, versions)

Tools

• Webpack - JavaScript build tool, task runner
• Babel - JavaScript compiviewiler
• ESLint - JavaScript linter
• TypeScript - TypeScript support for Vue.js

Back-End

• Serverless Framework
• Amazon API Gateway - RESTful APIs endpoint
• AWS Lambda - microservices
• Amazon DynamoDB - NoSQL database
• AWS CloudFormation - Infrastructure as a Code

Hosting

• Amazon S3 - static website hosting
• Amazon CloudFront - CDN
• Amazon Route 53 - DNS
• AWS Certificate Manager - SSL/TLS credentials

DevOps

• BitBucket - source-code hosting
• BitBucket Pipeline - continuous integration and delivery

Business Tools

• Slack - group notifications
• HackMD - collaborative project notes

Directory Structure

└── 📂 src
    ├── 📂 api --------------- methods to call 3rd-party services
    ├── 📂 assets ------------ un-compiled assets such as Less, Sass or JavaScript
    ├── 📂 components -------- Vue.js Components. Nuxt.js doesn't supercharge the data method on these components
    ├── 📂 layouts ----------- app Layouts
    ├── 📂 locales ----------- i18n localization files
    ├── 📂 middleware -------- Middleware lets you define custom functions that can be run before rendering either a page or a group of pages (layouts)
    ├── 📂 pages ------------- app Views and Routes
    ├── 📂 plugins ----------- Javascript plugins that you want to run before instantiating the root Vue.js app
    ├── 📂 static ------------ static files, and each file inside this directory is mapped to /
    ├── 📂 store ------------  Vuex Store files
    ├── 📄 handler.js -------- lambda function to export the SSR server to an endpoint
    ├── 📄 nuxt.config.js ---- Nuxt.js custom configuration
    ├── 📄 package.json ------ app dependencies and scripts.
    └── 📄 serverless.yml ---- config for delpoying AWS serverless stack

Development

Prerequisites

• Node.js v6.10

Setup

Build:

# install dependencies
$ npm install # Or yarn install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm start

# generate static project
$ npm run generate

Deploy:

# Deploy to a cloud-hosted development environment
npm run deploy-dev

# When everything looks good, deploy to production
npm run deploy-prod