Setting up vue-cli in docker


To setup vue-cli in docker we need nodejs and vue-cli 3.

We are going to use docker-compose.yml to setup docker, paste following to your docker-compose.yml file

docker-compose.yml

version: "3.3"

services:
  vue-cli:
    container_name: vue-cli-container
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/code
    working_dir: /code
    stdin_open: true
    tty: true
    ports:
      - "8080:8080"
    networks:
      - frontend

networks:
  frontend:

Paste following into Dockerfile

Dockerfile

FROM node:latest

# install simple http server for serving static content
RUN npm install -g @vue/cli

#RUN vue create pos

#RUN vue add @vue/pwa

# make the 'code' folder the current working directory
WORKDIR /code

# copy both 'package.json' and 'package-lock.json' (if available)
#COPY package*.json ./


# install project dependencies
#RUN npm install

# build app for production with minification
#RUN npm run build

EXPOSE 8080

Now we have docker files setup, lets build the docker images

 # docker-compose up --build

After docker is built login into docker container using container id and create your project and vue/pwa plugin.

Get container id from docker

# docker ps

Get your container ID and login to container

# docker exec -it ID bash
Create vue project as name pos
# vue create myproject
Go into myproject directory and add plugins
# cd myproject
Add vue pwa plugin
# vue add @vue/pwa
Run project in docker
# npm run serve --host=0.0.0.0
View in browser at http://localhost:8080 You can also pull up the vue ui to graphically manage the project.
# vue ui -H  0.0.0.0 -p 8080

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s