Hello there,
I’ve been looking for a way to make HMR (Hot Module Reload) possible when developing my frontend. Currently I use vite --mode development build --watchcombined with a manual complete browser reload, which works, but I wonder if someone has a working dev setup with actual HMR? (In vite//vue3?)
I also tried using a reverse proxy, but did not succeed so far.
(Starting a new topic as the other one is potentially outdated? )
What do you need to do with Reverse Proxy? If you situation is your Nextcloud server does not have a public fixed IP address and you want to make it available online a safe way, I can share the solution we use based on CloudFlare (within free offer).
Haven’t yet been able to use devtool to debug Nextcloud client apps. Still wasting time with console.log
I asked in recent times in the NC team and there I was referred to the text app. They implemented it in a PR. No clue how well it works.
How did you try it? Did you use the Vite reverse proxy feature or an external one?
Regarding your question @denisosteo:
Vite makes some assumptions about the project structure. This does not match with the NC structure thus you need some mapping done here.
Explicitly formulated, Vite assumes there are dedicated frontend (HTML/JS/CSS) and backend servers. They might be mapped into one root HTTP server (using a reverse proxy) but are per se separated. Thus Vite server serves all JS/HTML/CSS content in a minimalistic frontend server. You as a dev are responsible to get data aka access to the backend.
With NC, we do not have one monolithic frontend but each app has their own. As a consequence, there are frontend-related URLs in the complete HTTP tree distributed.
The dev using Vite must now decide on how to handle this. Theoretically, there are a few options. Let’s assume, we are talking about an app foo in the custom_apps folder (just to show what kind of URLs are involed):
/apps/foo: the main HTML page is servered/apps/foo/data: some data is available as REST endpoint/ocs/v2.php/apps/another-app/bar additional endpoints needed (e.g files) to obtain data/custom_apps/foo/js JS files of Foo/custom_apps/foo/css CSS of FooBy default, the Vite server will serve the current project under /. Thus, the CSS files would be /css.
You could forward all requests to /custom_apps/foo/{js,css} to the vite server and the rest to the actual NC server. This is what the text app did.
This means, you have to configure your local dev server/proxy to work with your local dev environment. Especially in a docker environment, this can get a bit hairy as you have to access the host OS from within a container. Also, you can only work on one instance at a time as each vite server runs on a different port. So, you might need to adopt your config regularly.
Vite knows of the overall problem and allows you to configure an appropriate proxy. You would in the browser then go to the vite URL and Vite would route any unknown endpoint to the backend server (NC).
I would personally prefer this solution as I do not see any big drawbacks but I failed to set it up correctly. Maybe I was too quick to drop it.
Chris
I use the following configuration:
The Ubuntu server connects and maintains a tunnel to Cloudflare server.
When user access the nextcloud url, all request are forwarded to ubuntu server.
Very stable and quite fast.
Also benefit of all security of Cloudflare.
This is not about security or providing the NC interface to the WWW.
Instead, the OP wants to develop (thus the development category) his Vue app for easier and faster coding experience. To do so, one typically has a local dev environment (a small installation) accessed on localhost with all security measures lowered in order to dig into the stuff. Cloudflare would be very nasty at that point if I do not misunderstand what you want.
Hi all, thanks for your replies!
I’m indeed trying to set it up for development. With your comments @christianlupus , (it gets hairy indeed 
), I will try once again with your suggestions and reach out here if I’ve found something to work.
(I’ve actually been doing the opposite so far; using an external reverse proxy to redirect me from nextcloud.local to the vite-dev/web-server.)
Hi there,
Once again thanks for the pointers! I’ve succeeded in using HMR now with Vite for Vue3. I did made some adjustments.
When I serve to http://nextcloud.local/index.php/apps/bookshelfs/ , nginx proxies requests to
my vite dev server at http://localhost:5173/.
An overview:
location ~* ^/apps.*/bookshelfs/ {
rewrite ^/apps.*/bookshelfs/(.*) /$1 break;
proxy_pass http://host.docker.internal:5173;
# fallback to nextcloud server if vite serve doesn't answer
error_page 502 = @fallback;
}
location ~* ^/(@id/|@vite/|node_modules/|js/|src/) {
# rewrite ^/apps.*/bookshelfs/(.*) /$1 break;
proxy_pass http://host.docker.internal:5173;
# fallback to nextcloud server if vite serve doesn't answer
error_page 502 = @fallback;
}
location @fallback {
proxy_pass http://nextcloud.local;
}
IP_BIND=0.0.0.0 in your nextcloud-docker-dev/.env filedocker compose up -d nextcloud with 1 adjustment to the nextcloud service:- your-directory/bookshelfs:/var/www/html/apps-extra/bookshelfs"serve": "BASE=${BASE:-/apps-extra/bookshelfs} NODE_ENV=development vite --mode development serve --host", Adjust depending on where your app lives.npm run build)Should I update Customize nginx config - nextcloud-docker-dev ?
FYI: Sorry if my explanation is a bit messy, I hope to write it out cleaner at a later time.
Honestly, I am unsure why you need the second location block. In general, I would say, it should be documented somewhere in a clear way. @juliusknorr, should this be put into the nextcloud-docker-dev documentation or somewhere else?
I am not sure if he will be available the next days, so let’s hope for the best. If there is no reaction within a week, I’d open an issue pointing to this chat and ask for his opinion. Personally, I would see it there in a dedicated chapter (how to setup vite), but this is my opinion.
It should be already possible since feat: Add support for nginx vhost config drop-ins by mejo- · Pull Request #367 · juliusknorr/nextcloud-docker-dev · GitHub and also documented