1

I am building a web app that uses (mobile devices's) camera, but this is working only on https and localhost.

The web app is served locally using WAMP 3.2.9.

I've managed to use the secure protocol (https) within my wamp configuration, but I'm having problems when I want to share my app to my local network so I can view the app on my phone and test the camera functionality.

In the older versions of Laravel (which used webpack) this was very easy using browsersync, but now, using Vite I don't know exactly how to do this.

My local domain is myapp.test and can be accessed using both http and https.

I tried to use npm run vite --host, which shows the local and network address as well (ex. 192.168..), but when I visit that address on my phone, I can see only the Vite default page This is the Vite development server that provides Hot Module Replacement for your Laravel application., but not the app itself.

In my vite.config.js file I added that ip from vite network:

server: { https: true, host: '192.168._._' }, plugins: [ laravel({ input: [ 'resources/css/app.css', 'resources/js/app.js', ], refresh: [ ...refreshPaths, 'app/Http/Livewire/**', ], }), mkcert() ],

Note that I also used the mkcert vite plugin to allow me to use https.

Now I'm confused about the vite service that runs on port 5173 by default and the app that should run on port 443 to be on https.

I've also tried using `php artisan serve --host 192.168.. which works on my local network, but it doesn't work with https, so I had to focus on WAMP only.

So how can I have my app shared among my local network with https?

Improve this question

1 Answer 1

Reset to default
2

I'll explain about how Vite works compared to Webpack to hopefully help you understand a little better.

Both Webpack and Vite create a bundle of files when using the build commands to compile for production. Using the dev command, that it seems like you're using, they work a little differently. While Webpack watches for file changes to recompile the bundle and BrowserSync then reloads your assets for you, Vite starts a local server to serve the compiled files. This means that you don't proxy your original domain like with BrowserSync. Vite also creates a file in your public folder called "hot", which tells Laravel which url it should use when using the @vite() directive or the Vite::asset() method. Because of that you can use your original domain myapp.test even for the hot reloading of the dev command. I don't think Laravel actually supports --host and if it doesn't I haven't been able to find it or figure it out.

I did find https://github.com/Applelo/vite-plugin-browser-sync to hopefully solve your testing on other devices but I couldn't get it to work with https, otherwise I'm afraid you might have to look into something like ngrok and use the npm run build command instead of dev until better support is built into Laravel.

Update: To configure the BrowserSync plugin you have to manually configure the proxy:

VitePluginBrowserSync({ bs: { proxy: 'http://myapp.test/' // The usual access URL } })

Since it doesn't seem like Laravel supports --host I have been able to find a workaround: because Laravel reads the asset host URL from the hot file in the public directory, you can replace the contents with the external Vite URL like http://192.168.1.37:5174 after running npm run dev --host. This will make Laravel use that URL when referencing any assets.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you for your explinantions @K1ll3rM. How exactly did you managed to get vite-plugin-browser-sync working? I tried to follow the documentation and added it to vite.config.js file within plugins, but later when I visit one of the provided addresses (Local or Network) I always see the Vite webpage (the one with the message 'his is the Vite development server that provides Hot Module Replacement for your Laravel application.' I've run 'npm run vite --host'. In the end, as a temporary fix, I've configred my phone's Chrome to allow camera function on my insecure url using 'chrome://flags'
@Spidey Have you gotten it to work without browser sync first? If so then read my updated answer. I hope it works for you!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.