Setup the Qwik App

[00:00:00]
>> So find a directory on your computer, which is useful. And so there you do npm create qwik@latest, right? So this is our script to basically set up your directory structure with everything you need. So let's kick it off. It's going to ask you for a place where you wanna put this application, that seems like a reasonable place.

[00:00:23]
And you probably choose the basic app unless you're building a component, which is a library that others can consume, right? If it's a standalone application, you probably wanna have the basic application for QwikCity. And let's install npm. And that gets everything up and running. So now I can go into the Qwik app, and let's open up your favorite editor.

[00:00:49]
Visual code or whatever you happen to be using. And just rearrange things here, I apologize. Okay, so here we are, we are in Qwik, so the npm Quickstart basically generated all of this code for you. Step one is to get it going. So let's do npm run dev.

[00:01:24]
So dev mode is what gets our server up and running, and then opens up port 5173. So this is what you should see once 5173 comes up. Basically, it's just a very simple kind of Hello, World app. Currently, it has a root content here, and then there is a simple demo showing interactivity that's on a slash flower sub route.

[00:01:52]
So the first thing I think we could do is we just kind of, a lot of things happen here, so let's just talk about how all the pieces come together. So when QwikCity, when you kind of skeleton app gets created, so in the source folder, you have two main subdirectories, we have components and routes.

[00:02:13]
So routes here map to the routes over here, so you can see that this one is in a subdirectory called flower. And if you go into routes > flower subdirectory, you have the component that's in here, right? So this demo component here is equal to this file over here.

[00:02:34]
So because it's in routes > flower subfolder, this is what gets rendered. Make sense so far? Okay, but if you look at the component itself, you will notice that it starts at the input and it ends with, looks like just the dev. So it's really just this part right here.

[00:02:57]
The menu and also the footer are not part of the component. That's because they're part of the layout. So as you go up the hierarchy of the directories, you're looking for a file called layout.tsx. So if you go up one folder, you'll see that there's a file called layout.tsx.

[00:03:13]
So what's happening here is that the flower > index.tsx is getting embedded into the layout.tsx. And the embedding happens right here. So if I go to the section and I say class, sorry, style(border, oops, 1px solid red, You should see a box. Why don't we refresh? Where's the box?

[00:03:46]
What am I missing here? I can't type. There we go. So you can see where the layout of the page is and what the actual component inside of it is, right? And so if I go to the previous page, you're also gonna see the same exact layout in this location as well.

[00:04:10]
And you see that this box is red. So the idea is you create a bunch of layouts that kind of lay out the page, and then inside of these layouts, you place index.tsx, which is your actual page for this particular location. Between the layout and the index.tsx, you can kind of build up the applications you want.

[00:04:33]
If you go to layout, though, you'll see that, for example, there is a Header, and this Header is imported from the components directory. So inside of the components, this is just a convention, doesn't have to be there. We have the header.tsx, which gives us our logo, our docks, examples and tutorials, right?

[00:04:49]
So this part right here is our header that gets inserted in that location. And so you can build up your components as you would normally build up and build your application. So if you're familiar with things like Next.js or Sveltekit or SolidStart, these are all very similar ideas.

[00:05:13]
That in itself is not kind of interesting. What's interesting is basically what happens in here. So what is unique about this particular approach is that if you go into the JavaScript here, specifically, you can look at the amount of JavaScript that's being executed. Where is Network? We are filtering out vite because we're running in dev mode, so it doesn't count.

[00:05:35]
You noticed that no JavaScript is available on this page. But if I navigate to this other page, now the JavaScript shows up, and it's kind of hard to see. But the JavaScript only shows up for the relevant pieces of the page, right? So this is interactive. So the JavaScript only shows up when it becomes interactive.

[00:05:56]
And I think you can change the number of things, etc. Let's see what else to talk about. Okay, so what's unique about Qwik is how it bootstraps. So the classical way of bootstrapping applications is you create index.html, like we create some page. And then inside of the HTML, you say this is kind of the root element, and then you tell the framework to go and bootstrap yourself from the root element.

[00:06:25]
The problem with that particular approach is that you're kind of introducing an entry point, the main method, right? You're setting up a place where everything happens. And what Qwik wants to do is Qwik really hard tries to make sure that everything's lazy executable, lazy loadable. And so you realize that there is no single place of entry point, right?

[00:06:44]
For Qwik application, the entry point might be the thing you click on, the clicking on point A is different than clicking on point B. And so there's a different entry point. And so as a result, when you look at Qwik, there is a top level component that exists.

[00:07:05]
And this represents kind of the HTML, the head of the system, right? So you start declaring your page from the HTML. As you can see, there's HTML, there's head, there's subcomponent that includes the router header information. There is a component that does the routing outlet, the component that registers a service worker.

[00:07:27]
The service worker is used in production for prefetching all of the JavaScript so that the user never gets in a situation where the JavaScript is not fetched. So when you click on something, you know that JavaScript is already available. And so one of kind of big differences is that you start at the root.

[00:07:47]
So you go from the root and then you enter these layouts, right, that now add the main, the sections, the footer, and all the other pieces. Yes?
>> Going back to the service worker, is it easier to get Partytown working with Qwik-
>> Yes.
>> Than other frameworks?

[00:08:08]
>> Yes, so let's do this. I believe if you just do yarn, sorry, npm, npm run qwik add, and it says, what do you wanna add? And one of them should be Partytown, Partytown right here. And so now, you have Partytown included inside of your setup. So now if I go somewhere, I don't know, you must add the component, okay.

[00:08:39]
So yep, so this component here needs to be added into here. And then it needs to be imported. Oops, There we go. So now we have Partytown included inside of our site. Let's see, if I run, I should see Partytown now. One of the script tags should include Partytown, so which one is it?

[00:09:12]
That's white.
>> The iframes right below you.
>> Yeah, so this is the Partytown, iframe but it's probably one of the scripts. Yeah, this is the Partytown script right here. That's very, very straightforward. Okay, any questions before we start building actual app? So let's say we wanted to make a new route called contacts.

[00:09:46]
Right now, if you go there, there's 404, there's nothing here. So to do that, again, we go to our routes folder. And in here, we create a new file. And so in our case, we want contacts, /index.tsx. So every file has to end in index.tsx. So that creates an empty page.

[00:10:14]
And so the minimum thing we have to put in here is the thing we wanna render export default component. And this component is gonna just return. I'll look at that, autopilot to the rescue. Right, so this is the bare minimum kind of a code to print Hello, World.

[00:10:40]
So now if we go to this page and we refresh, and then Vite sometimes has troubles, let me restart Vite. Here we go. Now, it's showing up our component. So that's pretty straightforward. Now, we can do a couple of things, for example, we could choose a different layout.

[00:10:59]
So let's take this layout that's up here, and let's copy it into our contacts folder. And now, it's gonna complain about the header. It's probably because we have to do an extra, okay, perfect. And so now, what we end up doing is we will have the header twice, I believe.

[00:11:21]
We have nested the layout twice inside of it, right? And so sometimes you just basically wanna do completely different layouts. So one of the things we can do is we can rename this file to an exclamation point. And now, we're saying, don't keep going up the directory tree, but rather stop at this particular location and don't continue.

[00:11:45]
And you can put the exclamation point on index.tsx as well, so we can control it. And so in this case, let's just delete our header so that we don't have the header in here, and let's get rid of our styles. And so now we have our contacts. So maybe in here, we say h1, Okay?