Similar to this question I want to run a vite dev server inside a docker container. The motivation is basically that I want to compose it with a backend server and distribute an easily repeatable environment to teammates.
However, when I run the container, it immediately exits with no logs other than
< docker run -p 8080:8080 hiking-weather-frontend
> hiking-weather-frontend#0.0.0 dev
> vite "--host"
The same happens when I switch to a container terminal and run npm run dev manually -- it immediately returns with the above message.
The Dockerfile:
WORKDIR /usr/app
# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./
# Install project dependencies
RUN npm install
RUN npm i -g vite
# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .
EXPOSE 8080
CMD ["npm", "run", "dev", "--", "--host"]
vite.config.js:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
},
},
server: {
host: '0.0.0.0',
watch: {
usePolling: true
}
}
})
package.json
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
},
},
server: {
host: '0.0.0.0',
watch: {
usePolling: true
}
}
})
Would be eternally grateful for any input. Thanks!
Related
I have the following simple server in express, with the following docker file
axiostest.mjs
import axios from "axios"
import express from "express"
const app = express();
app.get("/", (request, response) => {
axios.get(`http://localhost:8888/admin_issues`).then(res => {
console.log(res.data);
response.send(res.data)
}).catch(err => {
console.log("ERRRROR")
console.log(err);
response.send(err)
})
});
app.listen(1112, () => {
console.log("Listen on the port 1112...");
});
DockerFile
FROM node:16
# Create app directory
WORKDIR /usr/src/app
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm#5+)
COPY package*.json ./
RUN npm install
# If you are building your code for production
# RUN npm ci --only=production
# Bundle app source
COPY . .
EXPOSE 1112
CMD [ "node", "axiostest.mjs" ]
If I run the server normally with
node axiostest.mjs, and then I do a postman call to localhost:1112
It works just fine
But If I build the docker container
docker build . -t me/express-test
and then i run it
docker run -p 49160:1112 -d me/express-test
If i do a postman call to localhost:49160
It says
"message": "connect ECONNREFUSED 127.0.0.1:8888"
Because axios is failing to connect to 127.0.0.1:8888
How can I fix this?
Hi I have install fresh app vue3 typescript + vite , my problem after building the image and spin the container. I cannot access the localhost:3000, the browser will just display
The connection was reset
docker run --rm -it -v %cd%/:/app/src -p 3000:3000 myvitets
Dockerfile
FROM node:14-buster-slim
# make the 'app' folder the current working directory
WORKDIR /app
# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./
RUN npm install
# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .
EXPOSE 3000
CMD [ "npm", "run", "dev"]
I also add .dockerignore
node_modules/
.git
.gitignore
can someone help me please how to run my app to the container..
Thank you in advance.
I had the same problem and the below works for me.
In package.json, change the scripts
From
"dev": "vite"
To
"dev": "vite --host 0.0.0.0"
First: in the package.json add --host tag
"scripts": {
"dev": "vite --host",
"build": "vite build",
"preview": "vite preview --port 4173",
"test:unit": "vitest --environment jsdom"
},
Second: in the vite.config.js add the server port
// https://vitejs.dev/config/
export default defineConfig({
server: {
port: 3000
},
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
the port should be the same as in the Dockerfile, in your case 3000
I was trying to dockerize my existing simple vue app , following on this tutorial from vue webpage https://v2.vuejs.org/v2/cookbook/dockerize-vuejs-app.html. I successfully created the image and the container. My problem is that when I edit my code like "hello world" in App.vue it will not automatically update or what they called this hot reload ? or should I migrate to the latest Vue so that it will work ?
docker run -it --name=mynicevue -p 8080:8080 mynicevue/app
FROM node:lts-alpine
# install simple http server for serving static content
RUN npm install -g http-server
# make the 'app' folder the current working directory
WORKDIR /app
# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./
# install project dependencies
RUN npm install
# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .
# build app for production with minification
# RUN npm run build
EXPOSE 8080
CMD [ "http-server", "serve" ]
EDIT:
Still no luck. I comment out the npm run build. I set up also vue.config.js and add this code
module.exports = {
devServer: {
watchOptions: {
ignored: /node_modules/,
aggregateTimeout: 300,
poll: 1000,
},
}
};
then I run the container like this
`docker run -it --name=mynicevue -v %cd%:/app -p 8080:8080 mynicevue/app
when the app launches to browser I get this error in terminal and the browser is whitescreen
"GET /" Error (404): "Not found"
Can someone help me please of my Dockerfile what is wrong or missing so that I can play my vue app using docker ?
Thank you in advance.
Okay I tried your project in my local and here's how you do it.
Dockerfile
FROM node:lts-alpine
# bind your app to the gateway IP
ENV HOST=0.0.0.0
# make the 'app' folder the current working directory
WORKDIR /app
# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./
# install project dependencies
RUN npm install
# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .
EXPOSE 8080
ENTRYPOINT [ "npm", "run", "dev" ]
Use this command to run the docker image after you build it:
docker run -v ${PWD}/src:/app/src -p 8080:8080 -d mynicevue/app
Explanation
It seems that Vue is expecting your app to be bound to your gateway IP when it is served from within a container. Hence ENV HOST=0.0.0.0 inside the Dockerfile.
You need to mount your src directory to the running container's /app/src directory so that the changes in your local filesystem directly reflects and visible in the container itself.
The way in Vue to watch for the file changes is using npm run dev, hence ENTRYPOINT [ "npm", "run", "dev" ] in Dockerfile
if you tried previous answers and still doesn't work , try adding watch:{usePolling: true} to vite.config.js file
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
host: true,
port: 4173,
watch: {
usePolling: true
}
}
})
I'm trying to run a basic HelloWorld express app on my localhost using docker.
Docker version: Docker version 19.03.13
Project structure:
my-project
src
index.js
Dockerfile
package.json
package-lock.json
Dockerfile:
# Use small base image with nodejs 10
FROM node:10.13-alpine
# set current work dir
WORKDIR /src
# Copy package.json, packge-lock.json into current dir
COPY ["package.json", "package-lock.json*", "./"]
# install dependencies
RUN npm install --production
# copy sources
COPY ./src .
# open default port
EXPOSE 3000
# Run app
CMD ["node", "index.js"]
package.json
{
"name": "knative-serving-helloworld",
"version": "1.0.0",
"description": "Simple hello world sample in Node",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"author": "",
"license": "Apache-2.0",
"dependencies": {
"express": "^4.16.4"
},
}
index.js
const express = require('express');
const app = express();
app.get('/', (req, res) => {
console.log('Hello world received a request.');
res.send(`Hello world!\n`);
});
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log('Hello world listening on port', port);
});
Here are the commands I'm running:
>> docker build --tag hello-world:1.0 . // BUILD IMAGE AND GET ID
>> docker run IMAGE_ID // RUN CONTAINER WITH IMAGE_ID
Image seems to build just fine:
And this is the result after I run the image:
But this is what I get when I hit localhost:3000
I'm very new to Docker. What am I doing wrong?
You need to publish your port 3000.
docker run -p 3000:3000 IMAGE_ID
Just exposing the port is not enough it needs to be mapped on the host's port too.
Use host 0.0.0.0
app.listen(port, '0.0.0.0' () => {
console.log('Hello world listening on port', port);
});
Also, You need to publish port 3000:
docker run -p 3000:3000 IMAGE_ID
****Google Translator used****
I don't know why "ecosystem.config.js" is still included in npm agrs ...
So in the "ecosystem.config.js" file, args only has run and start, but when you build a docker, it looks like it works with npm ecosystem.config.js run start.
Please tell me why
// dockerfile
FROM node:lts-alpine
RUN npm install pm2 -g
COPY . /usr/src/nuxt/
WORKDIR /usr/src/nuxt/
RUN npm install
EXPOSE 8080
RUN npm run build
# start the app
CMD ["pm2-runtime", "ecosystem.config.js"]
// ecosystem.config.js
module.exports = {
apps: [
{
name: 'webapp',
exec_mode: 'cluster',
instances: 2,
script: 'npm',
args: ['run', 'start'],
env: {
HOST: '0.0.0.0',
PORT: 8080
},
autorestart: true,
max_memory_restart: '1G'
}
]
}
I struggled with ecosystem.config.js, I ended up using the yaml format instead: create process.yaml and enter your config>
apps:
- script: /app/index.js
name: 'app'
instances: 2
error_file: ./errors.log
exec_mode: cluster
env:
NODE_ENV: production
PORT: 12345
Then in the docker file:
COPY ./dist/index.js /app/
COPY process.yaml /app/
COPY docker-entrypoint.sh /usr/local/bin/
ENTRYPOINT ["docker-entrypoint.sh"]
# Expose the listening port of your app
EXPOSE 12345
CMD [ "pm2-runtime", "/app/process.yaml"]
Just change the directories and files to the way you want things setup