Vue with Docker; initialize, develop and build

Initialize the project

Run the following command while replacing myproject with your project name:

mkdir myproject && cd "$_" && docker run --rm -v "${PWD}:/$(basename `pwd`)" -w "/$(basename `pwd`)" -it node:11.1-alpine sh -c "yarn global add @vue/cli && vue create ."
When installing choose yarn

Dockerfile

The Dockerfile is identical to the given example in the documentation. Only the build-stage is split up into an install-stage and a build-stage, since we don’t need to build when we are developing!

# develop stage
FROM node:11.1-alpine as develop-stage
WORKDIR /app
COPY package*.json ./
RUN yarn install
COPY . .
# build stage
FROM develop-stage as build-stage
RUN yarn build
# production stage
FROM nginx:1.15.7-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
docker build -t dockerize-vue .
docker run -it -p 8000:80 --rm dockerize-vue

Develop with Docker-compose.yml

While developing, you don’t want to rebuild the container all the time in order to see the results in your browser. To keep the reload functionality of the development mode we share the code base with the container with docker-compose. In fact, the docker-compose.yml file is fairly simple:

# for local development
version: '3.7'
services:
frontend:
build:
context: .
target: 'develop-stage'
ports:
- '8080:8080'
volumes:
- '.:/app'
command: /bin/sh -c "yarn serve"
docker-compose up --build
docker-compose exec frontend yarn add <package-name>

--

--

data / hydraulic engineer: https://dobken.nl

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store