Setup SolidJS with Vite

[00:00:00]
>> Congratulations for making it so far. This has been a lot of heavier stuff. Next up, we're actually gonna kind of build some stuff together. It's easiest to do this with something like StackBlitz. So if you go to the course website, you'll see under Building an App. Now we can go and build an app and Solid generally we have a couple of ways to get started.

[00:00:23]
One, the most common one is we just have templates and these are built using Vite, most of our ecosystem's been built with Vite. We have support for Rollup and Webpack as well. But Vite is where all our starter templates are. And then we also have starter kind of meta framework similar to something like SvelteKit or Next.js that we're gonna look at a little bit later but for now we're just gonna keep it simple.

[00:00:50]
And StackBlitz like luckily has a very easy way to get started with Solid literally https://solid.new. And I love this, it starts up so quickly. It's just like Bam. So solid.new and we can get to building an app. So here we are. This is a very simple example that we put in the base template here, very much inspired by an old project to create React app where they had a spinning logo.

[00:01:28]
And you can get an anatomy for a basic Solid project. We have our vite.config which uses our solidPlugin and a few other settings that are specific to some can make StackBlitz work here. We have an index.html which is essentially the root of our project. We just add a script tag that links to our source root and then we're pretty much good to go.

[00:01:54]
This is just the HTML of our page. And we can call it whatever we want. This is Solid App, maybe Solid ToDo App. We're gonna do Todo MVC because it is admittedly a very good way of showing specifically the granularity of how Solid projects work. Right now I just saved my first file change so it actually forked it into my own account.

[00:02:22]
And then inside the project for now we have some logos, but the key part is we have an index which is kind of our entry point. We haven't had to worry too much about this so far. But essentially, this is where we call our render app call. And we've mounted to this root element.

[00:02:43]
In the example earlier, I just passed app straight in because it's fine. It's the important thing to know is that Solid's render function takes a function that then does JSX passing component's fine here as well. But it's important to know, that it's a function. And the reason for that again is the laziness.

[00:03:00]
We need to make sure that we set all the proper stuff for rendering so that basically that our root is inside an effect. So the whole system works. So again, it's the everything is a function theme you see here. And what's great about Vite is stuff like CSS is taking care of us very easily.

[00:03:17]
You just literally import it. And like we're essentially off to the races so to speak, right? We can just put our CSS directly in here, mess with it and we can see the impact. Inside our specific example here, we're actually playing a bit. We have index CSS which is normal CSS, and then we have CSS modules so that you can also do that approach.

[00:03:48]
This little demo, it's very basic. It just puts the spinner on. But there's on save, there's hot module reloading and all the typical stuff you expect from Vite. So this is a pretty simple example and we're gonna use this shell of foundation to kinda build on in order to continue to build our Todo app.

[00:04:15]
So what are we gonna do first? Well, I think the first thing I'm gonna do just so I don't forget it later because I always forget this stuff later, is I'm gonna grab some of that CSS we need specifically for the Todo app. And there is a resource folder in the course site where I actually have the index.html and the index.css.

[00:04:42]
The index.html honestly doesn't have much in it. We probably don't actually need it running from this example because it already works. But the index.css, it's worth grabbing this. So let's do that, okay. All right, so copy the index.css into the index.css file in your project, okay?

[00:05:12]
All right, and then I'm gonna do a little something maybe unconventional here. We'll do some more TypeScript later, but to keep our first foray into Solid a little simpler, I'm gonna actually rename this extension to jsx. It just it'll make my life a little bit easier right now with it's fine.

[00:05:37]
We'll get to TypeScript soon enough but I'm going to just clear that out and to apps, I'm gonna kind of blank slate actually this whole section. We still need our app obviously but I'm gonna just wipe this out and basically return nothing. We're gonna get back to the basics and if I save all this and this thing is still working which of course we should have a blank page, beautiful.

[00:06:07]
And just a sanity check that it's a blank page, that it's our page, I'm gonna add an h1 here. Good you see hot module reloading working in this environment. Hello, okay, so we're sanity check, we are in fact building a Solid app.