Setting up Routing in Svelte

#svelte #javascript #routing

In this article, i'll provide a quick overview of Svelte then we'll create a very basic Svelte app and add routing to it. Now for those who don't know what svelte app is, Svelte is Front-end JavaScript UI Library. It is not actually a framework, instead Svelte is a compiler that generates minimal and highly optimized JavaScript code.

Introduction

Svelte is a new approach to building UIs. Instead of using Virtual DOM, it compiles the code and ships framework-less vanilla JavaScript which makes it faster and lighter than other frameworks or Libraries like React or Vue. It is gaining very much popularity due to its easy learning curve and a very easy state management.

Setting Up

Now, in order to create an svelte app, we just basically have to clone the template from github. In order to do so, navigate into the directory in which you want to create the project and run

npx degit sveltejs/template my-svelte-project

You can change 'my-svelte-project' to any name you want. Now, next you have to navigate into the recently created template folder and run the package installations

cd my-svelte-project
npm install

This will install all the required dependencies and then we can run the project by using the command

npm run dev

This will fire-up the server and the project will be running on port 5000 by default. Visit http://localhost:5000/ in your browser and you will see our app running.

Creating components

Now, the next step is to create components. We'll create component folder inside src and place all our components there. Also we'll be needing a folder called routes to place our router file. So let's create all the Files and folders necessary. You can use GUI or simply enter the following commands

mkdir src/component
mkdir src/routes
touch src/component/About.svelte src/component/Home.svelte src/component/Blog.svelte

touch src/routes/index.svelte

This will create all the files and folders required. We also need a package called svelte-routing in order to implement routing. In order to install the package, run

npm install svelte-routing

Now since all our files and folders are set up and svelte-routing has been installed, we can head towards configuring routes/index.svelte

Configuring Routing

Add the following code in routes/index.svelte file

<script>
  import { Router, Route } from 'svelte-routing';
  import Home from '../components/Home.svelte';
  import About from '../components/About.svelte';
  import Blog from '../components/Blog.svelte';

  export let url = '';
</script>

<Router {url}>
  <div>
    <Route path="blog" component={Blog} />
    <Route path="about" component={About} />
    <Route path="/" component={Home} />
  </div>
</Router>

What we're doing here is, We're importing all our created components and also the bringing in Router and Route from svelte-routing which are necessary classes in order to configure routing. Then we're setting up path for each component and pointing to load the respective component in their respective path.

Now, it's time configure the Components.

Configuring Components

First we've to configure the App.svelte since it's the root component. Replace all the code of App.svelte with

<script>
  import Router from './routes/index.svelte';
</script>

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }
</style>

<main>
  <Router />
</main>

Basically, we're just bringing in the router we created and loading Router as root component. Now, let's configure other components.

Almost all the components will be of same structure since its just a demo application. So let's configure our Home.svelte. Add the following codes to this file

<script>
  import { Link } from 'svelte-routing';
</script>

<div>
  <h3>This is HomePage</h3>
  <Link to="blog">Blog</Link><br />
  <Link to="about">About</Link>
</div>

So in order to go to another Route, we need something called Link then we points to which component it should redirect. That's all we're basically doing here.

Blog and About component also will have similar structure.

// Blog.svelte
<script>
  import { Link } from 'svelte-routing';
</script>

<div>
  <h3>This is Blog Page</h3>
  <Link to="/">Home</Link><br />
  <Link to="about">About</Link>
</div>

// About.svelte

<script>
  import { Link } from 'svelte-routing';
</script>

<div>
  <h3>This is About Page.</h3>
  <Link to="/">Home</Link><br />
  <Link to="blog">Blog</Link>
</div>

Now, we're all set. save all the files and test it. All the links should be working and you should be able to switch between apps. You can demo the project Here.

Here's the source code for the project