How to add Vue to existing Laravel Docker app - docker

Question

I have a simple, working Laravel app which uses Docker and I am trying to add Vue.
Here is my docker-compose.yml:
version: '3.1'
services:
### THIS IS WHAT I ADDED
# Frontend service
frontend:
image: node:current-alpine
build: ./sandbox
container_name: my_app_frontend
ports:
- 8080:8080
volumes:
- "/app/node_modules"
- ".:/app"
command: "npm run serve"
###
#PHP Service
my_app:
build:
context: .
dockerfile: 'Dockerfile'
image: digitalocean.com/php
container_name: my_app
restart: unless-stopped
tty: true
environment:
SERVICE_NAME: app
SERVICE_TAGS: dev
working_dir: /var/www
volumes:
- ./:/var/www
- ./php/local.ini:/usr/local/etc/php/conf.d/local.ini
networks:
- app-network
#NPM Service
my_app_npm:
image: node:latest
container_name: my_app_npm
volumes:
- ./:/var/www/
working_dir: /var/www/
tty: true
networks:
- app-network
#Nginx Service
my_app_server:
image: nginx:alpine
container_name: my_app_webserver
restart: unless-stopped
tty: true
ports:
- "82:80"
- "4443:443"
volumes:
- ./:/var/www
- ./nginx/conf.d/:/etc/nginx/conf.d/
networks:
- app-network
#MySQL Service
my_app_db:
image: mysql:5.7
command: --default-authentication-plugin=mysql_native_password --innodb-use-native-aio=0
container_name: my_app_db
restart: always
tty: true
ports:
- "8082:3306"
environment:
MYSQL_PASSWORD: xxxxx
MYSQL_ROOT_PASSWORD: xxxxx
volumes:
- ./mysql/my.cnf:/etc/mysql/my.cnf
networks:
- app-network
#Phpmyadmin Service
my_app_phpmyadmin:
image: phpmyadmin/phpmyadmin
container_name: my_app_phpmyadmin
restart: always
links:
- my_app_db
depends_on:
- my_app_db
ports:
- 8083:80
environment:
PMA_HOST: my_app_db
networks:
- app-network
#Docker Networks
networks:
app-network:
driver: bridge
Here is my Dockerfile in my Vue directory:
FROM node:lts-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
EXPOSE 8080
CMD ["npm", "run", "serve"]
The file structure looks like this:
-app
-database
-mysql
-nginx
-sandbox(vue)
-node_modules
-public
-src
Dockerfile
package.json
...
docker-compose.yml
Dockerfile
package.json
...
docker-compose build //works
docker-compose up //fails with this error
This relative module was not found:
my_app_frontend |
my_app_frontend | * ./src/main.js in multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js
my_app_frontend | [webpack.Progress] 100%
What am I missing?

Answer 1

Figured it out, here is my updated Dockerfile.
FROM node:lts-alpine
# install simple http server for serving static content
WORKDIR /app
COPY package*.json ./
RUN npm install
# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . . // THIS WAS MISSING
EXPOSE 8080
CMD ["npm", "run", "serve"]

Answer 2

Those who are using Vue webpack in Laravel and trying to dockerize.
You just need to add these below two lines in your Dockerfile.
FROM node:10-alpine
RUN npm i -g webpack webpack-cli
Reference:
https://hub.docker.com/r/91dave/webpack-cli