I'm enjoying new Vue 3 script setup syntax and blazing fast hot-reload using Vite.
And as I'm using Docker containers for my development environment here are the few steps needed to start a new Vue 3 project with Vite under the Docker.
Docker
docker-compose.yml
version: "3.4"
services:
my_frontend:
container_name: my_frontend
image: node:lts
working_dir: /var/www/html/app/
entrypoint: /bin/bash
expose:
- 8000
volumes:
- ./frontend/:/var/www/html/app
tty: true
This is simple. Just using the node:lts
image and setting some stuff around.
I'm spinning the container up with:
$ docker compose up -d
and hooking into the container with:
$ docker exec -it my_frontend /bin/bash
New Vue Project
When in the docker container, create a new Vite with Vue project:
$ npm init @vitejs/app
Then select the Vue, name the project and so on.
After the project is generated, install the packages.
Setting up the Project for running under the Docker
For running the project under the Docker there are some adjustments that need to be done in the Vue/Vite project.
At first the port must be set to match the one in the docker-compose.yml
file (in my case it is 8000).
Open the vite.config.js
file and add the server object with the port field to the configuration:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
server: { // <-- this object is added
port: 8000
},
plugins: [vue()]
})
We must also add parameter --host
to the vite
command in the package.json
, so replace dev
command in scripts
:
// package.json
...
"scripts": {
"dev": "vite",
...
with:
// package.json
...
"scripts": {
"dev": "vite --host",
...
And that's it!
Top comments (5)
I can't access the localhost
in docker file i've replaced "expose" by "ports" and it works
ports:
- "8000:8000"
Put this on your DockerFile
CMD [ "npm", "run", "dev", "--", "--host", "0.0.0.0" ]
Do you even need docker with node projects? package.json + lock file + a package manager handles this right?
docker is just cool feature which help us to make our life easier, you have to understand it's meaning and you will asnwer yourself.