The error 'sh: dist: unknown operand' occurs when Doclerizing a Vue App

After following the Vue.js Docker tutorial, I encountered an unusual error message.

'sh: dist: unknown operand'

This is the content of my Dockerfile:

FROM node:lts-alpine

RUN npm install -g http-server

WORKDIR /app

COPY package*.json ./

RUN npm install

copy . .

RUN npm run build

EXPOSE 8080
CMD [ 'http-server', 'dist' ]

I have manually executed the vue build and it generated output to the /dist directory. Everything seems like it should be working fine?

The instructions I am following can be found here: https://v2.vuejs.org/v2/cookbook/dockerize-vuejs-app.html

Answer №1

As Marc pointed out, it is important to use double quotes in the Dockerfile CMD instead of single quotes.

To demonstrate this, I followed the sequence with a webpack template:

$ yarn install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ yarn build

yarn run v1.21.1
...
Build complete.

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

Done in 7.69s.

I then added a Dockerfile with the following content:

FROM node:lts-alpine
RUN npm install -g http-server
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 8080
CMD [ "http-server", "dist" ]

Built the image:

$ docker build -t vue-test

Build response

Sending build context to Docker daemon  221.6MB
...

And so on...

After making a change to the Dockerfile by using single quotes for CMD line,

CMD [ 'http-server', 'dist' ]

I rebuilt the image and attempted to start the container but encountered an error:

$ docker run -it -p 8080:8080 --rm vue-test

sh: dist: unknown operand

The above error confirms that using double quotes is necessary. Therefore, always ensure to follow this practice when working with Dockerfiles.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I prevent my Vue.js application from losing focus when navigating to different components?

I am encountering an issue with my Vue.js app where the focus is lost when changing routes. Initially, when the site loads, the first element of the header component is correctly in focus as desired. However, when navigating to a different link on the site ...

Displaying components in a loop and utilizing the index in the child component's method (VueJS)

In my setup, I have two components that are involved in exchanging props. The props consist of the entire todo array which gets updated when a button is clicked using the "addTodo" method. Passing the array down to the child component works seamlessly. I a ...

Issues encountered while trying to integrate chessboard.js into a Vue application

I am facing an issue while trying to incorporate chessboard.js into my jetstream-vue application. Following the creation of the project, I executed the command npm install @chrisoakman/chessboardjs which successfully downloaded the package into my node_mod ...

Utilizing Vue.js for enhanced user experience, implementing Bootstrap modal with Google Maps autocomplete

I recently set up a Bootstrap modal that includes an <input>. To enable Google autocomplete for it, I utilized the commonly known trick below: .pac-container { z-index: 10000 !important; } However, I have encountered difficulty in getting the a ...

Having trouble determining whether the Vue project is in debug or release mode in Visual Studio

While developing my Vue app in Visual Studio, I noticed that I keep getting this message in the console regardless of the build mode (debug/release). The message says: "You are running Vue in development mode. Make sure to turn on production mode when ...

Solving the CORS problem between Vue.js and Flask: Troubleshooting XMLHttpRequest Blockade

Description: Currently working on developing a web application utilizing Vue.js for the frontend and Flask for the backend. The initial phase involves creating a simple login page, but encountering CORS (Cross-Origin Resource Sharing) issues when making r ...

What is the best way to iterate through a JSON object retrieved from an API in a Vue.js application?

/Hello everyone, I am struggling to figure out how to use v-for in Vue.js to create a simple HTML table from the JSON object retrieved from an API. The design is not important, I just need help with implementing v-for for this specific case. The table sh ...

Learn the best practices for integrating the options API with the Composition API in Vue3

Using vue3 and vite2 Below is a simple code snippet. The expected behavior is that when the button is clicked, the reactive 'msg' variable should change. It works as expected in development using Vite, but after building for production (Vi ...

Issue encountered when compiling Vue 3 with TypeScript and Webpack Encore: Vue Router's $route is missing

I've been grappling with setting up vue-router's $route in my shims.vue.d.ts file to avoid getting an error on the this scope. Whenever I try to access this.$route.params.paymentId, I keep receiving a type error: TS2339: Property '$route&apo ...

Is there a way to properly assign an index to a multidimensional array in a Vue.js template?

My setup involves utilizing Vue along with a multidimensional array structured like this: myArray = [[1,2,3],[1,2,3],[1,2,3]] To achieve the desired HTML layout shown below (ensuring that data-item counter increments correctly): <div class="row" data ...

Strategies for Nesting Multiple VNodes Within an Encapsulating Component

I am currently utilizing Naive UI's autocomplete component and rendering the auto suggestions using dynamic components via h(). Everything is working smoothly: const renderSearchResult = option => [ h(NTag, { size: 'small', type: &apo ...

Utilizing Vue.js to share a single array of data across two distinct input lists

For a clearer understanding of my requirements, I have put together a demo on JSFiddle: https://jsfiddle.net/silentway/aro5kq7u/3/ The code snippet is presented below: <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id=" ...

What is the method for retrieving a computed state variable?

In Vue Class Component, accessing the value of a computed variable can be a bit tricky. If you try to access it using this.bar, you may encounter an error like this: Property 'bar' does not exist on type 'Vue'. <script lang="ts& ...

What is the best way to pass multiple parameters along with the context to a URL in Vuex?

Link to StackBlitz I am currently working on how to send multiple action parameters with context to a URL. I have been encountering a 400 error in my attempts. The selectedPoint and departurePoint are coming from child components and stored as variables i ...

Using Typescript with Vue.js: Defining string array type for @Prop

How can I properly set the type attribute of the @Prop decorator to be Array<string>? Is it feasible? I can only seem to set it as Array without including string as shown below: <script lang="ts"> import { Component, Prop, Vue } from ...

Converting a string into an array of JSON objects

I am currently attempting to send data to my NodeJS server using the HTTP protocol (vue-resource). The goal is to send an array of JSON objects structured like this : [{"name":"Charlotte","surname":"Chacha","birth":"2000-04-02"},{"name":"Michael","surname ...

Comparing onScopeDispose with scope.cleanups

While reviewing some source code to ensure proper cleanup of my event bus on component destruction, I came across the use of scope.cleanups (found in https://github.com/vueuse/vueuse/blob/main/packages/core/useEventBus/index.ts): const scope = getCurrentSc ...

What is the process for extracting values from a Proxy object and assigning them to a local variable?

Can anyone help guide me on how to retrieve a list of devices (video and input/output audio) using navigator.mediaDevices.enumerateDevices()? I created a function that returns the result, but when I try to display it with console.log(result), I only see a ...

Tips for extracting nested data in Vue.js without redundancy

Here's a query regarding my "Avatar database" project. I am aiming to gather all tags from each avatar and compile them into a single array without any duplicates. For instance, if there are 3 avatars tagged as "red", the list in the array should onl ...

Encountered an issue while running "npm run" command on a new Laravel project - Module npm-cli.js could not be located

Can someone please assist me with this issue? I encountered an error while trying to run npm run on my fresh laravel project. I started by installing a new laravel file using larave new vue-lar-proj then I installed the necessary modules using npm instal ...