ModusCreateOrg/vue-lambda

VueConf lightning talk

Vue Lambda

Installation

1. Install git

   • Recommended installation notes:
     • Linux: install via a native package management tool, e.g. apt
     • MacOS: install via Xcode command line tools ($ xcode-select --install) or install Xcode (via the Mac App Store)
     • Windows: install via a Bash-like environment, e.g. Git for Windows
   • Confirm installation via the following command: $ git --version

2. Install Docker

3. Create a global .gitignore

   • Note: It is bad practice to include operating system and IDE lines in a project's .gitignore unless they are required by the project. This project does not require a specific operating system nor IDE so ensure your global .gitignore includes lines for all files relevant to your operating system(s) and IDE(s)

4. Clone the repository

$ git clone git@github.com:ModusCreateOrg/vue-lambda.git

5. Change your current directory to the local clone of the repository

$ cd vue-lambda

6. Build the Docker image (see below)
7. Install dependencies (see below)
8. Deploy Support CloudFormation Stack (see below)
9. (If forked: ) Integrate Travis with repository to build automagically Branch CloudFormation Stack
   • You must add the following environment variables to the Travis build configuration:
     • AWS_DEFAULT_REGION
     • AWS_ACCESS_KEY_ID
     • AWS_SECRET_ACCESS_KEY
10. If you're testing with Lighthouse, do it on the fallback route: /pwa

Getting Started

Build the Docker image

• Build the Docker image

$ docker build -t vue-lambda .

Run a command on the Docker image

• Run commands via the Docker image

$ docker run --mount src="$(pwd)",target=/opt/vue-lambda,type=bind vue-lambda COMMAND

Install dependencies

• Install npm dependencies

• Note: unsafe-perm is used so that iltorb can successfully install a pre-compiled binary for compression (rather than building one during install)

$ docker run --mount src="$(pwd)",target=/opt/vue-lambda,type=bind vue-lambda npm install --unsafe-perm

Start

• Start the development server. You can access the website at: http://localhost

$ docker run --mount src="$(pwd)",target=/opt/vue-lambda,type=bind -p 80:80 vue-lambda

Lint

• Lint files using ESLint, stylelint and Prettier

  • Note: It is strongly recommended to incorporate ESLint, stylelint, Prettier and EditorConfig into your IDE's syntax checking, highlighting and on save event

• Check for errors via:

$ docker run --mount src="$(pwd)",target=/opt/vue-lambda,type=bind vue-lambda npm run lint

• Automagically fix any automagically-fixable errors via:

$ docker run --mount src="$(pwd)",target=/opt/vue-lambda,type=bind vue-lambda npm run lint-fix

• Check if any configuration rules conflict with Prettier via:

$ docker run --mount src="$(pwd)",target=/opt/vue-lambda,type=bind vue-lambda npm run lint-check-rules

Test

• Test files via unit and snapshot test using Jest

$ docker run --mount src="$(pwd)",target=/opt/vue-lambda,type=bind vue-lambda npm run test:unit

Interactive

• Run Docker in interactive mode

$ docker run --mount src="$(pwd)",target=/opt/vue-lambda,type=bind -it vue-lambda /bin/bash

DevOps

Deploy Support CloudFormation Stack

• Deploy the support CloudFormation stack

  • Note: AWS CLI configuration files must exist on your host machine at ~/.aws
  • Note: You must use unique values for <S3_BUCKET_NAME_ARTIFACTS> and <S3_BUCKET_NAME_STATIC>

$ docker run --mount src="$(pwd)",target=/opt/vue-lambda,type=bind --mount src="$(cd ~/.aws && pwd)",target=/root/.aws,type=bind -e STACK_NAME="vue-lambda-support" -e S3_BUCKET_NAME_ARTIFACTS="<S3_BUCKET_NAME_ARTIFACTS>" -e S3_BUCKET_NAME_STATIC="<S3_BUCKET_NAME_STATIC>" vue-lambda bash ./bin/deploy-support.sh