Level 102
Which container is running vite? Node? If so, the port should be opened on that container
Aug 26, 2022
10
Level 1
Laravel Vite without Sail
I am running a fresh installation of Laravel 9 with VIte and Docker (No Sail) and the build doesn't work properly.
Browser is throwing the following error
GET http://127.0.0.1:3000/resources/sass/app.scss net::ERR_EMPTY_RESPONSE
GET http://127.0.0.1:3000/@vite/client net::ERR_EMPTY_RESPONSE
GET http://127.0.0.1:3000/resources/js/app.js net::ERR_EMPTY_RESPONSE
Below is my docker and vite config
networks:
form_filler:
services:
nginx:
image: nginx:stable-alpine
container_name: nginx
ports:
- 80:80
- 443:443
depends_on:
- php
- node
- mysql
volumes:
- ./src:/var/www/html
- ./docker/nginx:/etc/nginx/conf.d
networks:
- form_filler
node:
image: node:alpine
container_name: node
working_dir: /var/www/html
tty: true
volumes:
- ./src:/var/www/html
networks:
- form_filler
php:
build:
context: ./docker
dockerfile: dockerfile
container_name: php
ports:
- 9000:9000
- 3000:3000
volumes:
- ./src:/var/www/html
networks:
- form_filler
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/sass/app.scss',
'resources/js/app.js',
]),
],
server: {
hmr: {
host: 'localhost'
}
}
});
Any help would be appreciated
Level 1
@Sinnbeck Added port 3000 to Node container. Still not working. A bit of side info, when I try to access localhost:3000 the browser console has the following message as warning
crbug/1173575, non-JS module files deprecated.
Level 102
@akshayrajeev I wonder why it's port 3000. Pretty sure the laravel plugin and vite uses 5173. Are you using the newest versions of vite and the plugin?
Did you rebuild your containers?
What does your console running vite say?
Level 1
vite v2.9.15 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 4155ms.
Laravel v9.19.0
> APP_URL: http://localhost
I was using port 3000 because that was being shown while running npm run dev
Tried replacing port 3000 with 5173 and the browser error changed from ERR_EMPTY_RESPONSE to
GET http://127.0.0.1:3000/resources/sass/app.scss net::ERR_CONNECTION_REFUSED
GET http://127.0.0.1:3000/@vite/client net::ERR_CONNECTION_REFUSED
GET http://127.0.0.1:3000/resources/js/app.js net::ERR_CONNECTION_REFUSED
I'm rebuilding the container everytime after making docker-compose changes
Level 102
@akshayrajeev 3000 is fine. I was just wondering. Can you show your current docker-compose.yml again? And how do you start the npm run dev command?
Level 1
@Sinnbeck Current docker-compose
networks:
form_filler:
services:
nginx:
image: nginx:stable-alpine
container_name: nginx
ports:
- 80:80
- 443:443
depends_on:
- php
- node
- mysql
volumes:
- ./src:/var/www/html
- ./docker/nginx:/etc/nginx/conf.d
networks:
- form_filler
node:
image: node:alpine
container_name: node
working_dir: /var/www/html
tty: true
ports:
- 3000:3000
volumes:
- ./src:/var/www/html
networks:
- form_filler
php:
build:
context: ./docker
dockerfile: dockerfile
container_name: php
ports:
- 9000:9000
volumes:
- ./src:/var/www/html
networks:
- form_filler
I'm running the following command
docker-compose exec node npm run dev
Level 2
I had a similar issue and I had to make a few changes to the node container. This is the setup for node:
node:
image: node:alpine
container_name: "${APP_NAME}_node"
volumes:
- ${CODE_DIR:-/code}:/var/www/code
ports:
- "${VITE_PORT:-5173}:${VITE_PORT:-5173}"
working_dir: /var/www/code
command: [
"yarn", "run", "dev",
"--port", "${VITE_PORT:-5173}",
"--host", "0.0.0.0"
]
I hope this helps.
Level 6
Has anyone being able to get this to work? I've tried all the solutions after many hours without any luck... I ended up downloading Sail and examined the source code and, turns out, it's using php artisan serve!
For development, honestly, it just isn't worth that much trouble I think, although I'd be curious to know if anyone has successfully mange to get things to work with tailwind and everything.
Level 102
@ruthback Feel free to make a fresh post describing your set up, and we can do our best to try and help you out.
Personally I use Lando and it works great https://sinnbeck.dev/posts/getting-vite-and-laravel-to-work-with-lando
1 like
Level 6
@Sinnbeck Hi, after digging a little more turns out the issue I was having was related to https-only enabled for localhost... Thanks for the help and a;sp for the suggestion for Lando, it looks like an amazing tool!
Please or to participate in this conversation.