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
Related
Here is my dockerfile
FROM node:16.18.1-alpine
WORKDIR /app
COPY package.json /app
RUN npm install
EXPOSE 3000
COPY . /app
ENTRYPOINT \["npm", "start"\]
and in my package.json here is the start script
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "json-server --watch db.json"
},
and here is a screenshot of docker logs
Docker logs screenshot
browser screenshot running at localhost:3000
Browser running at localhost:3000
It should serve my db.json file with this data
{
"currency" : \[
{
"id": 1,
"rate": 117,
"value": "usd",
"currency": "USD",
"selected": true
}
\]
}
I changed some few things in the docker file and it worked.
FROM node:16.18.1-alpine
RUN mkdir -p /app
WORKDIR /app
COPY package.json /app
RUN npm install -g json-server
COPY . /app
CMD json-server --watch /app/db.json --port 3000 --host 0.0.0.0
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
I want to either pass Vue environment variables to my Vue client with docker compose or tell my client to use a diffenret .env file.
The problem is i cannot access the VUE_APP_ROOT_URL variable nor can I switch between the .env files.
services:
client_test:
build: ./papasmuenzenfrontend/.
container_name: vue_test
restart: always
environment:
- NODE_ENV:test
- VUE_APP_ROOT_URL=localhost:50598
ports:
- '8081:8080'
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 figured it out how to do it:
In my package.json I have the following configuration
"test_build": "vue-cli-service build --mode test",
"production": "vue-cli-service build --mode production",
"development": "vue-cli-service build --mode development"
docker-compose file:
client_test:
args:
- myenv=development
docker file:
ARG myenv RUN npm run $myenv
When building the project the $myenv gets passed to the build in the package.json where it then switches to the different environment files.
QUESTION: (edited: solution is added at the end of this post)
I have VueJS project (developed in webpack), which I want to docker-size.
My Dockerfile looks like:
FROM node:8.11.1 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
CMD ["npm", "run", "dev"]
which is basically following the flow from this post.
I also have a .dockerignore file, where I copied the same files from my .gitignore and it looks like:
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
.git/
I have created a docker image with the command:
docker build -t test/my-image-name .
and then run it into a container with the command:
docker run -it -p 8080:8080 --rm --name my-container-name test/my-image-name
as a result of this last command, I got the same output in the terminal (which is normally showing in cases of debugging with webpack / vuejs) as when I run the app locally:
BUT: at the end, in the browser window the app is not loaded
If I run the commands docker images and docker ps I can see that the image and the container are there, and while creating them, I did not got any error messages.
I found this post and had a few tries for changing the Dockerfile as:
Option 1
FROM node:8.11.1 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
ENTRYPOINT ["ng", "serve", "-H", "0.0.0.0"]
Option 2
FROM node:8.11.1 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
ENTRYPOINT ["ng", "serve", "-H", "0.0.0.0"]
EXPOSE 8080
CMD ["npm", "run", "dev"]
But it seems none of them is working.
btw. my package.json file looks like:
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
}
So I'm wondering: how to make the app to be opened in the browser from the docker image?
SOLUTION: not, sure if this was the reason for the fix, but I did two things. As mentioned, I'm working with the VueJS and webpack, so inside of the file named config/index.js, which initially looked like:
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // <---- this one
port: 8080,
I changed the host property from 'localhost' into '0.0.0.0', removed the EXPOSE 8080 line from the Dockerfile (the initial Docker file from my question above) since I noticed that the port from the config file is used by default and also restarted the installed Docker tool on my local machine.