Deploy a Vue web app to different AWS environments with a single codebase.

!AWS_Vue_Deploy

# AWS environment specific Vue deployment

.env.development

NODE_ENV=dev
YOUR_GLOBAL_CONSTANT=I'm a development constant!

.env.production

NODE_ENV=prod
YOUR_GLOBAL_CONSTANT=I'm a production constant!

.env.test

NODE_ENV=test
YOUR_GLOBAL_CONSTANT=I'm a test constant!

buildspec-dev.yml

version: 0.2

phases:
  install:
    commands:
      - npm install
  build:
    commands:
      - npm run build:dev
  post_build:
    commands:
      - echo "Syncing files to S3..."
      - aws s3 sync ./dist "s3://your-bucket-dev" --delete
artifacts:
  files:
    - 'dist/**/*'
  discard-paths: no
  base-directory: ''

buildspec-test.yml

version: 0.2

phases:
  install:
    commands:
      - npm install
  build:
    commands:
      - npm run build:test
  post_build:
    commands:
      - echo "Syncing files to S3..."
      - aws s3 sync ./dist "s3://your-bucket-test" --delete --exclude "*.map*"
artifacts:
  files:
    - 'dist/**/*'
  discard-paths: no
  base-directory: ''

buildspec.yml

version: 0.2

phases:
  install:
    commands:
      - npm install
  build:
    commands:
      - npm run build
  post_build:
    commands:
      - echo "Syncing files to S3..."
      - aws s3 sync ./dist "s3://your-bucket" --delete --exclude "*.map*"
artifacts:
  files:
    - 'dist/**/*'
  discard-paths: no
  base-directory: ''

package.json

{
  "name": "your-app-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode production",
    "build:test": "vue-cli-service build --mode test",
    "build:dev":  "vue-cli-service build --mode development",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "register-service-worker": "^1.5.2",
    "vue": "^2.6.6",
    "vue-router": "^3.0.1",
    "vue-swatches": "^1.0.3",
    "vuetify": "^1.3.0",
    "vuex": "^3.0.1",
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.4.0",
    "@vue/cli-plugin-e2e-cypress": "^3.4.0",
    "@vue/cli-plugin-eslint": "^3.4.0",
    "@vue/cli-plugin-pwa": "^3.4.0",
    "@vue/cli-plugin-unit-jest": "^3.4.0",
    "@vue/cli-service": "^3.4.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-cli-plugin-vuetify": "^0.4.6",
    "vue-template-compiler": "^2.5.21",
    "vuetify-loader": "^1.0.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "globals": {
      "__YOUR_GLOBAL_CONSTANT__": "readonly"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "jest": {
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.vue$": "vue-jest",
      ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
      "^.+\\.jsx?$": "babel-jest"
    },
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "snapshotSerializers": [
      "jest-serializer-vue"
    ],
    "testMatch": [
      "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
    ],
    "testURL": "http://localhost/"
  }
}

vue.config.js

module.exports = {
  chainWebpack: config => {
    console.log('\n')
    console.log('Setting global variables:')
    console.log(`__YOUR_GLOBAL_CONSTANT__: ${JSON.stringify(process.env.YOUR_GLOBAL_CONSTANT)}`)
    console.log('\n')

    config
      .plugin('provide')
      .use(require('webpack').DefinePlugin, [{
        __YOUR_GLOBAL_CONSTANT__: JSON.stringify(process.env.YOUR_GLOBAL_CONSTANT)
      }])
  }
}