Add support for secured sites and browsersync to vite

[marcorieser]

Changes proposed in this pull request:

• Configure Vite to use valet ssl certificates
• Add option to run BrowserSync on top of Vite which adds the ability to access local sites in the network

[robdekort]

This looks cool. Love how it's optional. I'll give it a test run next Monday!

[marcorieser]

I had BrowserSync running permanently yesterday. On the Mac I viewed the page via domain.test (valet and vite) and on the mobile via 192.168.178.93:3000 (Browsersync and vite). Everything worked fine in parallel. According to the documentation, they made sure that BrowserSync does not execute anything that Vite already does and it acts on Vite events.

[marcorieser]

Maybe tinkering a bit more with the expose (valet share) approach could be a good alternative which does not add something on top. Not sure if i have time for that on monday.

[robdekort]

Not sure what you're talking about but but you can make this a draft PR. Let me know when you want me to take a look!

[marcorieser]

Not sure what you're talking about but but you can make this a draft PR. Let me know when you want me to take a look!

No worries 😁 I was talking about expose (https://github.com/beyondcode/expose) which exposes local sites via secure tunnels (which then could be an alternative approach to Browsersync since that is available with valet anyway).

I experimented a bit yesterday but had no luck with sharing a non-https site trough expose (opened an issue on their repo). So I'd leave it at Browsersync for now. If we come up with something better in the future, we can remove Browsersync again.

I don't know if it makes sense to add the changes directly to the core, or if we'd rather create a section in the documentation for those who need it.

So, please have a look at it now.

[robdekort]

Interesting. I had never heard of this tool. I just tried it and got it working. Then I tried it again with expose and (non https) I didn't get my styles and JS.

[robdekort]

However this is a free and working solution that doesn't require any account or payment so I'm happy to merge in the browsersync changes. Do you think you can work this in so forms work? #222

[marcorieser]

Interesting. I had never heard of this tool. I just tried it and got it working. Then I tried it again with expose and (non https) I didn't get my styles and JS.

expose is very nice!
the issues are that non-https sites get redirected to https which leads to browsers blocking the vite url... plus the vite dev url does not get replaced (which probably could be resolved by setting the vite host explicitly to the app url)

Do you think you can work this in so forms work? #222

Will have a look as soon as I hit the forms part in my current project

[marcorieser]

Got forms working via Browsersync on my iPhone in the network 🥳
But there are some changes to the TokenRefresh endpoint needed: studio1902/statamic-peak-tools#7

Do you think you can work this in so forms work? #222

Not sure if I truly get, what the intend for that PR was, but as far as I can tell he wanted Browsersync to open the valet domain instead of localhost or the IP (@delz-dev can you confirm?). You have exactly that behaviour by just using vite (npm run dev) which made Browsersync obsolete. We reintroduce Browsersync just for proxying our valet domain trough a port to our local network (npm run sync) and in that case opening the IP is desired behaviour because the valet domain can not be resolved in the network.

[marcorieser]

One thing that came to my mind right now:
By default the following stuff is synced between the connected browsers/devices. Do you think this is nice by default (it can be disabled via the Browsersync UI in the browser) or should we disable everything by default?

[robdekort]

Cool stuff. I like the defaults btw. Seems good to me.