I have a nginx and php container where the Laravel app exists and when I am into the php container and I run npm run dev I have no idea how to access the frontend through the http://localhost:5173. Can you support?
Map the port from the container to your machine using the -p flag (I assumed you are using docker), so you want to do something like -p 5173:5173 when running your container.
Reference: https://docs.docker.com/config/containers/container-networking/
You need to open the port in your docker-compose.yml. Show the file
server:
container_name: server
build:
context: ./build/local
dockerfile: Dockerfile_nginx
ports:
- "8001:80"
- "5173:5173"
volumes:
- ./app/public:/app/public
networks:
- server_net
depends_on:
- app
app:
container_name: app
build:
context: ./build/local
dockerfile: Dockerfile_php
networks:
- server_net
working_dir: /app
extra_hosts:
- "www.site.test:127.0.0.1"
- "site.test:127.0.0.1"
volumes:
- ./app:/app
Nginx
server {
listen 80;
listen 5173;
root /app/public;
index index.php;
server_name site.test www.site.test;
error_log /var/log/nginx/error.log;
access_log /var/log/nginx/access.log;
autoindex on;
client_max_body_size 100M;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location ~ \.php$ {
try_files $uri =404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass app:9000;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
}
}
console error
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
it seems that by exposing the port is not working hmm
@papa you said you were running it inside the php container, but you opened the port on nginx? Move the open port to php and rebuild. You don't want to run the dev server through nginx
And you are not supposed to open the url it shows. Just open your regular dev url
@Sinnbeck the project is accessible through the server(nginx) the port should be open on nginx not in php container. The php container has no server inside it. The thing is how it can be accessed through the nginx server container which belongs to the same network.
@papa npm runs its own server when you run npm run dev. No need to use nginx for this. It's just a tiny server that serves your js and css. So simply open the port in the php container and it should work
If you for some reason want to have nginx work as a proxy (don't see any reason for this as this is only for development), I cannot really help you
@Sinnbeck thanks, I needed to configure the server.host on vite.config .
@papa ah ok. I thought it was localhost :) if the problem is solved, you can mark a best answer to set the thread as solved
@papa i have a similar problem, could you show us your vite config? thanks!
Hello from future,
I managed to resolve this by changing the vite.config.jg:
import {
defineConfig
} from 'vite';
import laravel from 'laravel-vite-plugin';
import vuePlugin from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
vuePlugin(),
],
server: {
host: true,
port: 5173,
},
});
And also have the following in my docker-compose.yml (I omit the db config):
version: '3'
services:
# laravel
laravel:
build:
context: ./src
dockerfile: ../config/laravel/Dockerfile
image: digitalocean.com/php
container_name: laravel
restart: unless-stopped
tty: true
ports:
- "5173:5173"
environment:
SERVICE_NAME: laravel
SERVICE_TAGS: dev
working_dir: /var/www
volumes:
- ./src/:/var/www
networks:
- laranet
# Nginx Backend Service
laravel-webserver:
image: nginx:alpine
container_name: laravel-webserver
restart: unless-stopped
tty: true
ports:
- "8085:80"
volumes:
- ./src/:/var/www
- ./config/nginx/conf.d/:/etc/nginx/conf.d/
networks:
- laranet
Note the open port in my laravel up is the same with vite config and the 8085 port points to the nginx
@pachristos Solved the problem for me, thanks!
Please or to participate in this conversation.