Daniel Roe - What happens when you start Nuxt 3: A Deep Dive (Hackathon Flash Talk)

[Music] so the aim today is uh to give a deep dive into nux3 specifically what happens when you type yarn noxi dev because you know what you see you see there's an up cli you have got a server that starts vt warms up there's a veet server nitro spelt and then if you actually just go to your

to your browser you can actually see what you've just started so there's next server you can then develop and code in peace but what happens under the hood to make that possible and i'll be as quick as i can but save up all the questions you might have this you might be interested if you just want to know what's happening but i really hope that as i show you what's going on under the hood you might spot opportunity to improve things make them better or if the next time you

encounter something that isn't working in your next app you you'll know where to dive in so we're going to start in uh nuxi itself um so we have this main function which is the starting point whenever you run a noxi command and all this does is pass your arguments and figure out what command to run it then picks the command from an array and passes all the past arguments to that command so you can see the different commands that naxi has here um and they're all lazy loaded in

different chunks when we build noxi into a binary um so that means only the code that you need to process the command you're doing is loaded so here we're interested in the dev command so if we open up the dev command we have it wrapped in this nice type helper called define next command which just allows us to add some metadata so if you if you type nuxi help it'll tell you what you can run and what the the commands arguments might be but all that happens when you run nuxi dev is this invoke

function so that's what we're going to dive into the first thing that john nupsidov does is create a server um out of the box it creates a server uh that's by the way why you can't configure your server port and options in your next config file as you might have done in nux2 it's because the server happens far before we even pass that file it happens straight away you can configure all of that with command line arguments or with with environment variables as well

the thing we use to create that server is from list then a list then is a package that we've released separately and put in the unjs github organization um like many of the packages that i'm going to talk about today um packages in the unjs organization we have produced the nux team have produced as we've been writing and coding but they're really meant for everybody the aim is it's universal javascript that hence on js so

not just for next and not just for node either um everything there should work in the browser as well or in cloudflow workers or in dino the concept is you're able to for example in this case have an http server that doesn't need to be run in a node environment and that's the server that we use and that we start when we first start your nuxi dev command technically this probably could be run in your browser but that's not how we run it at the moment we run it in the command line and

once that server is up and running then we figure out where the next uh instance is going to be it's either going to be the directory we're running the command in or if you've passed an argument then we're going to load it from there and then we pull in these two crucial commands load and build next from uh nuxt kit itself this helper function just returns uh nuxed kit that does so resolved not from where noxie is but from your project itself now next kit is