SvelteKit, Vite, HMR & Devilbox #797
Comments
|
Further research shows that when using When choosing edit: |
|
vitejs/vite#677 (comment) is possibly very related to this. The 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 |
|
Hi there @robots4life, I suppose you have a php:
ports:
# ---- Format: ----
# [HOST-ADDR : ] HOST-PORT : DOCKER-PORT
- 24678:24678If you don't have a # 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:24678When 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! |
|
@boumanb 👋 version: '2.3'
services:
php:
ports:
# ---- Format: ----
# [HOST-ADDR : ] HOST-PORT : DOCKER-PORT
- 24678:24678
- 3000:3000If I forward 3000 in the NGINX template If I specify ws in https://github.com/robots4life/devilskit/blob/main/vite.config.js but have the site on However everything works just fine over
Check this video to see what happens with If I forward 24678 in the NGINX template then I just get
Clone the repo https://github.com/robots4life/devilskit, 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 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. |
|
Finally made some time to investigate this. Sorry for my earlier response. I got things up and running locally using 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! |
|
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. |
|
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;
vitejs/vite#1992 is solved, thx to the Vite team! |
|
A heads up on #709 (comment). I had to run
and
on the Running |
|
Current status.
├── @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
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 If a If no Using Having any of the options for HMR does not change anything under hmr: {
host: 'skit.loc'
protocol: 'wss',
port: 24678
}
---
# 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 |
|
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 |
|
I have tried everything, I think (and surely spent much time on this). Only works with HMR over
With https://github.com/robots4life/devilskit/blob/master/.devilbox/override/docker-compose.override.yml in root of Devilbox installation directory it gets even worse and reloads ``https://devilskit.loc` instantly. Not having a Also interestingly enough when the https option is specified with links to the certs in the repo it will lead to a 502 no matter what settings are given. See the various options in vite: {
server: {
host: '0.0.0.0',
// host: 'skit.loc',
// port: 3000,
// https: {
// key: readFileSync('./certs/devilskit.loc.key'), // leads to 502 immediately
// cert: readFileSync('./certs/devilskit.loc.crt')
// },
hmr: {
// host: 'skit.loc',
host: '0.0.0.0',
// protocol: 'wss',
port: 24678
}
},I have gone over these options https://vitejs.dev/config/#server-host many times as well, perhaps I have missed some, bottom line, for now I am working in
And yes, between each change of any of the Devilbox files I did a full |
|
The Vite and SvelteKit crew have closed the issue on their end |
|
@robots4life do you want to document all the steps you've taken and the current open tasks in the wiki of this repository? Once this issue will be closed, all that information will most likely be lost (except if you dig deep into closed issues). I can then give it a shot and will amend any findings I might discover |
|
@cytopia I assume you refer to https://github.com/robots4life/devilskit when asking about documenting all the steps trying to get SvelteKit running on Also happy, if we can get it running, to write documentation for Devilbox i.e. under https://devilbox.readthedocs.io/en/latest/examples/sveltekit with the steps needed. Though not sure what repo and what you refer to with the current open tasks in the wiki of this repository. Could you clarify this ? |
I was refering to the wiki page of the Devilbox's GitHub repository, as I don't know how familiar people are with sphinx documentation for https://devilbox.readthedocs.io. So my idea was using this: https://github.com/cytopia/devilbox/wiki which might motivate more people to add some examples of what they've accomplished with the Devilbox setup. Popular topics can then be moved to the official documentation once they're solid. |
|
Yeah I can do that. Bottom line, I am happy to document this in any place you see fit so that other people can refer to it and get things running fine. I will start with documenting the steps in the https://github.com/robots4life/devilskit/blob/master/README.md, or at least write down there what I have tried with the results. |
|
@robots4life I just gave it a shot and it works without any problems via correct URL and https support. It is actually quite simple. So here's what I did: This is the relevant configuration from my DEVILBOX_PATH=.
LOCAL_LISTEN_ADDR=
TLD_SUFFIX=loc
PHP_SERVER=8.1
HTTPD_SERVER=nginx-stable
HOST_PATH_HTTPD_DATADIR=./data/www
HOST_PORT_HTTPD=80
HOST_PORT_HTTPD_SSL=443
HTTPD_DOCROOT_DIR=htdocs
HTTPD_TEMPLATE_DIR=.devilbox1. Inside the PHP container# Create project
mkdir /shared/httpd/svelte
# Create vhost dir and vhost-gen override dir
mkdir /shared/httpd/svelte/htdocs
mkdir /shared/httpd/svelte/.devilbox2. From the host system# Copy vhost-gen template
cd /path/to/devilbox/repository
cp cfg/vhost-gen/nginx.yml-example-rproxy data/www/svelte/.devilbox/nginx.yml3. Change port on vhost-gen template (from host system)cd /path/to/devilbox/repository
vim data/www/svelte/.devilbox/nginx.yml- proxy_pass http://php:8000;
+ proxy_pass http://php:3000;
4. Inside the PHP container# Ensure custom vhost config is picked up by renaming dir
cd /shared/httpd/
mv svelte svelte.bak
# Wait 2-3 seconds
mv svelte.bak svelte
# Create svelte project
cd /shared/httpd/svelte
npm init svelte@next my-app
cd my-app
npm install
# Start svelte
npm run dev -- --host 0.0.0.0Now you can go to https://svelte.loc/ with your browser and it works fine
It then also shows fine on the vhost page in the Devilbox intranet
Further automationIf you want the dev server to startup automatically every time the Devilbox starts, you can integrate it into pm2. The relevant documentation can be found here: |
|
Thank you for giving this a shot and obviously getting it to work. 🎉 |
|
I have started writing the documentation. Unfortunately bad news, I replicated how you got things to work exactly and face the endless reloading issue or rather HMR not working and not connecting. Can you do me a favor please and once you start the SvelteKit app on Do you have that in your console log ? When I follow what you did it never connects to the Vite HRM server and hangs at Also with how you did things, when you go into To keep things simple just opt for the Skeleton when you install the SvelteKit app, though regardless of what install option you choose the changes to the files should immediately be reflected by Vite's HMR. While you have the app running try going to |
|
|
HMR over HMR makes the changes available without a browser reload, i.e. form values are kept while one works on a form etc.
|
|
The I think it has issues reaching it through the reverse proxy. Are there any examples on how to set this up properly with an Nginx reverse proxy? |
|
This seems to be an example that should work, I have not tried it but will give this a go to check if things can be made to work with Vite and a Docker environment. I have a feeling though that it could be made to work with specific vite.server.hmr settings, however so far I have not found the right mix. This post suggests using a different port for HMR. vitejs/vite#3578 I have also found vitejs/vite#4259 (comment) and vitejs/vite#3093 as well. Not sure what is going on with the websocket connection and how to set it up correctly. |
|
For me the endless reloading stopped by:
With the following server directive in the vhost-gen yaml file: 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 '8000')
location / {
# redirect all HTTP traffic to localhost:3000
proxy_pass http://php:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_read_timeout 86400;
# WebSocket support
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
__REDIRECT__
__SSL__
__ALIASES__
__DENIES__
__SERVER_STATUS__
# Custom directives
__CUSTOM__
}And the following svelte.config.js import adapter from '@sveltejs/adapter-auto';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
vite: {
server: {
host: '0.0.0.0',
port: 3000,
strictPort: true,
hmr: {
clientPort: 443
}
}
},
adapter: adapter(),
// Override http methods in the Todo forms
methodOverride: {
allowed: ['PATCH', 'DELETE']
}
}
};
export default config;I then start it up via: npm run dev -- --open |
I can confirm, it works on
|
|
@cytopia have a look at the documentation of the example setup and let me know where I can be of help writing this up for your Devilbox documentation. If you could add websockets support to the vhost-gen templates of Apache 2.2. and Apache 2.4 I could write up a complete example. Bottom line, thank you for your help on this issue, if you need any help with doing something for Devilbox let me know, thank you. |
|
The documentation looks straigh forward 👍 For the values you asked me about, I actually don't really know what |
|
@cytopia https://github.com/robots4life/devilskit/issues/1 Having an issue with Nginx resolving the static build. If you have a little bit of time, it seems one has to add a Nginx conf setting, but I would not know how exactly to accomplish that, thank you. |
|
I've replied in your thread |
|
@robots4life when trying out your demo app I get the following error upon opening the project via browser: |
On the version of Devilbox I currently use it works ok.
I can see the SvelteKit app running under i.e. Have you tried it with running these above commands and still get the error ? Now perhaps the error comes from using the latest version of Devilbox. I assume you expect me to up update my Devilbox https://devilbox.readthedocs.io/en/latest/maintenance/update-the-devilbox.html and then try running the demo app again ? Another thing I could do is strip the demo app down to just the SvelteKit default install and the correct settings in Then it would be up to the user to decide if they like to use TailwindCSS with PostCSS at all and if so consult the available documentation on how to achieve this. Perhaps this is better, since users totally new to SvelteKit might otherwise believe that this is the default behavior while this is not true. However in the demo app I also include a form and show how to receive the post data on the server, for this to work with Devilbox during development the setting https://kit.svelte.dev/docs/configuration#csrf is set to In essence it boils down to having these Vite settings https://github.com/robots4life/devilskit/blob/master/vite.config.js#L8-#L15 and that makes it work with Devilbox and everything else is just additional "nice to have" options. |
This one works. I only see a demo page, so I can't judge if the functionality is correct.
If you switch to this version Devilbox v3.0.0-beta-0.2, then there is no need anymore for override templates. All you gotta do is add a # Websocket Proxy Backend
conf:rproxy:ws:php:3000I have also tried this one, which seemingly works as well # HTTP Proxy Backend
conf:rproxy:http:php:3000
Let me know which of the above works for you (a.k.a is the correct way to setup SvelteKit) |
|
https://discord.com/channels/457912077277855764/1078047640274599977/1078047640274599977 I found a super strange issue where https://kit.svelte.dev/docs/load#invalidation-manual-invalidation server: {
host: '0.0.0.0',
port: 3000,
strictPort: true,
hmr: {
clientPort: 443
}Here is an example of how it should work. https://learn.svelte.dev/tutorial/custom-dependencies Working on localhost:5173 works fine. Going to update to latest version of Devilbox to see if the issue persists and if so, we are back to square one with the endless reload issue, as that is what happens when I change the port to 5173 in the Vite config and in Checking with the SvelteKit team if there has to be a colon in the string passed to
So I assume having |
|
I have deleted and made a new ✅ The ✅ The ✅ The |
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:24678does 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.
The text was updated successfully, but these errors were encountered: