DEV Community: Dana Woodman

How to secure pages with HTTP Basic Auth using SvelteKit

Dana Woodman — Fri, 12 Aug 2022 23:22:31 +0000

Want to add simple authentication to a page, say an admin section or a demo app, in SvelteKit? Well, HTTP Basic Auth might be what you're looking for.

But before we start, you should be aware that HTTP Basic Auth is not considered very secure since you're sending the username/password as base64 encoded, amongst other concerns. If you use HTTPS (which you should be doing!), then this particular attack vector is less of a concern, but you should still consider these factors and you should absolutely not use it with customer/user facing logins. I see HTTP Basic as a useful and quick way to (somewhat) secure a page or section on your site. If you choose HTTP Basic, just be aware that the pages you're securing may not be as secure as you might think.

Ok, moving on!

In order to accomplish this, we will need to intercept all server-side requests using the handle hook which gets called on every request.

We will then check the URL pathname to see if it starts with /admin so that any page under and including /admin will get secured behind HTTP Basic Auth (e.g. /admin, /admin/reports).

Then we check for an Authorization header to see if the user has attempted logged in (or if they cancel the login dialog) and we check it against a username:password combo (base64 encoded). If it doesn't match, then they are not logged in so we indicate they're not authorized with a 401 error.

If they succeed with login by typing in the correct username:password combo, then they will be directed to the admin page they wanted.

import type { Handle } from "@sveltejs/kit";
import { ADMIN_LOGIN } from "$env/static/private";

export const handle: Handle = async ({ event }) => {
    const url = new URL(event.request.url);

    if (url.pathname.startsWith("/admin")) {
        const auth = event.request.headers.get("Authorization");

        if (auth !== `Basic ${btoa(ADMIN_LOGIN)}`) {
            return new Response("Not authorized", {
                status: 401,
                headers: {
                    "WWW-Authenticate":
                        'Basic realm="User Visible Realm", charset="UTF-8"',
                },
            });
        }
    }

    return resolve(event);
};

Then, in your .env file (as well as set in your hosting provider's environment variable management system), set your username/password combo:

ADMIN_LOGIN="admin:sekret"

And now make sure to create a page at /admin or somewhere else and attempt to load it. You should see the login prompt and on inputting admin for the username and sekret for the password, you should see the admin Svelte page.

Follow me on Dev.to, Twitter and Github for more web dev and startup related content

Efficiently read files in a directory with Node.js opendir

Dana Woodman — Fri, 12 Aug 2022 23:14:24 +0000

Originally published on my blog.

Recently I had to scan the contents of a very large directory in order to do some operations on each file.

I wanted this operation to be as fast as possible, so I knew that if I used the standard fsPromises.readdir or fs.readdirSync which read every file in the directory in one pass, I would have to wait till the entire directoy was read before operating on each file.

Instead, I wanted to instead operate on the file the moment it was found.

To solve this, I reached for opendir (added v12.12.0) which will iterate over each found file, as it is found:

import { opendirSync } from "fs";

const dir = opendirSync("./files");
for await (const entry of dir) {
    console.log("Found file:", entry.name);
}

fsPromises.opendir/openddirSync return an instance of Dir which is an iterable which returns a Dirent (directory entry) for every file in the directory.

This is more efficient because it returns each file as it is found, rather than having to wait till all files are collected.

Just a quick Node.js tip for ya 🪄

Follow me on Dev.to, Twitter and Github for more web dev and startup related content

How to redirect in SvelteKit endpoints

Dana Woodman — Wed, 21 Apr 2021 02:29:55 +0000

UPDATED April 7, 2023

SvelteKit now supports using redirect to throw redirect(301, '/some-age') as a convenience.

import { redirect } from '@sveltejs/kit';

export async function GET() {
  // Do some magic here... ✨

  throw redirect(302, '/success')
}

Thanks Brian in the comments for the reminder about this change 🙏

Wanted to do redirects in your SvelteKit endpoints and tried to return { redirect: '/success' } just to find out it doesn't work?

Well, you're in luck because you can just use the standard Location header to do redirects:

export async function GET() {

  // Do some magic here... ✨

  return {
    headers: { Location: '/success' },
    status: 302
  }
}

Remember to make sure use the proper status code for your redirect.

Learn more about the Location header on MDN.

Whelp, that's it for today, hope this saved you some headaches!

Follow me on Dev.to, Twitter and Github for more web dev and startup related content

When to use Svelte vs SvelteKit vs Sapper?

Dana Woodman — Fri, 16 Apr 2021 19:38:40 +0000

UPDATE July 15, 2022: At this point, despite SvelteKit not yet being at v1.0, I would highly recommend anyone deciding between SvelteKit and Sapper to choose SvelteKit. Sapper is effectively unmaintained and SvelteKit v1.0 is impending.

Confused as to when you should use Svelte vs SvelteKit vs Sapper? Hopefully I can help you get a little more clarity with this short guide. Let's go! 👇

Use Svelte if...

You don't need/want SSR (Server Side Rendering)
You want to render a component into an existing page
You want to output things like a vanilla component, a WebComponent or a React component adapter

Use SvelteKit if...

You're ok with Beta software and living on the bleeding edge
You want SSR like Next.js/Nuxt.js
You want to have a backend API as part of your project
You want your app to work in a Serverless environment (e.g. Vercel/Netlify)
You want super fast hot reloading in development (via Vite)

Note that SvelteKit supports static rendering with adapter-static which you can use to render a static site with built in routing in case you don't want/need any API/SSR.

Use Sapper if...

UPDATE: at this point, Kit is almost at a v1.0, so there is a 99% chance you want to use Kit instead of Sapper

You don't want to use Beta software and don't want to deal with the potential roadblocks of Beta software
You want/need access directly to Express/Polka
You're ok using a product that will no longer be maintained (SvelteKit will replace Sapper)

In reality, you should almost never choose Sapper and should instead post feedback to the Svelte team if things are missing for your needs.

Scenarios

Still not sure what to use? Maybe these scenarios will help you decide:

"I'm building a brand new web app (with backend/API)": Use SvelteKit
"I want to build an SPA (Single Page App) and I have a pre-existing backend and don't need SSR": Use Svelte
"I want to use Svelte in an existing web app": Use Svelte
"I'm cautious of new things but want SSR/routing": Use Sapper
"I'm building a rocket ship 🚀": Use something else

Note that if you end up using Sapper, you can always migrate to SvelteKit later.

See any reasons missing from the above list? Drop them in the comments below 💬

Follow me on Dev.to, Twitter and Github for more web dev and startup related content 🤓

Deploying a SvelteKit app to Netlify

Dana Woodman — Sun, 11 Apr 2021 20:29:13 +0000

Want to deploy your SvelteKit app to Netlify? Well, you're in luck because it's actually quite easy!

Let's jump right in 👇

1. Create your SvelteKit project

First, obviously you'll need a SvelteKit project. If you don't have one yet, setup is super simple:

npm init svelte@next my-app
cd my-app
npm i

Then you can run npm run dev to play 👯‍♀️ with your new app.

2. Create `netlify.toml`

You'll need to let Netlify know where the SvelteKit build will be located (/build) and where the serverless functions will live (/functions).

In the root of your project, create a netlify.toml file:

[build]
  command = "npm run build"
  publish = "build/"
  functions = "functions/"

3. Use the Netlify adapter

Now you'll want to install the @sveltejs/adapter-netlify adapter:

npm i -D @sveltejs/adapter-netlify@next

In your svelte.config.cjs file, change adapter-node to adapter-netlify, like so (diff):

const sveltePreprocess = require('svelte-preprocess')
-const node = require('@sveltejs/adapter-node')
+const netlify = require('@sveltejs/adapter-netlify')
const pkg = require('./package.json')

/** @type {import('@sveltejs/kit').Config} */
module.exports = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: sveltePreprocess(),
  kit: {
    // By default, `npm run build` will create a standard Node app.
    // You can create optimized builds for different platforms by
    // specifying a different adapter
-    adapter: node(),
+    adapter: netlify(),

    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',

    vite: {
      ssr: {
        noExternal: Object.keys(pkg.dependencies || {}),
      },
    },
  },
}

Now you have everything you need to deploy your Netlify site!

4. Deploy on Netlify

Now all you need to do is:

Create a Github repo
Push your code to it
Add the new repo to Netlify (e.g. the "New site from Git" button)
- Accept the default options
Wait for it to build and after about a minute, you should have a SvelteKit app on Netlify! 🎉

Now you can add routes to your SvelteKit app and they will be served by Netlify's global serverless infrastructure 🛰

That's it!

Deploying SvelteKit to Netlify (or Vercel) is quite simple and gives you a global CDN and serverless function out the gate!

Hope this was helpful! 🍻

If you want to check out the source code, see the Github repo here.

Follow me on Dev.to, Twitter and Github for more web dev and startup related content 🤓

Getting form body data in SvelteKit actions/server pages

Dana Woodman — Fri, 09 Apr 2021 23:23:45 +0000

NOTE Aug 31, 2020: I've updated this guide to work with SvelteKit pre-1.0 release (specifically 1.0.0-next.431) but this should work with most of the recent versions.

Note that according to the docs SvelteKit page actions will likely change pre-1.0 release, so keep that in mind.

If you've setup a form in SvelteKit and now you want to submit it to an endpoint (like +server or +page.server) but you don't know how to get the data out of the response and work with it, then this article is for you!

The Problem

Suppose we have an HTML form like this and we want to POST it's content to our +page.server.ts file at /newsletter:

<!-- src/routes/newsletter/+page.svelte -->
<form
  method="post"
  action="/newsletter"
  enctype="multipart/form-data"
>
  <input type="text" name="name" />
  <input type="email" name="email" />
  <input type="file" name="image" accept="image/*" />
  <button type="submit">Submit</button>
</form>

Now the question is, how do we get the data out of the request we get in our +page.server file?

Accessing form data

To extract data from the request's, we need to grab the request from our action, extract the FormData from it and then use the methods that exist on FormData to get our data.

Here is somewhat exhaustive list of all the ways to get data out of your form:

// src/routes/newsletter/+page.server.ts
import type { Action } from "./$types";

export const POST: Action = async ({ request }) => {
  // Grab the form data from the request
  const values = await request.formData();

  // Get a value from the form:
  const name = values.get("name") as string;

  // Getting a file file:
  const file = values.get("image") as File;

  // Get the text value of the file:
  const text = await file.text();

  // Get an array of values (useful for checkboxes and selects):
  const flavors = values.getAll("ice-cream-flavors") as string[];
  // ["vanilla", "toffee", "caramel"]

  // Check if a value exists (useful for boolean checkboxes):
  const agreed = values.has("agree-to-terms");
  // true

  // Get all items in the form in an "entries" type array:
  const items = [...values.entries()];
  // [ [ "name": "Rich Harris" ], [ "hobbies", "svelte" ], [ "hobbies": "journalism" ] ]

  // Get each keys:
  const keys = [...values.keys()];
  // [ "name", "hobbies", "hobbies" ]

  // Get all values:
  const vals = [...values.values()];
  // [ [ "Rich Harris" ], [ "svelte" ], [ "journalism" ] ]

  // And to get all the form data as an object:
  const obj = Object.fromEntries(values.entries());
  // { name: "Rich Harris", hobbies: "journalism" }
  // Note here how any grouped values from multi-selects or checkboxes will only return the last value received.
  // I recommend against using this in those (or most) cases.

  return { location: "/" };
};

Note, you should be able to do the same thing with a +server.ts page, but you will need to change the type signature if you're using TypeScript to use RequestHandler.

Now you should be able to work with your HTML form data, high five! 🙏

Going further

Form helper function

If you're like me, you'd rather just have a nice little object to play with of all your form data. If you want something like this, try out the following helper function to parse your form data and modify as desired:

// src/lib/form-helpers.ts
type StructuredFormData =
  | string
  | boolean
  | number
  | File
  | StructuredFormData[];

export function formBody(body: FormData) {
  return [...body.entries()].reduce((data, [k, v]) => {
    let value: StructuredFormData = v;
    if (v === "true") value = true;
    if (v === "false") value = false;
    if (!isNaN(Number(v))) value = Number(v);

    // For grouped fields like multi-selects and checkboxes, we need to
    // store the values in an array.
    if (k in data) {
      const val = data[k];
      value = Array.isArray(val) ? [...val, value] : [val, value];
    }

    data[k] = value;

    return data;
  }, {} as Record<string, StructuredFormData>);
}

Now, to use this helper function

// Usage:
// src/routes/newsletter/+page.server.ts
import type { Action } from "./$types";
import { formBody } from "$lib/form-helpers";

export const POST: Action = async ({ request }) => {
  const values = await request.formData();
  const body = formBody(values);
  // Do something with the data...
  return { location: "/" };
};

If you used this method and then returned the data from a +server page, you'd see something like this:

With this you can now access your form data as you're probably use to with thinks like Express.

Client-side form submission

An additional point: this isn't the only way to submit forms in Svelte, you could also hijack the submit event and send it to an endpoint you have:

<script>
  let submit

  function handleSubmit() {
    // Send a POST request to src/routes/contact/+server.ts endpoint
    submit = fetch('/contact', {
      method: 'POST',
      body: JSON.stringify({ foo: 'bar' }),
      headers: { 'content-type': 'application/json' },
    })
      .then((resp) => resp.json())
      .finally(() => setTimeout(() => (submit = null), 5000))
  }
</script>

{#if submit}
  {#await submit}
    <p>Sending...</p>
  {:then resp}
    <p>🎉 Done!</p>
    <pre>RESPONSE: {JSON.stringify(resp, null, 2)}</pre>
  {/await}
{/if}
<form on:submit|preventDefault={handleSubmit} method="post">
  <input type="text" name="email" />
  <button type="submit">Submit</button>
</form>

And src/routes/contact/+server.ts would look like:

import type { RequestHandler } from "./$types";

export const POST: RequestHandler = (req) => {
  // Simulate a delay... instead you'd do something interesting here...
  await new Promise((resolve) => setTimeout(resolve, 500))

  return new Response(
    JSON.stringify({ success: true }),
    {
      status: 200, 
      headers: { 'content-type': 'application/json' }
    }
  )
}

Fin

Thanks for reading and hope this was helpful! 🤓

This post was inspired by a question @Teunminator in Svelte's #svelte-kit Discord channel, thanks for a fun challenge!

Follow me on Dev.to, Twitter and Github for more web dev and startup related content 🤓

Include (or omit) Node.js devDependencies in your CI environment

Dana Woodman — Tue, 06 Apr 2021 19:18:23 +0000

UPDATE: It's actually simpler to use npm ci instead of npm install because it installs devDependencies too and is actually more efficient. Hat tip to Lucian 🍻

Ever need to install your devDependencies in a CI environment but the environment wants to install only dependencies? Here's how to fix it:

npm install --include=dev

You can also omit dependencies with the --omit=... flag.

You can use the options dev, optional and peer in both these flags.

Hope that saves you a few minutes, as it did me! 🍻

Hat tip to Ben McCann on the Svelte Discord for pointing me in the right direction!

Follow me on Dev.to, Twitter and Github for more web dev and startup related content 🤓

Using environment variables in SvelteKit (and Vite)

Dana Woodman — Mon, 05 Apr 2021 20:28:00 +0000

UPDATE August 8, 2022: SvelteKit now has support for both private and public environment variables without directly using Vite, so please refer to the following docs instead of this article:

UPDATE April 13, 2022: the new Svelte FAQ now has this info in it (though I go into a little more detail here in case you're curious)

Setting environment variables in SvelteKit is as simple as creating a .env file at the base of your repo and add some content to it:

VITE_MESSAGE="World"
SOME_PRIVATE_VAR="You can't see me"

Then, in your route or component, use import.meta.env.VAR:

<h1>Hello, {import.meta.env.VITE_MESSAGE}</h1>

Which will get you "Hello, World".

Important note: Keys prefixed with VITE_ will be accessible to your components, routes and endpoints and other JS/TS code. Any key not prefixed cannot be imported to prevent leaking keys unintentionally.

Typescript

If you want to type your env vars in Typescript, you can extend ImportMetaEnv in your global.d.ts file:

interface ImportMetaEnv {
  VITE_MESSAGE: string
}

If you want to use env vars in your endpoints or non-Svelte code and not get TS errors, you'll need to add "module": "es2020" to your tsconfig.json:

{
  "compilerOptions": {
    "module": "es2020",
    // ...
  }
  // ...
}

Security note 🔐

Any environment variable prefixed with VITE_ has the potential to be leaked to the client browser if you use it in your Svelte components. Make sure to do the following to keep potential secrets safe:

✅ ALWAYS: Only use secret keys in "endpoints" or other server-side code (e.g. a database connection string, auth token or secret)
🛑 NEVER: do something like const env = import.meta.env in a component as now anyone can access all the values attached to env.
🛑 NEVER: access your private environment variables in Svelte components or routes (e.g. DON'T do this in a component: console.log(import.meta.env.VITE_DATABASE_URL)).

Vite statically replaces any use of an environment variable so import.meta.env.VITE_FOO will compile down to "foo" assuming your .env has VITE_FOO="foo" in it.

Going further

You can read more about Vite's import.meta.env here

Note: you cannot use dynamic access of keys, e.g. this won't work: import.meta.env["VITE_MESSAGE"]. If you need dynamic variables, a solution would be to use svelte-preprocess's replace setting.

Fin

Well, that's it for today, give this post a 👍 / 🦄 / 🔖 if it was helpful for ya!

Follow me on Dev.to, Twitter and Github for more web dev and startup related content 🤓

How to add module import aliases in SvelteKit

Dana Woodman — Sat, 27 Mar 2021 04:20:51 +0000

UPDATE: the new Svelte FAQ now has this info in it (though I go into a little more detail here in case you're curious)

UPDATE 2: Updated examples to match the latest version of SvelteKit

Don't want to do relative imports (../../stores/user) and instead want to rock some sexy absolute imports ($stores/user)?

Well you're in luck because, with SvelteKit, you can add as many custom module import aliases as you want.

In this (very short) tutorial, I'm going to add two aliases, one for my src/components directory (which I'm renaming from src/lib because reasons) and adding src/stores for, well, my stores. Let's go! 🏃‍♀️

Add aliases to `svelte.config.cjs`

Add any aliases you want in your svelte.config.cjs file at the root of your project. We will add a resolve object to kit.vite.resolve with an object of our aliases.

Here is the approximate diff you should see when you're done:

import preprocess from 'svelte-preprocess';
+ import { resolve } from "path";

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
-       target: '#svelte'
+       target: '#svelte',
+       vite: {
+           resolve: {
+               alias: {
+                   $components: resolve('./src/components'),
+                   $stores: resolve('./src/stores'),
+                   $actions: resolve('./src/actions')
+               }
+           }
+       }
    }
};

export default config;

Now you should be able to import your stuff from anywhere using your new aliases, like:

import Counter from '$components/Counter'
import { user } from '$stores/auth'

Obviously you can add as many as you want and can also link to directories other than src. Have at it!

Adding Typescript aliases

If you're using Typescript, make sure to update your tsconfig.json with your aliases so they match that of your svelte.config.cjs:

{
    "compilerOptions": {
        "moduleResolution": "node",
        "module": "es2020",
        "lib": ["es2020"],
        "target": "es2019",
        /**
            svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
            to enforce using \`import type\` instead of \`import\` for Types.
            */
        "importsNotUsedAsValues": "error",
        "isolatedModules": true,
        "resolveJsonModule": true,
        /**
            To have warnings/errors of the Svelte compiler at the correct position,
            enable source maps by default.
            */
        "sourceMap": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "baseUrl": ".",
        "allowJs": true,
        "checkJs": true,
        "paths": {
-           "$lib/*": ["src/lib/*"]
+           "$components/*": ["src/components/*"],
+           "$stores/*": ["src/stores/*"],
+           "$actions/*": ["src/actions/*"]
        }
    },
    "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
}

Fin

That's all there is to it, hope this saves you some keystrokes! 🍻

Thanks for reading! Consider giving this post a ❤️, 🦄 or 🔖 to bookmark it for later. 💕

Have other tips, ideas, feedback or corrections? Let me know in the comments! 🙋‍♂️

Don't forget to follow me on Dev.to (danawoodman), Twitter (@danawoodman) and/or Github (danawoodman)!

Photo by Joshua Aragon on Unsplash

🚀 Svelte Quick Tip: Creating a toast notification system

Dana Woodman — Thu, 18 Mar 2021 19:36:12 +0000

Toast you say? 🍞

A common UI design pattern is to use "toasts" or small UI notifications that alert the user of something happening in realtime (e.g. a form submission error, a new message or friend request, etc).

In this article, we will be building a simple toast system in Svelte, kinda like this:

Impatient? See the REPL here

Create a Svelte store for out toast notifications

Let's start out by creating a simple Svelte store for our toast system. The store will just contain an array that we will update when a new toast is created or "dismissed":

import { writable } from 'svelte/store'

export const toasts = writable([])

export const dismissToast = (id) => {
  toasts.update((all) => all.filter((t) => t.id !== id))
}

export const addToast = (toast) => {
  // Create a unique ID so we can easily find/remove it
  // if it is dismissible/has a timeout.
  const id = Math.floor(Math.random() * 10000)

  // Setup some sensible defaults for a toast.
  const defaults = {
    id,
    type: 'info',
    dismissible: true,
    timeout: 3000,
  }

  // Push the toast to the top of the list of toasts
  const t = { ...defaults, ...toast }
  toasts.update((all) => [t, ...all])

  // If toast is dismissible, dismiss it after "timeout" amount of time.
  if (t.timeout) setTimeout(() => dismissToast(id), t.timeout)
}

Overall this should be pretty simple, we have a two methods, one for adding a toast and the other for removing. If the toast has a timeout field, we set a timeout to remove the toast. We set some default values for all toasts and we give a toast an id to make it easier to add/remove and for Svelte's {#each} tag to index it better.

Create the toasts parent component

<script lang="ts">
  import Toast from './Toast.svelte'

  import { dismissToast, toasts } from './store'
</script>

{#if $toasts}
  <section>
    {#each $toasts as toast (toast.id)}
      <Toast
        type={toast.type}
        dismissible={toast.dismissible}
        on:dismiss={() => dismissToast(toast.id)}>{toast.message}</Toast>
    {/each}
  </section>
{/if}

<style lang="postcss">
  section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    margin-top: 1rem;
    justify-content: center;
    flex-direction: column;
    z-index: 1000;
  }
</style>

Create the toast component

Next, we're going to create a Toast.svelte component with different states: success, error, and info, like so:

<script>
  import { createEventDispatcher } from 'svelte'
  import { fade } from 'svelte/transition'
  import SuccessIcon from './SuccessIcon.svelte'
  import ErrorIcon from './ErrorIcon.svelte'
  import InfoIcon from './InfoIcon.svelte'
  import CloseIcon from './CloseIcon.svelte'

  const dispatch = createEventDispatcher()

  export let type = 'error'
  export let dismissible = true
</script>

<article class={type} role="alert" transition:fade>
  {#if type === 'success'}
    <SuccessIcon width="1.1em" />
  {:else if type === 'error'}
    <ErrorIcon width="1.1em" />
  {:else}
    <InfoIcon width="1.1em" />
  {/if}

  <div class="text">
    <slot />
  </div>

  {#if dismissible}
    <button class="close" on:click={() => dispatch('dismiss')}>
      <CloseIcon width="0.8em" />
    </button>
  {/if}
</article>

<style lang="postcss">
  article {
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.2rem;
    display: flex;
    align-items: center;
    margin: 0 auto 0.5rem auto;
    width: 20rem;
  }
  .error {
    background: IndianRed;
  }
  .success {
    background: MediumSeaGreen;
  }
  .info {
    background: SkyBlue;
  }
  .text {
    margin-left: 1rem;
  }
  button {
    color: white;
    background: transparent;
    border: 0 none;
    padding: 0;
    margin: 0 0 0 auto;
    line-height: 1;
    font-size: 1rem;
  }
</style>

Hopefully this component is pretty straight forward; it's just some styling for the toast, some conditions for if it is "dismissible" and come icon components (which are just SVGs).

Creating toast notifications

You can now create toast notifications anywhere in your Svelte app (in your JS files or your .svelte files):

import { addToast } from "./store";

addToast({
  message: "Hello, World!",
  type: "success",
  dismissible: true,
  timeout: 3000,
});

You can then use your <Toasts /> component somewhere in your layout component (e.g. App.svelte or _layout.svelte, etc).

Wrapping up 🌯

That's it folks, hopefully you learning something today!

See the full toast system in the Svelte REPL here.

Thanks for reading!

Thanks for reading! Consider giving this post a ❤️, 🦄 or 🔖 to bookmark it for later. 💕

Have other tips, ideas, feedback or corrections? Let me know in the comments! 🙋‍♂️

Don't forget to follow me on Dev.to (danawoodman), Twitter (@danawoodman) and/or Github (danawoodman)!

Photo by Joshua Aragon on Unsplash

🚀 Svelte Quick Tip: Connect a store to local storage

Dana Woodman — Wed, 17 Mar 2021 23:11:15 +0000

Local storage, oh my 🤩

Here's a really quick tip for you today; how to use Svelte stores to keep data in-sync with local storage.

This is particularly useful if you're wanting to persist some user values, say UI configuration (e.g. their preferred theme, something that is shown/hidden, etc) and have the settings retained for future sessions.

Doing this with Svelte is pretty trivial, let's check it out 👇

Create the store

All we need to do to connect to local storage is create a writable store and then set a default value based on local storage and on any change (via subscribe) we update the local storage entry.

// src/stores/content.js
import { writable } from 'svelte/store'

// Get the value out of storage on load.
const stored = localStorage.content
// or localStorage.getItem('content')

// Set the stored value or a sane default.
export const content = writable(stored || 'Hello, World!')

// Anytime the store changes, update the local storage value.
content.subscribe((value) => localStorage.content = value)
// or localStorage.setItem('content', value)

The key thing to remember here is local storage always stores strings, so if you're storing something else, say a boolean or some JSON, then you will want to convert to/from the data type you want and the local storage string representation.

For example, if you wanted to store a boolean, it would look more like this:

// src/stores/enabled.ts
import { writable } from 'svelte/store'

export const enabled = writable<boolean>(localStorage.enabled === 'true')

enabled.subscribe((value) => localStorage.enabled = String(value))

Notice that we read the value and compare it to the string 'true' versus treating it like a boolean, which won't work. Also note that we need to convert it to a string before saving it to local storage (especially if we're using Typescript).

If you're working with objects or arrays, you can lean towards using JSON.parse instead:

// src/stores/user.ts
import { writable } from 'svelte/store'

interface User {
  email: string
  username: string
}

export const enabled = writable<User>(JSON.parse(localStorage.getItem('user')))

enabled.subscribe((value) => localStorage.user = JSON.stringify(value))

Not that we will want to use getItem instead of the property accessor because getItem returns null where as the property accessor returns undefined on missing keys and null is valid with JSON.parse whereas undefined causes it to explode violently with Uncaught SyntaxError: Unexpected token u in JSON at position 0.

Use your store

Now you can use the value in your component:

<script>
  import { content } from "./store"
</script>

<p>{$content}</p>

<input bind:value={$content} />

Any time you update the value it will be updated in local storage and when you reload it will automatically be set to the value you had set last. Pretty neat!

That's it!

I told you it would be quick 😎

Hopefully this comes in handy for you, cheers! 🍻

EDIT: Thanks to Luke Edwards (@lukeed05) on Twitter for pointing out you can do localStorage['content'] (or localStorage.content) instead of the more verbose localStorage.getItem('content') and localStorage.content = '...' instead of localStorage.setItem('content', '...')

EDIT 2: Shoutout to Jamie Birch (@LinguaBrowse) on Twitter who mentioned it might be safer to stick with getItem and setItem since they're specifically declared int the local storage spec. It seems safe enough to use the property accessors, but if you want to be extra safe, use getItem and setItem.

EDIT 3: Sören (@the_soerenson) on Twitter pointed out you could take this further by adding event listeners so you could detect local storage changes in other browser tabs/windows. Maybe cool if you're trying to sync offline data across browser tabs?

EDIT 4: Thanks to @JuSellier on Twitter who reminded me we can use JSON.parse on primitive values (boolean, number etc), so I've updated the example to use that instead. Thanks JuSellier!

Thanks for reading! Consider giving this post a ❤️, 🦄 or 🔖 to bookmark it for later. 💕

Have other tips, ideas, feedback or corrections? Let me know in the comments! 🙋‍♂️

Don't forget to follow me on Dev.to (danawoodman), Twitter (@danawoodman) and/or Github (danawoodman)!

Photo by Joshua Aragon on Unsplash

🧑‍💻 Getting session data in your Sapper server routes and components

Dana Woodman — Tue, 16 Mar 2021 19:42:53 +0000

If you're building a non-trivial Sapper app, you likely need access to your current user in your Sapper server routes as well as your components. In this short article I'll show you how to do both, let's go! 🚀

Create a session middleware

Create a normal Express middleware that assigns your session data to req.session so we can use it in the Sapper middleware:

// src/middlewares/session.ts
export function session() {
  return async (req, res, next) => {
    // Get your user somehow, maybe via cookies/JWT
    const user = await someMethodToGetUser();

    req.session = { user }

    next();
  };
}

Add middleware to your server

In your src/server.js, add the session middleware right before your sapper.middleware and pass in the session data to Sapper:

app.use(session());
app.use(sapper.middleware({ session: (req) => req.session }));

Use in your Sapper server routes

Now you can use your session data in your server routes:

// src/routes/api/me
export async function get(req, res) {
  res.json(req.session);
}

Now you can ping /api/me to get the current user session.

Use in your Svelte components

You can also use the session store in your Svelte components:

<script>
  import { stores } from "@sapper/app";
  const { session } = stores();
</script>

{#if $session.user}
  Logged in
{:else}
  Logged out
{/if}

Bonus: Typescript support

To support Typescript, create a src/types.d.ts file and add the following:

interface User {
  id: string
  email: string
  // anything else you need...
}

interface Session {
  user?: User
}

declare namespace Express {
  export interface Request {
    session?: Session;
  }
}

🏁 Wrapping up

Thanks for making this far, hope this was helpful! 👋

Hat tip to @babeard on the Svelte Discord for the suggestion of using a regular middleware to get the data to Sapper sessions.

Thanks for reading! Consider giving this post a ❤️, 🦄 or 🔖 to bookmark it for later. 💕

Have other tips, ideas, feedback or corrections? Let me know in the comments! 🙋‍♂️

Don't forget to follow me on Dev.to (danawoodman), Twitter (@danawoodman) and/or Github (danawoodman)!

DEV Community: Dana Woodman

How to secure pages with HTTP Basic Auth using SvelteKit

Efficiently read files in a directory with Node.js opendir

How to redirect in SvelteKit endpoints

When to use Svelte vs SvelteKit vs Sapper?

Use Svelte if...

Use SvelteKit if...

Use Sapper if...

Scenarios

Deploying a SvelteKit app to Netlify

1. Create your SvelteKit project

2. Create netlify.toml

3. Use the Netlify adapter

4. Deploy on Netlify

That's it!

Getting form body data in SvelteKit actions/server pages

The Problem

Accessing form data

Going further

Form helper function

Client-side form submission

Fin

Include (or omit) Node.js devDependencies in your CI environment

Using environment variables in SvelteKit (and Vite)

Typescript

Security note 🔐

Going further

Fin

How to add module import aliases in SvelteKit

Add aliases to svelte.config.cjs

Adding Typescript aliases

Fin

🚀 Svelte Quick Tip: Creating a toast notification system

Toast you say? 🍞

Create a Svelte store for out toast notifications

Create the toasts parent component

Create the toast component

Creating toast notifications

Wrapping up 🌯

🚀 Svelte Quick Tip: Connect a store to local storage

Local storage, oh my 🤩

Create the store

Use your store

That's it!

🧑‍💻 Getting session data in your Sapper server routes and components

Create a session middleware

Add middleware to your server

Use in your Sapper server routes

Use in your Svelte components

Bonus: Typescript support

🏁 Wrapping up

2. Create `netlify.toml`

Add aliases to `svelte.config.cjs`