Question 81425 in Docker Question posted in
The official documentation can be found here.

Docker build doesn't work for VueJS app with Vite working in development

I tried to dockerize a basic VueJS app. I’m using Vite and I kept the basic files automatically generated when I wrote npm init vite@latest client in the terminal.
When I run npm run dev I can see everything is OK on http://localhost:5173, and when I run npm run build the files generated in the dist folder are correct.

Although, when I dockerize this app, I have an error. Here is the Dockerfile:

# Build env
FROM node:lts-alpine as build-npm-stage

WORKDIR /cno-vue
COPY package*.json ./
RUN npm install
COPY index.html ./
COPY public ./public
COPY src ./src
COPY .env.production ./

RUN npm run build

# Run env
FROM nginx:stable-alpine
COPY --from=build-npm-stage /cno-vue/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]

And here is what I write in the terminal:

docker build --tag cesar/cno-client .

Here is the error I get in the console:

Step 10/15 : RUN npm run build
 ---> Running in 19b4ced0dc36

> [email protected] build
> vite build

vite v3.2.3 building for production...
transforming...
✓ 4 modules transformed.
[vite:build-import-analysis] Parse error @:9:10
file: /cno-vue/src/App.vue:14:0
12:   <div>
13:     <a href="https://vitejs.dev" target="_blank">
14:       <img src="/vite.svg" class="logo" alt="Vite logo" />
    ^
15:     </a>
16:     <a href="https://vuejs.org/" target="_blank">
error during build:
Error: Parse error @:9:10
    at parse$b (file:///cno-vue/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:32639:355)
    at Object.transform (file:///cno-vue/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:42077:27)
The command '/bin/sh -c npm run build' returned a non-zero code: 1

I don’t see any parsing error… Could somebody explain what did go wrong?

If I delete the incriminated line, I have the same error on another random line…

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    OK I forgot to copy Vite's conf. I simply had to add:

    COPY vite.config.js ./

  2. 0

    What has helped me wether I am using a one or multi stage setup, try adding "–", "–host", "0.0.0.0" to CMD like below

    FROM node:lts-alpine
WORKDIR /app
COPY frontend .
RUN npm install
EXPOSE 5173
CMD [ "npm", "run", "dev", "--", "--host", "0.0.0.0" ]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search