An Introduction to Svelte Routing for Single Page Applications

[00:00 - 01:59] Welcome back. In the last lesson we initialized our Svelte project and got it running in our local dev environment. And in this lesson, we're ready to start building the app. Our project is going to be a single page application. Single page applications are a modern and popular style of web app where a single page is served to a user. Then when the user interacts with the single page app, that page is dynamically updated with new data and HTML markup without doing a full page browser refresh. So a single page app doesn't fetch new HTML from a server when the user navigates around it. And this usually means that the user experience is very fast and reactive. A single page app can have multiple routes in URLs, so it kind of mimics a server rendered app. But if you watch closely, you'll notice that the browser does not do a full page refresh. e.g. there's no loading icon on the browser tab when navigating between routes. So if we take a look at the course that we're working on right now, this is actually a single page app. So watch the browser tab closely. If you navigate around to another page, you'll notice that the URL changes, but the browser is not doing a full page refresh. And if you look and view source, you'll see that it's a very basic bare bones HTML file. And so JavaScript is handling all of the rich markup and text and images and interactivity that you're seeing when you're using the course website. Now take a look at newline.co's website. And this is an example of a server rendered site.

[02:00 - 04:25] So if you watch the browser tab at the top, when I click on one of these links, you'll see that it's doing a full page refresh. So it's going to the server and it's fetching down a completely new HTML page and bringing that into the browser. So that's a totally different architecture. And for our project, we're going to build an SPA. So in order to build an SPA with Svelte, we need to install a router. So this will be a front end router, and it'll handle routing on the front end side and rendering the correct components based on the URL that a user has navigated to. So we need to install Svelte router SP OT to get started. So copy this NPM command and head over to your command line. And go ahead and run that. So this is a open source library that provides single page application routing for Svelte projects. You can do a Google search and find this repository online . So this is a link to the NPM registration for this project. And you can also see a link to the GitHub site for it as well. So if you check that out and you feel inclined, you can star this repository as well, which is a nice thing to do for the creators of these open source apps. And this is where you'll find the documentation for this library as well. So to get started using this library, we need to create a routes.js file. So we'll go ahead and create that file now, make sure you create it under the source directory. So all code for this felt project needs to be under the source directory. So we'll say new file routes.js. And then paste this code into that file. So what we're doing here is we're setting up routes.

[04:26 - 06:33] And then we're pointing those routes to Svelte components. We haven't created these felt components yet, but we'll create them next. And so essentially, we're pointing a route route to a component called home. And that will point to a file called home dot Svelte. And then we have a lunch menu route and an admin management user out. And those will also point to their respective Svelte files. So let's talk a little bit about Svelte files. Svelte files have an extension of dots felt. And they're used to create components, which are the building blocks of a Svelte application. A component can be large, such as a whole page, or it could be small, such as a date picker component or a table. And components can also import other components so they could be nested inside components in a hierarchy. Svelte files are made up of three sections, a script section that holds all the JavaScript for the component. And this is where you have your state and your event handlers. And we'll be working very much in those throughout the course. Then there's a style section and this can hold CSS styles for the component. And then a markup section, where all the HTML markup goes. And we'll work with that a lot as well. So the magic of the Svelte framework is that it compiles these Svelte files into a JavaScript bundle that a browser can understand. And then when a user loads a page with that bundle, the Svelte framework handles everything else to render the HTML with the JavaScript together on the page and handle all of the interactivity and reactivity. So previously, we imported three Svelte files into our routes. js. And we need to actually create those files now. So let's see, we need, and we also created a directory called views slash public, and then one called views slash admin.

[06:34 - 07:54] So under source, create a new folder called views. And then under views, create a new folder called admin. And another one called public. So under admin, we need to create lunch menu admin dot Svelte. So create that file. And then under public, create these other two files. Okay, so currently these files are completely empty. Now eventually they'll have script and maybe some CSS styles and markup. But we're going to start very simple and just get a quick win here and put some some real simple HTML markup. So we've just got one div with a header one that is just going to show home. And then we'll change that for lunch menu view, we'll just say lunch menu view. And then likewise for lunch menu admin.

[07:55 - 10:36] Okay, so we've got our three Svelte files. And at this point, we're not quite done yet, because we haven't actually wired up the router with the main application file. So we have a file called app dot Svelte. And that's essentially the entry point component for the whole Svelte app. So everything's going to flow through app dot Svelte, before the framework flows down to other components. So we need to set up our router here, so that the components we're routing to will be rendered in the browser. So open up app dot Svelte. And this is just the old boilerplate code, we'll get rid of that. And what we're doing here is we're importing just the router component from the NPM package. And then we're importing our routes file from the one we created routes.js. And then we have our markup section. So we've got a main HTML component here. And then we're putting the router component in there, and sending the routes down. So essentially what's going to happen is when we go to the browser, and go to our route that matches something from routes JS, it's going to the framework is going to handle that. And it's going to render the Svelte file or the Svelte component that we set it up to render for. Okay, now we need to do one more step. So in package JSON, we need to add the dash S file. And what this does is it gives us bookmarkable URLs, which I'll show you in just a second. So go to package dot JSON under the start script, add the dash S flag. Okay, now let's give this a try. So if you already had your app running, you can hit control C to stop it, and then start it again. I'm going to start mine up in PM run dev. And then let me open this up in the browser. And after a pause, I'm back. I wasn't expecting a blank white screen here. So obviously something went wrong. And now is a good time to go ahead and troubleshoot it, and we'll learn something in the process. So I'm going to take a look at the Chrome dev tools.

[10:37 - 11:09] So you can right click and choose inspect to bring up the dev tools. And these are really powerful. I use them quite a lot during development to inspect things to look at elements on the page to look at network calls and troubleshoot those. But in this case, we need to look at the console. So if we look at the console, we can see an error that says source dot router is not a constructor. So I've completely built this app before, and I didn't have this error.

[11:10 - 12:40] So I was a little bit surprised. And we'll talk about why this happened. So I took a look, I took this error and looked at the spelt router spa, GitHub repository. So if you come over to issues, and you can do a search here, so search for source dot router is not a constructor. And I found a couple of issues that were filed here. And the second one actually has the solution we're going to use. So looking at the second one, people mentioned that after installing version 15 of the roll up plugin common JS, that they started getting this error, and that it seems to work fine with version 14. So this is a good opportunity to look at package dot JSON and talk about versions of dependencies. So coming back to VS code, package dot JSON's got our dependencies. And each of these dependencies has a version number next to it. And so what happened is the first time I built the app, I initialized my spelt project a couple of months ago. And we were not at version 16 of the roll up plugin common JS. And so now we're dealing with an incompatibility between this , this dependency and the spelt router spa somehow. So that's essentially what caused the error.

[12:41 - 13:33] And since we're in here talking, let's discuss quickly these carrots. So you may see carrots in your package dot JSON, or you may see tilde symbols, or you may see neither. So if you have a carrot, that means that NPM install will install 16 or 16.1 or 16.2, anything under the major version of 16, it will accept. Now if you had a tilde, that's a little more strict. So it would only install 16 dot 0 dot 1 or 16 dot 0 dot 2. So only at the patch level. And then if you leave it completely blank, NPM install would only install exactly version 16 dot 0. So you can kind of use this to control versions of your dependencies.

[13:34 - 13:47] And what we need to do in our case is actually install specifically version 14. So we could we could change this to 14 and save it, and then run NPM install. And that would do it.

[13:48 - 14:38] Or we can also do it by using the specific version when we install it. So we'll do it that way. So let's go over to the command line here, and stop the front end app . Now we need to run NPM install. We do install this plugin. And now if you don't put a version here, it will install the latest and greatest. So what we're going to do is then add at symbol, and we'll say 14 dot 0 dot 0. And that will force NPM to install version 14. So run that. And now it also updates the version in the package dot JSON, which will also save in that file. Now if you don't have any errors, you can completely ignore this.

[14:39 - 15:57] There's a good chance that this may be resolved by the time you're doing this on your local machine. But in case you're running version 16, and it looks like version 5 dot 8 dot 1 of this library, you may need to do this. Okay, so let's get back on track here and start up the front end dev environment again. So NPM run dev. Let's go back to our local environment here, hit refresh. And very cool. So now what we're seeing is our home component is being served or sorry, being rendered by the front end. And that's because we're at our root route. So just a recap going back to routes JS, when we're at the root route, then we'll serve or render the home component. So let's test these other two, and we'll give this lunch menu route a try. Okay, so that one's rendering our lunch menu view. And then we'll give our admin manage menus route a try. Okay, so that one's working as well.

[15:58 - 16:31] And then one more thing I'll point out right now is that these routes are book marketable. So I keep saying the terminology serve versus render. And so what's what's really happening is the web server is serving a single HTML file. So it's a single page app. So if we go in view page source, we'll see this really bare bones single HTML file. So that's what the web server is serving. And then the front end is then running this JavaScript bundle.

[16:32 - 17:11] And that JavaScript bundle takes over. And it renders the page for the given route. But the cool thing about front end routers these days is that they're actually book marketable URLs. So I can refresh this page directly, or I could open it in another tab. And the router will still render that same route. Okay, back to our course. So we've tested our router. And we saw the homepage, the lunch menu admin page, and the lunch menu view page.

[17:12 - 18:31] And we're going to cover one more spelt concept before completing this lesson. Building dynamic HTML with spelt is accomplished by using curly braces directly in the HTML. So what we're going to do right now is populate some JavaScript generated information directly into the page. And spelt will handle reactivity and showing it on the page. So go over to lunch menu admin dot spelt. And we're going to add this little section here. So lunch menu admin dot spelt. Right now we only have HTML markup. So we're going to add a script section. And then we're just going to do create a very simple JavaScript variable. And this is called a state variable. So this variable is declared in the script. And sp elt is going to render that no matter what the state of that variable is spelt will handle monitoring it and rendering it. So if we go over here, we can add any type of text we want here.

[18:32 - 20:09] And then just curly braces is what spelt is going to look for. So when we have curly braces, that's JavaScript and spelt will automatically run that and render it in this HTML. So if we save this here, and we go back to the browser, now we can see that our hot loading local dev environment woke up and automatically rendered that here. So this could be whatever we wanted it to be. We could say text here, we could do operations. It'll show that we could do something like two plus five. And spelt will handle it. So I'm going to leave it as the date for now. Just to recap a little bit, we discussed single page applications, and we created a routes.js file. And in that file, we defined our routes, each route points to a spelt file, which is a component. And then we wired up the router in our app.spelt file. And so as we browse to routes in our browser, the spelt framework will handle rendering the components that those routes are pointed to. In the next lesson, we're going to create an admin layout. And that'll act as a parent wrapper component for all of our admin components.

[20:10 - 20:16] So that's it. Thank you.