[FIXED] why laravel 9 bootstrap auth doesn't have a style when running on mobile phone but working correctly on localhost?

Issue

I am working with laravel 9 project with auth package (bootstrap) and the newely added "vite" where I need to run "npm run dev" for the app to work. and it works correctly on localhost.

when I open the app from a mobile on the same network, it works without a style, like if we installed the auth but without importing bootstrap !

how to solve this problem?

Solution

localhost or 127.0.0.1 is the loopback address for that one server, computer, or device. It will not be shared even if it's on the same network since it's the loopback address for the server, computer, or device it's called on. Since Vite's development server starts a local server, it'll only be available on that device.

To share it on the network you have to either set the server host in the config to your network IP, it should be something along the lines of 192.168.X.XXX.

export default defineConfig({
    ...
    server: {
        host: '192.168.X.XXX'
    }
});

Or you can set the server host using the --host flag if you're using the Vite CLI or in your package.json file.

"scripts": {
    "dev": "vite --host=192.168.X.XXX",
    "build": "vite build"
},

Or you can skip all that and build the assets before you share them on the network for testing on other devices, that's my preferred method at least.

npm run build

Answered By - Kim Hallberg

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)