This repository is a deployable example for my article at https://blog.q-bit.me/a-step-by-step-guide-for-developing-and-deploying-a-vue-js-app-with-docker-part-two/.
It might as well serve as a boilerplate for smaller projects as it comes with a built-in store, powered by Vue 3's composition API.
Update: Check out Chattergram for a full-stack approach to Vue 3 development
- Make sure you have Docker installed. You can find a quick setup guide in the official docs or in my previous blogpost.
- Clone this repos to your local machine
git clone https://github.com/tq-bit/vue-docker-development.git
If you have not read the previous article, make sure to manually install all dependencies in your dev project Run
cd vue_app && npm install && cd ..
before moving ahead
- Build the image you need for development or production OR start the service with
docker-compose
# Development version. Uses Vue CLI to serve the app during development
docker build \
-f ./dockerfiles/Dev.Dockerfile \
-t vue_app:dev \
vue_app
# Deployable version. Uses the official Nginx to serve the Vue SPA
docker build \
-f ./dockerfiles/Deploy.Dockerfile \
-t vue_app:production \
vue_app
3.1. Use docker compose like this (you can skip steps 4 and 5 if you do):
docker compose up # Use docker's built-in compose function
# docker-compose up # Use the docker-compose binary
4. Start a container that serves the development version of your app
```bash
# Open your browser at http://localhost:8080 to access the app
docker run \
-v /path/to/project/vue_app:/vue_app \
-p 8080:8080 \
-it vue_app:dev
- Or test the optimized built with Docker
# Open your browser at http://localhost to access the app
docker run -p 80:80 vue_app:production
- Add additional NPM packages by using the
vue_helper
image
# This will create a Docker image that helps you to manage
# your application during development
docker build \
--build-arg USER_ID=$(id -u) \
--build-arg GROUP_ID=$(id -g) \
-t vue_helper - < ./dockerfiles/Setup.Dockerfile
docker run -v /path/to/your/project/:/vue-setup -it vue_helper