Nginx dev config for Quasar HMR with backend api

To serve dev site on static url of https://dev.host.to/$project through nginx server

Nginx snippet

/etc/nginx/snippets/quasar.conf
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
set $devport 9999;

# serve index.php at https://dev.host.to/$project/backend
location ~ ^/(?<project>\w+)/backend/ {
	try_files $uri $uri/ /$project/backend/index.php$is_args$args;
}

# serve web socket of quasar dev server at https://dev.host.to/sockjs-node for HMR
location /sockjs-node {
	proxy_http_version 1.1;
	proxy_set_header Upgrade $http_upgrade;
	proxy_set_header Connection "Upgrade";
	proxy_pass http://127.0.0.1:$devport;
}

# serve quasar dev server at https://dev.host.to/$project/
location ~ ^/(?<project>\w+)/(?<path>.*) {
	proxy_pass http://127.0.0.1:$devport/$path;
}

Quasar conf

quasar.conf.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = function (ctx) {
  return {
	// ...
    build: {
      publicPath: '/$project/',
      forceDevPublicPath: true,
      vueRouterMode: 'history',
    },

    // ...
    devServer: {
      publicPath: '/',
      historyApiFallback: true,
      public: 'https://dev.host.to/$project',
      port: 9999,
    },
  }
}