DEV Community

loading...
Cover image for a first look at svelteKit part 2 - layout, routes

a first look at svelteKit part 2 - layout, routes

ajcwebdev profile image anthony-campolo Updated on ・2 min read

There are two underlying concepts of SvelteKit:

  • Each page of your app is a Svelte component.
  • Pages are created by adding files to the src/routes directory of your project. Pages are server-rendered so a user's first visit is as fast as possible. A client-side app then takes over.

Create a directory called about inside src/routes. Inside the directory create an index.svelte file.

mkdir src/routes/about
touch src/routes/about/index.svelte
Enter fullscreen mode Exit fullscreen mode

The <svelte:head> element allows you to insert elements inside the <head> of your document. Create a title with the <svelte:head> tag. After that include an <h1> header tag and a <p> paragraph tag.

<svelte:head>
  <title>About</title>
</svelte:head>

<h1>About</h1>
<p>This pages tells you about stuff!</p>
Enter fullscreen mode Exit fullscreen mode

We don't have a link yet to navigate to the page, but we do already have our route created. Enter http://localhost:3000/about to see the next page.

01-about-page

To create links between the pages we'll use $layout.svelte inside src/routes. A <slot /> tag indicates where a component places its children, so our layout component is the parent of our pages.

<main>
  <nav>
    <a href="/">
      home
    </a>
    <a href="/about">
      about
    </a>
  </nav>
</main>

<main>
  <slot />
</main>
Enter fullscreen mode Exit fullscreen mode

02-add-navbar-to-layout

What if we wanted to extract the navigation bar into its own component? First we'll create a file called Nav.svelte.

touch src/lib/Nav.svelte
Enter fullscreen mode Exit fullscreen mode

Take the code contained inside <main> of $layout.svelte and move it to Nav.svelte.

<nav>
  <a
    href="/"
  >
    home
  </a>
  <a
    href="/about"
  >
    about
  </a>
</nav>
Enter fullscreen mode Exit fullscreen mode

In $layout.svelte include an import for Nav inside a <script> tag. Then include <Nav /> inside the <main> tags.

<script>
  import Nav from '$lib/Nav.svelte';
</script>

<main>
  <Nav />
</main>

<main>
  <slot />
</main>
Enter fullscreen mode Exit fullscreen mode

Your project should look and function exactly the same after this change.

Discussion (4)

pic
Editor guide
Collapse
krupalpatel92 profile image
Krupal Patel

Hey Anthony,

I'm new at SvelteJs and started with SvelteKit kit.svelte.dev/docs I'm here to get help to configure SCSS with SvelteKit. Everywhere I found is install svelte-preprocess & node-sass then some settings on rollup.config.js but its not exists under SvelteKit project or maybe it's only part of SvelteJs not kit or maybe a different version of Svelte.

I'm just trying to configure SCSS in SvelteKit.

Collapse
ajcwebdev profile image
anthony-campolo Author

Hey Krupal, that's a really great question. I'm a terrible frontend developer and don't know anything about CSS, so I forwarded this question to the SvelteKit Discord server and received the following response, hopefully it is helpful:

I've got svelte-preprocess and sass in my devDependencies

In svelte.config.js:

import sveltePreprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: sveltePreprocess(),
  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
  },
};

export default config;
Enter fullscreen mode Exit fullscreen mode

I just upgraded sveltekit and had to update that from original the .cjs file. IIRC the other difference from svelte is that you add a different attribute on your style tag to mark it as scss: <style lang="scss">

Collapse
zzoukk profile image
zZouKk • Edited

I am switching from sapper to sveltekit. Do you know how I can import faunadb in /lib and use it in server routes ? Waiting for part 3...

Collapse
ajcwebdev profile image
anthony-campolo Author

Hey Souk 👋

I've played around a little bit with FaunaDB but only with Redwood's API and not with Sapper or Svelte. Redwood includes a preconfigured GraphQL Lambda Handler that can be deployed with Netlify Functions, so it was mostly happening under the covers of the framework and the provider.

I would guess there's a way to do it, but I don't know how well it is documented. There is a Migration guide, that may be able to help. If you don't see any information relevant to your problem you could open an issue asking for clarification in the guide or if you want to hop in the Discord you can chat with the team and they'll be happy to help you out.