HMR and Vite dev

💻 Development
7

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:

  • Make sure to have HMR_enabler app enabled
  • Clone nextcloud-docker-dev and follow the setup
  • Create in nextcloud-docker-dev/data/nginx/vhost.d a file named ‘nextcloud.local’ with contents:
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;
}
  • Make sure you’ve specified IP_BIND=0.0.0.0 in your nextcloud-docker-dev/.env file
  • I’m running docker compose up -d nextcloud with 1 adjustment to the nextcloud service:
    I’ve added a bind mount volume: - your-directory/bookshelfs:/var/www/html/apps-extra/bookshelfs
  • Add a serve script to package.json "serve": "BASE=${BASE:-/apps-extra/bookshelfs} NODE_ENV=development vite --mode development serve --host", Adjust depending on where your app lives.
  • Adjust vite.config.ts accordingly (cfr. Line10-40)
  • I needed to have build the files once already (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.

1 Like