Local Environment (Flynt Next)

[pierreberchtold]

I have two questions about local environments:

• is it possible to test the website on a mobile device locally? It use to work with Flynt 1 and I can not get it work on the next branch.
• do I get it right, that Flynt next requires me to generate a certificate and mark it as trusted in order to make it work on Safari or Brave? On chrome it seems to work without a certificate.

[domtra]

hi @pierreberchtold ,

regarding your questions:

1. in flynt 1 we used browsersync. this meant, that we proxied the entire wordpress server on a specific port. in order to get live reload, etc. you had to visit this port either with localhost:3000, for example, or with LOCAL_IP:3000. vite works a bit different. in dev mode, files are not written to the disk but served from memory through a separate dev server. this is why we have to include the asset files from the dev server and cannot just use a file on disk through wordpress' web server. as a result, the regular domain you set up for wordpress now automatically includes live reload, etc. but this also means that we not take care of exposing you wordpress installation in the local network. now you have to take care of this yourself. that means, if you run wordpress on a port on localhost, for example with wp-env and also bind that to you local ip, you will be able to access that ip from a different device in your network. i hope that makes sense. you might additionally need to bind the vite dev server to 0.0.0.0 or ::1 instead of localhost in order to access the compiled assets from the local network as well. let me know if i can support you in that.
2. if you local wordpress instance runs on http, you do not need any certificates and can just use vite dev server without any extra config. if, however, you server wordpress with https, the vite dev server should also run in secure mode, otherwise most browsers will reject the loading of the assets or the websocket connection. this is why we advice you provide a trusted ssl certificate and key through the environment variables. for development, we use mkcert and can use the same certificates as we use for our wordpress server. here you can find more info and also a link to a vite plugin for an alternative way to get a certificate. this will cause warnings in the browser though.

in general, the setup is not a bit different and requires different strategies than before. however, the development experience does improve a lot with vite, it generates more modern bundles and compiles a lot faster that anything we did before.

hope this helps and you can find the best setup for you. let me know if you need anything else.

[pierreberchtold]

Hi @domtra ! Thank you very much for your detailed answer. Using vite is for sure a nice update. I guess we will define our own best practices for our team concerning testing localy on a mobile device.