SvelteKit, Vite, HMR & Devilbox

[robots4life]

https://kit.svelte.dev/ is almost out and I'd like to get it going with Devilbox. ❤️

Quite simple, running HMR on wss://devilskit.loc:24678 does not work.

Please check this example repo https://github.com/robots4life/devilskit to reproduce the error I am getting.

There is also a video of the error here https://github.com/robots4life/devilskit/tree/main/video_of_error.

All files are included in the example repo here https://github.com/robots4life/devilskit/tree/main/.devilbox and here https://github.com/robots4life/devilskit/tree/main/devilbox_compose.

Inviting the usual suspects.. @boumanb @science695.

[robots4life]

Further research shows that when using HTTPD_SERVER=nginx-stable in the .env file the https://devilskit.loc site just shows Upgrade Required meaning NGINX might not have support for HTTP/2.0 enabled.

When choosing HTTPD_SERVER=apache-2.4 the issue with continuos reloads persists due to wss://devilskit.loc:24678 not working.

edit:
In fact when going to http://localhost:24678 on either NGINX stable or Apache 2.4, Upgrade Required is given as error message.

[robots4life]

vitejs/vite#677 (comment) is possibly very related to this. The wss on port 24678 needs to be proxied to the PHP container as well.

How do I need to change the vhost template files to get such a setup going please?

I tried this for the NGINX template but am now getting a 502 on the wsdev location.

vhost: |
    server {
        listen       __PORT____HTTP_PROTO____DEFAULT_VHOST__;
        server_name  __VHOST_NAME__;

        access_log   "__ACCESS_LOG__" combined;
        error_log    "__ERROR_LOG__" warn;

        # Reverse Proxy definition (Ensure to adjust the port, currently '3000')
        location / {
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_pass http://php:3000;
        }

        location /wsdev/ {
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_pass http://php:24678/;
        }

    __REDIRECT__
    __SSL__
    __ALIASES__
    __DENIES__
    __SERVER_STATUS__
        # Custom directives
    __CUSTOM__
    }

[boumanb]

Hi there @robots4life,

I suppose you have a docker-compose.override.yml in your Devilbox root folder? If so, try adding the following under services: (if you already have a php directive just add the ports so that they are exposed to the host machine):

php:
    ports:
      # ---- Format: ----
      # [HOST-ADDR : ] HOST-PORT : DOCKER-PORT
      - 24678:24678

If you don't have a docker-compose.override.yml please create one and add the following:

# IMPORTANT: The version must match the version of docker-compose.yml
---
version: '2.3'
services:
  php:
    ports:
      # ---- Format: ----
      # [HOST-ADDR : ] HOST-PORT : DOCKER-PORT
      - 24678:24678

When finished please restart Devilbox and see if everything works fine. You can revert the changes that you've made to the NGINX template. I suppose this is all you need to resolve your problem; exposing the proper port to your host machine.

Please let me know how this works out for you!

[robots4life]

@boumanb 👋
Here is the thing. The app goes over 3000 and HMR over the secure websocket port 24678. I have both ports opened in the docker-compose.override.yml file. This is also included in the demo repo here https://github.com/robots4life/devilskit/blob/main/devilbox_compose/docker-compose.override.yml but obviously have that file in the devilbox root directory.

version: '2.3'
services:
  php:
    ports:
      # ---- Format: ----
      # [HOST-ADDR : ] HOST-PORT : DOCKER-PORT
      - 24678:24678
      - 3000:3000

If I forward 3000 in the NGINX template wss://devilskit.loc:24678 won't work. It will keep reloading the page as it cannot connect to it, at least not over wss.

If I specify ws in https://github.com/robots4life/devilskit/blob/main/vite.config.js but have the site on https://devilskit.loc it will tell me the connection is not secure, obvious result there.

However everything works just fine over http://devilkit.loc with ws.

Check this video to see what happens with wss enabled. https://github.com/robots4life/devilskit/blob/main/video_of_error/2021-03-19%2016-17-11.mkv

If I forward 24678 in the NGINX template then I just get Upgrade Required when visiting https://devilkit.loc. The app does not load at all, this despite both ports 3000 and 24678 opened.

Clone the repo https://github.com/robots4life/devilskit, npm install, npm run dev, you will see what happens. I think I need two ports proxied, 3000 and 24678 in the NGINX and respectively, Apache templates.

If you look at https://vitejs.dev/config/#server-hmr options are given as to where HRM runs. Here https://github.com/robots4life/devilskit/blob/main/vite.config.js you can see the different approaches I have tried out to get wss going.

Simply uncommenting/commenting this line https://github.com/robots4life/devilskit/blob/main/src/routes/index.svelte#L8 should make the paragraph appear/disappear without a reload.

One can specify a path, and perhaps setting the proxy to that path in the vhost template and adding the 24678 proxy port might make it work. However I am not sure about how to edit the vhost templates for either Apache or NGINX.

        location /wss/ {
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_pass http://php:24678/;
        }

In this comment vitejs/vite#677 (comment) someone seems to get things going, but this does not seem to apply to how Devilbox sets up things.

Someone suggested to try out this NGINX config but there seem to be errors with that as well.

server {
    listen       24678 ssl http2;
    server_name  __VHOST_NAME__;

    ssl_certificate           __SSL_PATH_CRT__;
    ssl_certificate_key       __SSL_PATH_KEY__;
    
    location /wss/ {
        proxy_pass   http://php:24678;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

[boumanb]

Finally made some time to investigate this. Sorry for my earlier response. I got things up and running locally using ws just like you. When switching to wss I get the same reloading behaviour. Firefox throws a SSL_ERROR_RX_RECORD_TOO_LONG which indicates that something is wrong with the server serving unsecure data over a secure connection.

I have taken a look at vitejs/vite#1992 and I hope it fixes the problem. I'm not able to dive in deeper at this moment.

Good job on providing all the things needed for reproducing the issue!

[robots4life]

It is exactly that issue with Vite so far not supporting wss, not the only one waiting for that pull request to go through.. 🕦 Thank you for confirming the bug on their end. As soon as the request is merged I will add more details here and then close the issue.

[robots4life]

SvelteKit now works with Devilbox, secure local dev domain and HMR!

svelte.config.js

import { readFileSync } from 'fs';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte',
		vite: () => ({
			server: {
				host: '0.0.0.0',
				port: 3000,
				https: {
					key: readFileSync('/shared/httpd/devilbox/ca/certs/mass/skdevkit.loc.key'),

					cert: readFileSync('/shared/httpd/devilbox/ca/certs/mass/skdevkit.loc.crt')
				},
				hmr: {
					host: 'skdevkit.loc',
					protocol: 'wss',
					port: 24678
				}
			}
		})
	}
};
export default config;

npm run dev -- --host 0.0.0.0

vitejs/vite#1992 is solved, thx to the Vite team!

[robots4life]

A heads up on #709 (comment).

I had to run

sudo find . -type f -exec chmod 664 {} +

and

sudo chown 1000:1000 *

on the ${DEVILBOX_PATH}/ca/certs directory for latest versions of Svelte and SvelteKit to be able to access the .key and .crt file from Node.

Running ./check-config.sh in the Devilbox installation directory then also did not complain about issues any more.

[robots4life]

Current status.

npm ls

├── @sveltejs/adapter-auto@1.0.0-next.34
├── @sveltejs/adapter-node@1.0.0-next.73
├── @sveltejs/adapter-static@1.0.0-next.29
├── @sveltejs/kit@1.0.0-next.308
├── autoprefixer@10.4.4
├── env-cmd@10.1.0
├── eslint-config-prettier@8.5.0
├── eslint-plugin-svelte3@3.4.1
├── eslint@7.32.0
├── postcss@8.4.12
├── prettier-plugin-svelte@2.6.0
├── prettier@2.6.2
├── svelte@3.46.6
└── tailwindcss@3.0.23

svelte.config.js

import { readFileSync } from 'fs';

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		// Adapter Static start
		// https://github.com/sveltejs/kit/tree/master/packages/adapter-static
		adapter: adapter({
			// default options are shown
			pages: 'build',
			assets: 'build'
			// fallback: null,
			// precompress: false
		}),
		prerender: {
			// This can be false if you're using a fallback (i.e. SPA mode)
			default: true
		},
		// Adapter Static end
		vite: {
			server: {
				host: '0.0.0.0',
				port: 3000,
				https: {
					key: readFileSync('/shared/httpd/devilbox/ca/certs/mass/skit.loc.key'),

					cert: readFileSync('/shared/httpd/devilbox/ca/certs/mass/skit.loc.crt')
				},
			},
			define: {
				// env-cmd https://blog.hdks.org/Environment-Variables-in-SvelteKit-and-Vercel/
				'process.env': process.env
			}
		}
	}
};

export default config;

With this config and npm run dev the app works under https://skit.loc:3000 without endless reload, HMR works fine.

If a .devilbox folder with nginx.yml is included in the root of the project going to https://skit.loc returns a 502 Bad Gateway from nginx.

If no .devilbox folder is in the root of the project going to https://skit.loc returns a 404 Not Found from nginx.

Using npm run dev -- --https --host 0.0.0.0 creates an on the go cert for example.org and will not be accepted for the local domain.

Having any of the options for HMR does not change anything under https://skit.loc however under https://skit.loc:3000/ these options lead to the known endless reloading issue.

				hmr: {
					host: 'skit.loc'
					protocol: 'wss',
					port: 24678
				}

nginx.yml

---
# Nginx Reverse Proxy Template defintion for vhost-gen.py
#
# The 'feature' section contains optional features that can be enabled via
# conf.yml and will then be replaced into the main vhost ('structure' section)
# into their corresponding position:
#
#    __XDOMAIN_REQ__
#    __ALIASES__
#    __DENIES__
#    __STATUS__
#
# The features itself also contain variables to be adjusted in conf.yml
# and will then be replaced in their corresponding feature section
# before being replaced into the vhost section (if enabled):
#
# XDomain:
#    __REGEX__
# Alias:
#    __REGEX__
#    __PATH__
# Deny:
#    __REGEX__
# Status:
#    __REGEX__
#
# Variables to be replaced directly in the vhost configuration can also be set
# in conf.yml and include:
#    __VHOST_NAME__
#    __DOCUMENT_ROOT__
#    __INDEX__
#    __ACCESS_LOG__
#    __ERROR_LOG__
#

###
### Basic vHost skeleton
###
vhost: |
    server {
        listen       __PORT____HTTP_PROTO____DEFAULT_VHOST__;
        server_name  __VHOST_NAME__;

        access_log   "__ACCESS_LOG__" combined;
        error_log    "__ERROR_LOG__" warn;

        # Reverse Proxy definition (Ensure to adjust the port, currently '3000')
        location / {
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_pass http://php:3000;
        }

    __REDIRECT__
    __SSL__
    __ALIASES__
    __DENIES__
    __SERVER_STATUS__
        # Custom directives
    __CUSTOM__
    }

###
### vHost Type (normal or reverse proxy)
###
vhost_type:
    docroot: ''
    rproxy: ''

###
### Optional features to be enabled in vHost
###
features:
    # SSL Configuration
    ssl: |
        ssl_certificate           __SSL_PATH_CRT__;
        ssl_certificate_key       __SSL_PATH_KEY__;
        ssl_protocols             __SSL_PROTOCOLS__;
        ssl_prefer_server_ciphers __SSL_HONOR_CIPHER_ORDER__;
        ssl_ciphers               __SSL_CIPHERS__;

    # Redirect to SSL directive
    redirect: |
        return 301 https://__VHOST_NAME__:__SSL_PORT__$request_uri;

    # PHP-FPM left empty, as we are an reverse proxy configuration
    php_fpm: ''

    alias: |
        # Alias Definition
        location ~ __ALIAS__ {
            root  __PATH__;
        __XDOMAIN_REQ__
        }

    deny: |
        # Deny Definition
        location ~ __REGEX__ {
            deny all;
        }

    server_status: |
        # Status Page
        location ~ __REGEX__ {
            stub_status on;
            access_log off;
        }

    xdomain_request: |
        # Allow cross domain request from these hosts
        if ( $http_origin ~* (__REGEX__) ) {
            add_header "Access-Control-Allow-Origin" "$http_origin";
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            add_header 'Access-Control-Max-Age' 0;
            return 200;
        }

Not sure what to do to have the app running under https://skit.loc without adding the :3000 port to the URL.

[cytopia]

This integration test generates a working reverse proxy (via http/https without the additional port). You can generate it and compare it against your example:

https://github.com/cytopia/devilbox/blob/master/.tests/tests/rproxy-javascript.sh