Skip to content

Latest commit

 

History

History
226 lines (158 loc) · 7.34 KB

README.md

File metadata and controls

226 lines (158 loc) · 7.34 KB
Raw

VueDock

Docker plugin for the Vue CLI 3 & 4

Build Status

This plugin generates the necessary docker and docker-compose files for:

  • running the local development server.
  • running eslint and unit tests
  • running e2e tests, automatically detecting cypress and nightwatch tests
  • creating a production ready image, built on top of the official nginx Docker image.

Contents

Installation

Run the following command from your project's root folder: vue add vuedock

This will generate the following files in your project root:

  • Dockerfile, multi-stage docker image used for local development and CI/Prod. Will use npm/yarn for the server and build commands depending on whether a yarn.lock file was detected when the plugin was installed
  • docker-compose.yml, compose file to be used during local development for running and testing your app. Will include extra containers for running E2E and Cypress E2E tests if these were detected when the plugin was installed.
  • .dockerignore, default ignore file

Options

Add dgoss tests

You can optionally generate a goss.yaml file ready to test your production container using goss and dgoss (a docker wrapper for goss)

When adding the plugin, you will be automatically prompted whether you want to add dgoss tests or not.

Usage

Usage in development

  1. Run Vue Application:

     # start the dev server, then navigate to http://localhost:8080 to see your app
 docker-compose up app

  2. Run ESLint:

     # Using yarn
 docker-compose run --rm app yarn lint
 # Using npm
 docker-compose run --rm app npm run lint

  3. Run Unit Tests:

     # Using yarn
 docker-compose run --rm app yarn test:unit
 # Using npm
 docker-compose run --rm app npm run test:unit

  4. Run E2E Tests (generated files support cypress and nightwatch out of the box)

     # Run tests (this will also run the app container if it wasnt already running)
 docker-compose run --rm test_e2e
 # To clean up
 docker-compose down

Usage in CI Servers

  1. Build CI ready Docker image:

     docker build --target build -t vueapp .

  2. Run linting

     # Usign yarn
 docker run --rm vueapp yarn lint
 # Using npm
 docker run --rm vueapp npm run lint

  3. Run unit test:

     # Usign yarn
 docker run --rm vueapp yarn test:unit
 # Using npm
 docker run --rm vueapp npm run test:unit

  4. Run E2E Tests (generated files support cypress and nightwatch out of the box)

     # Run tests (this will also run the app container if it wasnt already running)
 docker-compose run --rm test_e2e
 # To clean up
 docker-compose down
    • Note: You can update the E2E tests to point at any running site by changing either the CYPRESS_baseUrl or LAUNCH_URL environment variable passed into the container (dependending on whether you use cypress or nightwatch for E2E tests). That ability means that this would also be a great basis for implementing some very complex and cool delivery and rollback pipelines.

  5. Build you production image:

     docker build -t vueapp .

  6. If you enabled Dgoss test you can validate the production image with:

     docker run --rm -it \
   -v "$(pwd)":/src \
   -v /var/run/docker.sock:/var/run/docker.sock \
 iorubs/dgoss run vueapp

Usage in production

  1. Run production app built in CI server

     docker run --rm -p 8080:80 vueapp
 # Open port 8080 to see some output.

Contributing

Start by cloning this repo. Then you can develop this plugin fully in a dockerized environment or in your local environment.

Development in your local environment

  1. Copy the full path to your copy of this repo

     pwd
 # copy path like /Users/chuck/git/kaizendorks/vue-cli-plugin-vuedock

  2. Create a test app project in another folder using the Vue CLI

     vue create app

  3. Change to the new app project directory and locally install this plugin. You will need the path copied in step 1

     cd app
 npm install --save-dev file:/Users/chuck/git/kaizendorks/vue-cli-plugin-vuedock
 vue invoke vue-cli-plugin-vuedock

  4. Once invoked, undo the changes to the package.json and package-lock.json (or yarn.lock). Otherwise install would fail in docker as it wont have access to the directory where the vue-cli-plugin-vuedock plugin is located.

Development in a dockerized environment

Dockerized vue-cli

# Build image
docker build -t vuedock --target development .

# Run a shell inside the dev container
docker run --rm -it \
  -v "$(pwd)":/vuedock \
  -v /var/run/docker.sock:/var/run/docker.sock \
vuedock sh

# Create sample app
vue create app

# Change dir to project dir
cd app

# Install plugin using NPM
npm install --save-dev file:/vuedock

# Or install plugin using YARN
yarn add --dev file:/vuedock

# Run plugin
vue invoke vue-cli-plugin-vuedock

# To build and run app as normal you have to remove a line from package.json ("vue-cli-plugin-vuedock": "file:/vuedock") E.g:
docker build --target build -t vueapp .
docker run --rm vueapp yarn test:unit

CI

Goss is tool for validating server’s configuration (avoid conf. drift). Dgoss is a wrapper written on top of goss for validating docker images. https://github.com/aelsabbahy/goss/tree/master/extras/dgoss

# Build image
docker build -t vuedock .

# Dgoss Tests (quick smoke test to check if docker files were generated)
docker run --rm -it \
  -v "$(pwd)/test":/src \
  -v /var/run/docker.sock:/var/run/docker.sock \
iorubs/dgoss run vuedock

# Edit tests
docker run --rm -it \
  -v "$(pwd)/test":/src \
  -v /var/run/docker.sock:/var/run/docker.sock \
iorubs/dgoss edit vuedock

# Build generated dockerfiles
docker run --rm -it \
  -v /var/run/docker.sock:/var/run/docker.sock \
vuedock docker build --target build -t vueapp .

# Run default Vue unit tests
docker run --rm vueapp yarn test:unit

# Try building prod container
docker run --rm -it \
  -v /var/run/docker.sock:/var/run/docker.sock \
vuedock docker build -t app .

# Run prod app dgoss tests
docker run --rm -it \
  -v "$(pwd)/generator/template/dgoss":/src \
  -v /var/run/docker.sock:/var/run/docker.sock \
iorubs/dgoss run app

# Edit prod app dgoss tests
docker run --rm -it \
  -v "$(pwd)/generator/template/dgoss":/src \
  -v /var/run/docker.sock:/var/run/docker.sock \
iorubs/dgoss edit app