-
Notifications
You must be signed in to change notification settings - Fork 466
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Switch to nuxt server and apply base path #1746
base: master
Are you sure you want to change the base?
Conversation
How do you think we would run this in development with HMR on the client? To get this working locally I went to the client and did When working on the client I rely on nuxt built-in HMR but I'm not sure how to get this working if we aren't able to run the client separately. I guess we could create a development path when running the server that doesn't use ClientRouter. |
I looked at sortablejs and it isn't being used. I'm not sure how that happened, I think originally I wasn't using vuedraggable or something like that. |
HMR should kick in when manually running "nuxt start" in the client folder. Unless I messed up the proxies. During tests I did manage to run them separately, though I might have changed things since then Ah, you mean the proxies that were redirecting go absolutely paths? I was going to ask about those. What exactly needs to be provided where? And yes, maybe just disabling the clientrouter start when running in debugging mode? |
What are you using for ClientPort and Port when running the server? Are you doing Then |
Sorry, I think I totally missed your point there (I should really go to bed). You mean the client port when running nuxt in Dev Mode? |
Can you break down how you are running the client and server separately? |
Oh and I did run some benchmarks. It did look like it was running marginally slower than before. Which would make sense when not statically serving, and with the nuxt overhead. Will post tomorrow if I remember. |
Can't copy paste, but of I'm not mistaken I used the launch script for the server (I commented out the In the client dir I built nuxt using I do remember that nuxt kept shuffling the script order around. And changing the |
Just jumped on the laptop for a second. I see the issue you're having. Because the port is different now, calls, e.g to Yeh and the manifest is misbehaving again. Guess I'll still have to do some housekeeping tomorrow... Sorry for the comment spam, just running |
The problem for me is that running DevUsing 2 terminals to run client and server separately. Client: Server: With the updates I made I'm able to use the same development environment as before. Prod (locally)Running in production locally to test with a different base path. For this I'm not running the client/server separately. Client: Server: module.exports.config = {
Env: 'production',
Port: 3333,
RouterBasePath: '/abs',
ClientPort: 3333
}
|
Got you. I think. Though I couldn't get the server to work in production mode with the client sport the same as server port. Nuxt can't start, as 3333 is already in use. When keeping the client port, the client successfully connects to the server at I haven't really tried running nuxt from The manifest issue seems to be some kind of caching error, nuxt sometimes tries to load the wrong hash. I'll try to sneak in some updates throughput the day and report back. |
Running both the server, as well as nuxt in dev mode worked for me without any issues (apparently the manifest doesn't load in dev mode, yay). Thanks for your quick Feedback! |
As for performance, with using nuxt programatically it might even be a bit faster, though I'm not sure how lighthouse defines "Backend Latencies". JS Payloads are significantly reduced and server response times practically unaffected:
|
@advplyr Of course I did not consider the debian packages after you explicitly told me about them. Thats also why the tests are failing. The Including the Update:Including the client's |
}, | ||
|
||
// Global CSS: https://go.nuxtjs.dev/config-css | ||
css: [ | ||
'@/assets/app.css' | ||
], | ||
|
||
favicon: '/favicon.ico', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't see anything about this property in the nuxt docs. What does this do?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This currently gets read in the plugins/favicon.js
plugin (the one I was not so happy about):
export default function ({ $config }) {
const faviconPath = $config.favicon || '/favicon.ico'
const link = document.createElement('link')
link.rel = 'icon'
link.type = 'image/x-icon'
link.href = `${$config.routerBasePath || ''}${faviconPath}`
document.head.appendChild(link)
}
I built the executable on Windows and it is working well except for the manifest. I haven't looked into the manifest yet. The windows binary is 114MB now and was 41MB before. I also wasn't able to get the standalone to work. From my understanding this would allow us to bundle the client without all of the node modules used for building. The full |
I haven't given up yet 😉 I may have a solution through |
Awesome I didn't notice that Nuxt3 had the standalone server. https://nuxt.com/docs/guide/concepts/server-engine#standalone-server nuxt/bridge looks like a perfect in-between step for us. Thanks for looking into all of this! |
I used nuxt3 back when it was in pre-before-almost-alpha. I found that feature pretty useful, but most modules and plugins were in a pretty broken state back then. But since they finally officially released v3, it does seem a lot better. I will commit an in-between version here just document my updates before I forget what I'm doing. I did have to update / alter / remove some packages due to incompatibility or they were no longer necessary:
It looks like it's mostly working, haven't been able to thoroughly check yet. Funnily enough the one thing I definitely didn't test, is if the base path updates lol. Docker container works as well. |
What version of node and npm are you using? |
16.20 Unless I forgot to change back from 18.x
|
Just asking, what are the advantages of the change compared to the current solution? I am not at all familiar with the individual server variants, but I am curious. |
@Hallo951 The issue we are fundamentally trying to tackle is #385 (sorry, didn't include that in the original description). I proposed #1724, built was not very robust and would not have worked when packaging into an executable. To make the solution more robust, I tried several routes and settled on running the client directly through Coincidentally, this now also is the first step on the way to eventually migrate to In case you were wondering why supporting a dynamic base path is important, it is a key ingredient when running multiple services behind a reverse proxy. E.g you could have running a webserver under |
Aha, I thought it had something to do with performance or stability. Thanks for the clarification, but after your explanation it's still not quite clear to me what it's for. Have I understood correctly that it is essentially about the integration of ABS into websites? What does this nuxt3 do differently from the current implementation? |
All that is a side-effect though, the original issue is just that you cannot change the base path for ABS at the moment. Currently ABS uses However, I do think using |
Great summary of where we are at. I didn't have much time yesterday to try anything Here was the issue I saw making me think it is Windows specific nuxt/bridge#84 |
@advplyr I have to restart my system in order to test Windows, so great that you're doing it. Is nuxt also eating up your commandline or is this a me-issue? I mean, it's great, all the warnings and errors are gone. But only because a very hungry nuxt progress bar solwly makes it's way up lol... I also get a |
Yep nuxt is eating up my commandline. It makes it difficult to catch errors. Currently I had those errors mentioned in that issue I linked |
I piped the output to a file, that way only errors showed up and stayed there.
Not sure if that works on windows |
Ah, pkg can't deal with ES modules. Gotta love the transition from commonjs to modules, always a great time. I'm sure I can somehow coax rollup to generate commonjs. The options are all there (I think), just have to sift through the Plugins nitro injects... |
Ugh yeah. We may also find an alternative to |
No worries, don't think we should rush this. If you're not attached to pkg I'll be on the lookout for an alternative. Though even the upcoming node 20's Single executable applications currently only support commonjs... |
It will take some time to explore the options we have when packaging the application. There aren't many alternatives that are as plug and play as pkg. There is nexe, but that's still stuck at Hopefully I'll have something by the end of the week. Electron works with |
cc6e6a8
to
0c0b981
Compare
I thought way too complicated. Anyway, when appending another I will now work (again) on the actual issue I wanted to solve, I'm pretty sure I broke the base path again. Also managed to produce some manifest and icon errors again again. But now that I have a functioning base to work on it shouldn't be too hard. |
0c0b981
to
6094b99
Compare
6094b99
to
03ed99d
Compare
Short update: Nuxt in server mode still prerenders all pages as html. That means the scripts and assets all initially load from the wrong basePath. More fiddling around. Looks like this will take a while. But at least it should prepare wuite well for nuxt3. |
Just got back to my home office so I can help with testing again. |
I'm not sure anymore what nitro changed. I will roll back to the previous attempt and test tonight (that's in about 9 hours). Now that I have worked with the nuxt esbuild combination more intimately, it might be possible to bundle the non-bridge version into a single file. Though it did work very differently without bridge (requiring I think I was going through the html files and replacing things before, but maybe I am confusing that with the initial attempt. When packaging for Linux / WIndows we can no longer rewrite files, as any method of packaging will introduce a read-only virtual filesystem. Unless we want to write a massive package-building gulp script, but I'm not ready for that... |
You were right, I solved it by using relative base paths. I can do the same with nuxt. Manifest ist still an issue, but that can be a solve. |
Adresses #385, expanding on #1724
Updating nuxt to a server target went fairly well, although polishing (as always) revealed some quirks of nuxt:
./
at build time@nuxt/pwa
, so some open heart surgery was needed, thugh significantly more robust than the original pull request Fix: apply base path to client and websocket #1724nuxt.config.js
=>header
BEFORE the<base>
tag containing the router base path. This means, bothSortable
lib and thefavicon
are not dynamic. I have created plugins for both of them (sortable, favicon), which I'm not very happy about. Especially loading the favicon after the scripts is not ideal.nuxt start
, I have not been able to get the supposed--standalone
mode to work, so the client dependencies are necessaryIn it's current state, it has been working throughout my local tests. I did run the same tests in the docker image, where for some reason the
icon.svg
as well as theSortable.js
lib return 404 errors. Not sure what the issue is here, but I've been staring at this for too long, probably just missing something simple.In case you're wondering about the order changes in the Dockerfilec, this was mainly done for cache efficiency. I had the client dependencies install again every time I fiddled with the
nuxt.config.js
, so I split copying thepackage.json
and the rest of the code. Similar deal with the other copy commands, I tried ordering from least to most often changed.