DEV Community: Brewhouse Digital

Setting a Theme in Svelte using Hooks

Brewhouse Digital — Sun, 19 Mar 2023 17:56:22 +0000

This is a follow-up post to Secure Authentication in Svelte using Hooks to expand on our Hooks file. If you're looking for a way to implement authentication in your SvelteKit app, definitely check out that article.

If you've ever built a site with multiple themes, there is a chance you've run into the annoying problem of having the site flash before the theme value is calculated client side. In this tutorial, we'll setup the hooks.server.js file to allow for a dynamic theme to be processed before sending it to the client.

Initial Setup

If you don't already have a hooks.server.js file, the most basic version looks like this:

// hooks.server.js
export const handle = async({event, resolve}) => {
  const response = await resolve(event);

  return response;
}

This is explained in the previous post, but here is a refresher for any new readers:

The event property contains all the information related to the file request. This includes user's cookies, the browser http headers, and the URL of the specific request. You can read more indepth docs here: SvelteKit Hooks.

The second item, resolve, is the function that creates the finished HTML.

Inside our handle() function is the await resolve(event) call. This is a SvelteKit thing that essentially tells the server that it is ready to build the HTML before sending it to the client. Returning that response value renders the page as normal.

In this tutorial, we'll be using a simple HTML data attribute to handle which CSS will be used. In your app.html page, go ahead and add this to your <html> tag like so:

<html lang="en" data-theme="">

That is all the setup we need for the HTML page. Go ahead and close that and lets open up our hooks.server.js file.

Now we want to modify our resolve() function to look for the string data-theme="" and replace it with the user's theme cookie value. We can do that like this:

// hooks.server.js
export const handle = async({event, resolve}) => {
  const response = await resolve(event, {
    // Processing will go here
  });

  return response;
}

First step is to add an object as the second property of resolve(). Inside here, we can call the Svelte object property transformPageChunk, and pass it a function. That will look like this:

// hooks.server.js
export const handle = async({event, resolve}) => {
  const response = await resolve(event, {
    transformPageChunk: ({html}) => {
      // This section will modify the HTML 
      // before being returned to the client
    }
  });

  return response;
}

We want to first check if the user's theme cookie even exists. This could be a new user without a cookie, or an existing user with one. An easy way to do that is to check the event.cookies that is passed from the root handle() function

// hooks.server.js
export const handle = async({event, resolve}) => {
  const response = await resolve(event, {
    transformPageChunk: ({html}) => {
      // This section will modify the HTML 
      // before being returned to the client
      let currentTheme = cookies.get("theme");

      // Make sure the cookie was found, if not, set it to dark
      if(!currentTheme) {
        currentTheme = "dark";
        cookies.set("theme", currentTheme)
      }
    }
  });

  return response;
}

This value will return null if it doesn't exist, so it is useful to add in a default. We can also use this as an opportunity to set a theme cookie for all new users. In the above code, we're setting the default to dark.

Now that we have our theme value ready, we can update the HTML before being sent to the client. The easiest way to do that is by using the replace() javascript function on the entire HTML. It is useful to note that replace() is non-destructive so if you want to do additional processing, you must save it into a new variable.

// hooks.server.js
export const handle = async({event, resolve}) => {
  const response = await resolve(event, {
    transformPageChunk: ({html}) => {
      // This section will modify the HTML 
      // before being returned to the client
      let currentTheme = cookies.get("theme");

      // Make sure the cookie was found, if not, set it to dark
      if(!currentTheme) {
        currentTheme = "dark";
        cookies.set("theme", currentTheme)
      }

      return html.replace(`data-theme=""`, `data-theme="${currentTheme}"`);
    }
  });

  return response;
}

And just like that, your theme is now being processed before being sent to the client side. No more flashing!

CSS Example

If you're curious how to use CSS to access this, you can utilize CSS variables like so:

:root {
  --body: #fff;
  --text: #000;
}

[data-theme='dark']:root {
  --body: #000;
  --text: #fff;
}

body {
  background-color: var(--body);
  color: var(--text);
}

Secure Authentication in Svelte using Hooks

Brewhouse Digital — Sun, 19 Mar 2023 17:35:50 +0000

If you need to block access to a particular part of your app, most new Svelte developers (including myself) immediately jump into the +layout.svelte file to start handling the requests. This unfortunately causes some side effects that are pretty difficult to fix. The way around this is to use the magic hooks.server.js file instead!

The hooks.server.js file intercepts all dynamic routes before rendering them. This is an important distinction because prerendered pages will not flow through this process (which could lead to a lot of frustrating debugging). The easiest way around this is to create a blank +layout.server.js file in your admin routes folder. An example might look like this:

├─ src
│  ├─ routes
|  |  ├─ admin (all authenticated pages)
|  |  |  ├─ +page.svelte (main authenticated page)
|  |  |  ├─ +layout.server.js
│  │  ├─ +page.svelte (unauthenticated homepage)
│  ├─ hooks.server.js

// /src/routes/admin/+layout.server.js
export async function load() {}

The magic here is that now every page within your admin folder won't be prerendered. This forces any requests in that directory to flow through the hooks.server.js file.

Now that we have that setup, let's take a look at the hooks.server.js file.

The first thing we need to do is setup the handle() function. This will intercept all requests and this is where we can do our checks.

// hooks.server.js
export const handle = async({event, resolve}) => {
  const response = await resolve(event);

  return response;
}

Before we continue, lets look at the two properties being passed through the handle() function: event and resolve.

Event contains all the information related to the file request. This includes user's cookies, the browser http headers, and the URL of the specific request. You can read more indepth docs here: SvelteKit Hooks.

The second item, resolve, is the function that creates the finished HTML. This will be useful in a later tutorial when we modify the theme value from light to dark, based on the user's cookies. For now, we're going to focus on the authentication piece.

Authentication Setup

In our hooks.server.js file, we can get the current requested pathname, and check if the user is trying to access our admin routes or not. We can also get the cookies to check our auth token as well. In this example, we'll just use an example auth token, but you can swap this out for any authentication library SDK that you'd like to use.

// hooks.server.js
export const handle = async({event, resolve}) => {
  const requestedPath = event.url.pathname;
  const cookies = event.cookies;

  // Auth check will go here

  const response = await resolve(event);

  return response;
}

Now that we have the URL and the cookies, we can do the validation.

// hooks.server.js
export const handle = async({event, resolve}) => {
  const requestedPath = event.url.pathname;
  const cookies = event.cookies;

  // Auth check
  const isTokenValid = validateTokenFunction(cookies);

  const response = await resolve(event);

  return response;
}

const validateTokenFunction = (cookies) => {
  // This will look for the user's cookies and see if the auth token exists
  const currentToken = cookies.get("auth-token");

  // If the auth token is valid (i.e. matches the string 123), then it will return `true`.
  return currentToken === "123";
}

Now that we know if our auth token is valid, we can compare it against the current route like so:

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

// hooks.server.js
export const handle = async({event, resolve}) => {
  const requestedPath = event.url.pathname;
  const cookies = event.cookies;

  // Auth check
  const isTokenValid = validateTokenFunction(cookies);

  // Restrict all routes under /admin
  if(currentPath.includes("/admin")) {
    if(!isTokenValid) {
      throw redirect(303, "/");
    }
  }

  const response = await resolve(event);

  return response;
}

const validateTokenFunction = (cookies) => {
  // This will look for the user's cookies and see if the auth token exists
  const currentToken = cookies.get("auth-token");

  // If the auth token is valid (i.e. matches the string 123), then it will return `true`.
  return currentToken === "123";
}

Notice we imported the svelte function redirect. This will allow us to send the user somewhere else before the HTML is rendered. This is the most secure way to keep your admin content from prying eyes.

You can expand this if statement to include additional checks for user roles, or other types of requests. This way you can have an admin panel with multiple levels of user access, just by adding additional checks.

And just like that, your SvelteKit application is secured. Try it out and see how the site won't let you access the /admin pages without a cookie called auth-token set to 123.

Additional Improvements

You'll probably want to move that validateToken() function into your /src/lib/server folder so that the server doesn't recreate it every time a route is accessed. I usually create a file called authentication.js in there to house all types of auth-checking functions.

Sources

Shoutout to Huntabyte: Protect SvelteKit Routes with Hooks for their tutorial on this. Their version is in Typescript and mine is in Javascript.

UI Case Study: TinaCMS & i18n

Brewhouse Digital — Sat, 12 Nov 2022 19:16:40 +0000

This is a case study for an i18n localization feature that currently doesn't exist in TinaCMS as of November 12, 2022

Adding in localization on static sites is pretty easy to do by using a JSON file with each language you want to support. A basic example might look like:

{
  "homepage": {
    "title": {
      "en": "Welcome to my site",
      "fr": "Bienvenue sur mon site"
    }
  }
}

Another example might be to hold different JSON files for each language, such as translation-en.json and translation-fr.json. and then import whichever one you need using javascript.

Doing this with a CMS becomes a lot more difficult since now you have to account for the CMS's way of saving copies of strings for different languages, and figure out how to import that in.

With TinaCMS's GraphQL layer, we could request a language by default (or send the browser's language setting in the initial request if using SSR), and have GraphQL return the correct language. Then using a language toggle on the client site, the GraphQL calls could query again and pull the new content in the user's requested language.

This case study though will be focused on how localization settings could be added to the TinaCMS Admin panel. We'll start with creating a new setting to enable localization. This might be found in the Configuration page of the site settings.

Checking this new option will provide us with a new multi-select dropdown. With this, we'll be able to select which languages we would like to support. The system could automatically detect the browser's language and select that one first. In my case, en will be the default.

Now that you have chosen which languages you want to support, we can go to our site editor your-site.com/admin. Expand the view to full screen, and you will see a new dropdown option in the top right.

When you click on this new dropdown, you'll be presented with the list of languages you selected back in the admin panel. Whenever you select one, the GraphQL layer will refresh the content and pull in the specific language, like so:

Something to note: This is not auto-translating the content. Auto translation could be an option on a paid plan since using translation APIs can be expensive. If you haven't previously set the french content in the example above, the input fields would be blank, and then you could fill in your own content.

This is just an example of what localization could look like using TinaCMS, and could prove very beneficial to larger scale sites that need to support multiple languages.

Code Example

Inside your codebase, you can create your language toggle in the UI, and then update your content to pull from the newest MDX content that comes from TinaCMS.

const { data, query, variables } = await client.queries.documentQuery({
  relativePath: `${params.filename}.mdx`,
  language: "new-language-key-here"
});

return {
  props: {
    variables,
    data,
    query,
  },
};

NextJS getStaticProps With Components

Brewhouse Digital — Wed, 20 Jul 2022 14:55:37 +0000

Ever needed to fetch some content from your server to populate a global component, only to realize that NextJS doesn't allow for that out of the box? A project I worked on had a global navigation bar that was imported on 202 different pages, but needed pre-generated static content that came from a CMS. Instead of using getStaticProps on every single page, I decided to dive in and see if I could pre-generate all that content a single time, and import it directly into the component.

The way the team decided to get around this getStaticProps page restriction is to use the NodeJS build process to fetch content from wherever we need, and put it into the project for our components to import as standard json files. We can even do different versions based on dev and production environments.

Setup

Find a nice place in your project directory to add in your preBuildScripts folder (you can name this whatever you want). In my project directory I have:

src -> functions -> preBuildScripts

If you have a single environment that you deploy to, you'll only need two files. For each additional environment, you'll need an additional file to run. In this example, we'll be building files for a Development environment, and a Production environment.

New Files:

preBuildUtilities.js
preBuildDev.js
preBuildProd.js

Setting Up A Test

Inside your preBuildUtilities.js, add in this module exports code that looks like this:

module.exports.preBuildDevelopment = async() => {
    console.log("Loading the development content!")
}

module.exports.preBuildProduction = async() => {
    console.log("Loading the production content!")
}

Now inside each of your other files, we can call the respective functions

preBuildDev.js

const {preBuildDevelopment} = require("./preBuildUtilities.js")

preBuildDevelopment();

preBuildProd.js

const {preBuildProduction} = require("./preBuildUtilities.js")

preBuildProduction();

And now our setup is pretty much done! The way we call these functions is simple. NPM automatically runs scripts in the package.json file that have the prefix of pre. You can read more about that here: https://docs.npmjs.com/cli/v8/using-npm/scripts#life-cycle-scripts

Updating Your Package.json File

Open up your package.json and find your scripts section that shows:

"scripts": {
    "dev": "next dev",
    "build": "next build"
}

and add in a new script above that one like so:

Multiple Environment Example

"scripts": {
    "predev": "node src/functions/preBuildScripts/preBuildDev.js",
    "dev": "next dev",

    "prebuild:dev": "node src/functions/preBuildScripts/preBuildDev.js",
    "build:dev": "next build",

    "prebuild:prod": "node src/functions/preBuildScripts/preBuildProd.js",
    "build:prod": "next build"
}

Single Environment Example

Here is an example of a single environment setup:

"scripts": {
    "predev": "node src/functions/preBuildScripts/preBuildDev.js",
    "dev": "next dev",

    "prebuild": "node src/functions/preBuildScripts/preBuildDev.js",
    "build": "next build"
}

The folder path needs to be modified to fit your specific project. Now make sure your server is off, open up your terminal and run your normal command npm run dev. You should see Loading the development content! show up in your console!

Now that we have the setup done, we can add whatever functions we want into our preBuildUtilities.js

Creating New Files

Inside preBuildUtilities.js, let's create a sample API request that will generate some JSON data for us. Pretend like we're pulling in content from a CMS and want to populate a component with the data.

We can use the Star Wars API for this, and just replace this functionality with your own needs. We'll just be focusing on the preBuildDevelopment() function, but it will follow the same pattern for preBuildProduction().

Here is our steps to build our preBuild script:

Import the NodeJS File System package
Setup our API using async/await
Create a new file in the project using the JSON data

We'll be using Axios in this example since Fetch isn't widely supported in NodeJS yet. Feel free to use any kind of HTTP request system that your project needs. It will work the same.

Note: We'll be using synchronous here to prevent any race conditions. Also make sure that the folder exists before running this or Node may error out trying to find the proper directory.

const fs = require('fs');
const axios = require('axios').default;

module.exports.preBuildDevelopment = async() => {
    const API = `https://swapi.dev/api/people`;

    const response = await axios.get(API);
    const data = response.data.results;

    fs.writeFileSync("./src/data/preBuild/starWarsData.json", JSON.stringify(data))
}

Make sure your server is turned off, and then launch it using npm run dev. Once the server is up and running, go check your file directory to see if your new JSON file is there. Hopefully it is!

Now in any of your components, you can reference the data like so:

StarWarsList.js

import starWarsData from "src/data/preBuild/starWarsData.json";

export const StarWarsList = () => {
    return (
        <ul>
            {starWarsData.map((item, index) => (
                <li key={`star-wars-item-${index}`}>{item.name}</li>
            ))}
        </ul>
    )
}

Now your component is utilizing server-side/static data! 🎉

Sveltekit Private Routes with Backendless

Brewhouse Digital — Sat, 12 Mar 2022 05:01:19 +0000

If you've been following along with the previous articles, you should have a working Login and Register page connected to Backendless. Now we're going to streamline these a bit and add in private routing through SvelteKit.

We haven't done much work on the homepage (index.svelte) so we'll work on that now. Delete the default Svelte code and add in some base content. We'll add in the HTML first, then add in a new page called members.svelte

index.svelte

<script>
    import {user} from "$lib/store";
</script>

<div class="container mx-auto">
    <h1 class="text-5xl font-bold mb-3">Hello World</h1>
    <p>
        <a href={$user.email ? "/members" : "/login"} class="btn btn-outline">
            Click here for the private route
        </a>
    </p>
</div>

You'll see that our link href is wrapped in an if statement. Each of your private routes should be written like this to make sure that the user is logged in. Alternatively, you could wrap the entire link tag in a Svelte {#if}{/if} statement if you wanted to hide the button entirely. Any time you use a Svelte Store in your HTML content, you must use the reactive symbol $. This lets the content know that this variable will change and to watch for updates.

You could also use this to append a target route to the login page, such as /login?target-route=members and then redirect the user after login, but that will be in a different tutorial.

Create the Members Page

Now create a new page in your routes folder called members.svelte, and add in some base html for that as well.

members.svelte

<div class="container mx-auto">
    <h1 class="text-5xl font-bold mb-3">Members Only!</h1>
    <p><a href="/" class="btn btn-outline">Return Home</a></p>
</div>

In this page, we don't need to treat the anchor tags with fancy if statements, since the site will see this as a private route, and hide it entirely to unauthenticated users.

Creating the Private Route System

With Backendless, when you log in, an Object is returned containing some of your user information. In our login.svelte page, we're updating our global Svelte Store user to be this value. Since this is global now, we can use it on our __layout.svelte file to check whenever someone is navigating through site. If they land on a private page, and they aren't logged in, we gracefully redirect them back to the Login screen.

We will accomplish this by creating a list of what URLs should we want checked.

Note: This tutorial will be guiding you with the idea that we will be creating a members-only site. The assumption is that the majority of pages in your future web app will be private, and only a few will be public.

Creating the URL List

Inside your lib/data folder, create a new file called publicRoutes.json. Inside will be an array containing three pages to start. The homepage, the login page, and the register page. If an unauthenticated user lands on a page that is NOT in this list, they will be routed to the Login page.

publicRoutes.json

[
    "/",
    "/login",
    "/register"
]

Any future public routes, like a blog post or Contact Us page, will go here in this list.

Validating the User

Inside your lib/functions folder, create a new file called auth.js. This will hold multiple functions for us in the future. For now, we want to create a new function called validateUserToken. This function will be checking the Backendless token that's saved to your localStorage, and making sure that it has not expired or been tampered with.

We'll need to import a few things before we get started. Your initial file should look something like this (with some notes):

auth.js

import Backendless from "backendless";
import {user} from "$lib/store";
import publicRoutes from "$lib/data/publicRoutes.json";
import {goto} from "$app/navigation";

// Check if user is logged in
export const validateUserToken = async() => {
    // Validate the user token

    // If valid: Update the user store with the latest information

    // If not valid: Unset the user store, and redirect to the login page

    // If the token is corrupted, force logout and redirect user to the login page
}

The last import statement is a new one for the tutorial. The goto function is from the Svelte library, and is an easy way to automatically route a user to another page. This is what we'll be using to send unauthenticated users to our Login page.

Note that we've made this an async call. We need this to finish processing before routing our user throughout the site. To get started, we'll create a Try/Catch and add in our first Backendless method to check for the token:

auth.js

export const validateUserToken = async() => {
    try {
        let response = await Backendless.UserService.getCurrentUser();
    } catch(error) {

    }
}

You don't need to pass anything to the getCurrentUser() method. The Backendless SDK already knows where to look for the token. This could return an object containing user data, a null value if the user is not logged in, or an HTTP error code if the token is expired or corrupted.

auth.js

export const validateUserToken = async() => {
    try {
        let response = await Backendless.UserService.getCurrentUser();

        if(response) {
            // Valid user found
            user.set(response);
        } else {
            // Unset the user store
            user.set({});
        }
    } catch(error) {

    }
}

Now to redirect the user if they are not logged in:

auth.js

export const validateUserToken = async() => {
    try {
        let response = await Backendless.UserService.getCurrentUser();

        if(response) {
            // Valid user found
            user.set(response);
        } else {
            // Unset the user store
            user.set({});

            // Invalid user found. Grab their current location to match against the publicRoutes list
            let currentLocation = window.location.pathname;

            // This will redirect if the unauthenticated user is on a private route
            if(!publicRoutes.includes(currentLocation)) {
                await goto("/login?error=expired-token");
                return false;
            }
        }
    } catch(error) {

    }
}

This uses a simple includes to see if the user is on a private route. If they are, send them elsewhere. In this example, we're appending a query parameter so that we can show an alert bar on the Login page that their token has expired and to log back in. The return false; will prevent anything else from firing in the function.

We'll do something very similar in the catch portion, with an additional Backendless force-logout method just to make sure all the user data gets reset. That will look like this:

auth.js

export const validateUserToken = async() => {
    try {
        let response = await Backendless.UserService.getCurrentUser();

        if(response) {
            // Valid user found
            user.set(response);
        } else {
            // Unset the user store
            user.set({});

            // Invalid user found. Grab their current location to match against the publicRoutes list
            let currentLocation = window.location.pathname;

            // This will redirect if the unauthenticated user is on a private route
            if(!publicRoutes.includes(currentLocation)) {
                await goto("/login?error=expired-token");
                return false;
            }
        }
    } catch(error) {
        // User has invalid token, so log them out
        await Backendless.UserService.logout();
        await goto("/?error=expired-token");
        return false;
    }
}

For your site's specific needs, the catch section may be useful for logging to an external analytics tool when a user's token is corrupted or expired.

Adding the Validation Check on the Layouts File

Inside the __layouts.svelte file, we need to import the Svelte function onMount, because we'll need to be validating the Backendless token saved to the user's localStorage when they log in. Since Svelte is a compiled language, checking anything browser related should always be inside an onMount or inside a function call.

__layout.svelte

import {onMount} from 'svelte';

Since we want to make sure each route is checked before it's loaded, we want our onMount to be asynchronous, so we can use the await property. Start the onMount call like so:

__layout.svelte

onMount(async() => {
    // Code coming soon
}

Import our new validateUserToken and add it inside the onMount() call:

__layout.svelte

import {validateUserToken} from "$lib/functions/auth";

onMount(async() => {
    await validateUserToken();
})

To see how this works now, make sure you are logged out of your backendless account by clearing your localStorage, and manually going to the /members route. If everything was set up successfully, you should be routed directly to the Login page.

You may have seen a flash of content though, and that's what we'll be fixing next.

Note: This next part is optional. If you don't mind the flashing of content then you can skip this next step

Restricting content

Still in the __layouts.svelte file, create a new variable above the onMount named:

__layout.svelte

let isSiteReadyToLoad = false;

And in our content, we will be wrapping all the content in an if statement to hide it. This also gives us the option to add in a nice Svelte animation to make the content fade in.

You could also add an else here and add a loading icon if you have one.

Your HTML should look something like this now:

__layout.svelte

{#if isSiteReadyToLoad}
    {#if $user.email}
        <h1>Welcome, User</h1>
    {:else}
        <h1>Please login</h1>
    {/if}

    <slot></slot>
{/if}

Optional Animation Effect

And to add the Svelte animation, import the fade function at the top of your <script> tag

__layout.svelte

import { fade } from 'svelte/transition';

To animate an element in Svelte, you need two things:

A conditional (such as our isSiteReadyToLoad)
A standard HTML tag like a <div>. Svelte animation properties do not work on Svelte Components.

Your HTML should be structured like so:

__layout.svelte

{#if isSiteReadyToLoad}
    <div transition:fade>
        {#if $user.email}
            <h1>Welcome, User</h1>
        {:else}
            <h1>Please login</h1>
        {/if}

        <slot></slot>
    </div>
{/if}

To finish off the Restricted Content section, we can set the value of our isSiteReadyToLoad to true after the validateUserToken() function has completed:

__layout.svelte

// Hide the site content until it is fully loaded
let isSiteReadyToLoad = false;

onMount(async() => {
    await validateUserToken();

    // Load the site
    isSiteReadyToLoad = true;
})

Now if you manually navigate to /members it should fade in the Login page, and you will never see the Members content.

To fully test our new private route, lets log into the site with the username and password that we created back in Tutorial #1. Once you are logged in, you should see your "Welcome, User" at the top left part of your screen. Now manually navigate to the homepage and click on the Members button.

Adding Tailwind and Daisy UI to SvelteKit

Brewhouse Digital — Fri, 18 Feb 2022 04:53:27 +0000

In the second part of our series of building a fullstack site, we'll be adding in Tailwind and an amazing library that sits on top of it called Daisy UI. Tailwind has a mind-boggling level of flexibility, but sometimes you need to quickly create a site and worry about the specific design later. That's where Daisy UI comes in. Think of it like Bootstrap, but with all the goodies that comes with Tailwind. It has premade classes in place to simplify your development, so you can quickly scaffold a beautiful looking site without much effort.

Links we'll be using in this tutorial:

https://tailwindcss.com/

https://daisyui.com/

Step 1 - Install Tailwind

Even though we'll be installing Tailwind in this tutorial, we will really only be using Daisy UI for the setup.

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init tailwind.config.cjs -p

mv postcss.config.js postcss.config.cjs

Now that Tailwind is installed, and our config files have been created, we can set up tailwind. Inside our tailwind.config.cjs file, add this module.exports function

module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};

This setup requires a CSS file to be imported into your main __layout.svelte file. This way all the tailwind components can be accessed in for all your pages. You can name this file anything you want, app.css, global.css, tailwind.css, just as long as it's imported into the layout file, you're good to go.

I'm going to call mine global.css and put it in the lib folder next to my store.js file.

├── source
│   ├── lib
│   │   ├── components
│   │   ├── data
│   │   ├── functions
│   │   ├── global.css
│   │   ├── store.js
│   ├── routes
│   │   ├── __layout.svelte
│   │   ├── index.svelte
│   └── app.html

Now we import the tailwind components into that file like so:

@tailwind base;
@tailwind components;
@tailwind utilities;

Then import it into our __layout.svelte file. If you're following along with the Backendless part of the tutorial, you can include this import anywhere you want. I'm adding mine above the Backendless import statements.

// Import our global CSS
import "$lib/global.css";

And now we're done with Tailwind! You can test that it's working by launching the SvelteKit server npm run dev and see that all of our previous styles are now missing. Tailwind is essentially resetting absolutely everything, so we have freedom to customize the site how we want.

Let's work on Daisy UI next!

Part 2 - Daisy UI

Next on our list is to install Daisy UI and configure it with Svelte. Since Daisy UI requires Tailwind, make sure all the previous steps are completed and your site looks similar to the previous screenshot.

Load up your terminal again and run:

npm i daisyui

Now open the tailwind.config.cjs file and in the plugins section, add in: require('daisyui') like so:

module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: [
    require('daisyui')
  ]
};

Make sure to save, and now load up your SvelteKit server with npm run dev and see if any of your styles have changed! Your styles may look different from mine, but you can see new styles have been added to our project:

Before we go any further, I want to point out that Daisy UI has an amazing list of built-in themes. I'm going to set up the Forest theme for this site, but you can pick your whichever one you like best. You can see the full list here:

https://daisyui.com/docs/default-themes

The theme changer is in the top right corner of the page

To add a theme, you just modify the <html> tag with a data-theme attribute.

Time to test out some Daisy UI components. Let's style our form that we previously built on the __layout.svelte file. First we'll want to add the Card styles to our form, then add the base input styling, and then style up our button.

Form Tag

Let's give this tag a class of card and card-body and then a width style of 400px, like so:

p.s. this is the same HTML form from Part 1 of this series

<form on:submit={handleLogin} class="card card-body" style="max-width: 400px">
    <!-- The other html -->
</form>

Now we'll refactor our old form fields into Daisy UI ones. The HTML is a little more verbose, so this might be a great opportunity to create a form component that we can reuse. First, go to our components folder inside of lib, and create a new component called Input.svelte. I won't go into too much detail about how Svelte components work, but this is how I structured mine:

<script>
    export let label = "";
    export let type = "";
    export let id = "";
    export let placeholder = "";
    export let value = "";

    const onInput = e => (value = e.target.value);
</script>

<div class="form-control">
    <label class="label" for={id}>
        <span class="label-text">{label}</span>
    </label>
    <input {type} {placeholder} {id} {value} on:input={onInput} class="input input-bordered">
</div>

Now we can import our new component back into the __layout.svelte page by writing:

import Input from "$lib/components/Input.svelte";

And simplify all our form code into:

<form on:submit={handleLogin} class="card card-body" style="max-width: 400px">
    <Input label="Email:" id="login-email" bind:value={loginData.email} type="email"/>

    <Input label="Password:" id="login-password" bind:value={loginData.password} type="password"/>

    <button type="submit" class="btn btn-primary">Log In</button>
</form>

Much cleaner!

Organization

So far, we've been working a lot in our main Layout file. Let's move this over to its own page called login.svelte inside our routes folder. And while we're at it, let's make a register.svelte file too.

First thing we'll do inside the new Login page is to add our form and javascript code in (along with a few other classes and tags too).

login.svelte

<script>
    import {user} from "$lib/store";
    import Input from "$lib/components/Input.svelte";

    let loginData = {
        email: "",
        password: "",
    }

    async function handleLogin(e) {
        e.preventDefault();

        // Log the user in. This returns a JSON object
        let response = await Backendless.UserService.login(
            loginData.email, loginData.password, true
        );

        // Save the updated user information to our svelte store
        user.set(response);
    }
</script>

<div class="container mx-auto">
    <h1 class="text-4xl">Log In</h1>

    <form on:submit={handleLogin} class="card card-body" style="max-width: 400px">
        <Input label="Email:" id="login-email" bind:value={loginData.email} type="email"/>

        <Input label="Password:" id="login-password" bind:value={loginData.password} type="password"/>

        <button type="submit" class="btn btn-primary">Log In</button>
    </form>
</div>

Now our code is nice and organized. We can do almost the same thing with the registration page. First create our new register.svelte, and copy and paste all the same code from the Login page into this one.

Then, update the variable and function names to be registration related (such as changing let loginData be let registerData).

Then the registration function for Backendless is a little different. We need to create a new User object. And that looks like this using our new variable names.

let user = new Backendless.User();
user.email = registerData.email;
user.password = registerData.password;

Now, since the registration is done through Javascript, we'll need to show the user that some kind of event has occurred. You could send them to a new registration confirmation page, either to let them know the account was created or maybe that they need to check their email, or you could display a message on page. For this example, we'll just use a svelte If/Else statement to control the UI. The whole register.svelte page looks like this now:

<script>
    import Input from "$lib/components/Input.svelte";

    let pendingRegistration = true;

    let registerData = {
        email: "",
        password: "",
    }

    async function handleRegister(e) {
        e.preventDefault();

        let user = new Backendless.User();
        user.email = registerData.email;
        user.password = registerData.password;

        await Backendless.UserService.register(user)

        pendingRegistration = !pendingRegistration;
    }
</script>

<div class="container mx-auto">
    <h1 class="text-5xl font-bold">Register</h1>

    {#if pendingRegistration}
        <form on:submit={handleRegister} class="card card-body" style="max-width: 400px">
            <Input label="Email:" id="register-email" bind:value={registerData.email} type="email"/>

            <Input label="Password:" id="register-password" bind:value={registerData.password} type="password"/>

            <button type="submit" class="btn btn-primary">Register</button>
        </form>
    {:else}
        <h2 class="text-5xl font-bold">Hooray!</h2>
    {/if}
</div>

Once the registration has completed, the pendingRegistration value is flipped so that the UI will update and hide the form. This way they don't try to submit the form again. And that's all it takes to set up a registration page.

Integrating SvelteKit with Backendless

Brewhouse Digital — Mon, 14 Feb 2022 03:39:16 +0000

Ready to take your web app to the full stack? We'll be integrating the amazing SvelteKit javascript framework with an easy-to-use Backend as a Service platform called Backendless. This is the first of multiple tutorials for building out a full Svelte + Backendless app. Our final product will include:

Login, logout, and register features
Tailwind + Daisy UI for styling
Private routes and database updates

Something to note: Backendless has a full codeless system, but we'll be using their Javascript SDK for this tutorial

Links to both SvelteKit and Backendless:

https://kit.svelte.dev/

https://backendless.com/

The Goal for Part 1

All we'll be doing in part 1 is setting up SvelteKit, adding some helper folders and files, adding Backendless to the project, and building a simple login form.

Let's get started

First things first, pick a folder and fire up your trusty command line tool and get SvelteKit installed.

npm init svelte@next your-project-name

It may prompt you to confirm that create-svelte@next will be installed. You can type y to continue.

If you have an existing folder, it may ask you if thats ok too. You can type y to continue.

When it asks you "Which Svelte app template?", we are going to use the Skeleton project for this tutorial. We also won't be using Typescript but feel free to install it anyways if you plan on using it later.

You can also install ESLint and Prettier too if you want, but we won't be covering that in this tutorial.

SvelteKit should now be installed into your project folder! Navigate into the project folder and get all the NPM packages installed.

cd your-project-name
npm install

Once that is completed, you can run npm run dev to see the site in action. This will be a bare-bones homepage, but we'll spruce it up in a later tutorial.

Hello SvelteKit!

If you'd like to change the port number (since 3000 is pretty common), you can do that in the package.json file by modifying the scripts section

"scripts": {
    "dev": "svelte-kit dev --port 5432",
},

Setting up the project structure

Ok so first things first, lets add in some helpful project folders. One of my favorite things about Svelte is the ability to add a folder alias. This way, when you're importing components and you 10 levels deep, you don't have to write

import MyComponent from "../../../../../components/MyComponent"

you can use the alias

import MyComponent from "$lib/components/MyComponent"

This way your imports are much cleaner. And this $lib alias is already preset for you! You'll just need to add it into the source folder like so:

├── source
│   ├── lib
│   ├── routes
│   └── app.html

Now, anything you put in here can be referenced using the $lib alias. That was easy. You can explore more on svelte aliases inside the jsconfig.json file.

Let's add a few directories inside our new lib folder to help structure our project:

├── source
│   ├── lib
│   │   ├── components
│   │   ├── data
│   │   ├── functions
│   ├── routes
│   └── app.html

Components will house our future project files such as , , or .

Data will house JSON files storing static data

Functions will house javascript specific functionality that might get reused. This could be something like a URL slugify function, a random number generator, and even our authentication functions that we'll be building.

Now we have our project setup, we need to install Backendless.

Backendless

You'll need an account with Backendless to get an API key. They have a free trial, and a pseudo-free tier that requires you to complete their training course to unlock. Highly recommend doing that, since it gives a great overview on how the platform works.

Once you have an account, it will prompt you to create an "app". Backendless allows you to create multiple apps under a single account, which is an easy way to keep your projects separate. One app could contain hundreds of database tables, while another might only use the authentication library. Very handy.

It will also allow you to pick a "subdomain". We won't go into detail about that in this article, but pick whichever one you like. The name doesn't really matter.

Once your new app is set up, you'll be given two API keys. One is for your account, and one is to denote what SDK you'll be using. In this case, it will be the javascript API key. Both of these keys are meant to be public, so don't worry about them getting "stolen".

Installing the Backendless NPM package

https://www.npmjs.com/package/backendless

Run this in your project's terminal / command line:

npm i backendless

All done!

Add the API keys to your project

Svelte has a built-in way of creating a global layout for your project. This is helpful to standardize your styles and functionality across all pages. You can do this by creating a new file inside your routes folder called __layout.svelte. Notice the two underscores.

├── source
│   ├── lib
│   │   ├── components
│   │   ├── data
│   │   ├── functions
│   ├── routes
│   │   ├── __layout.svelte
│   │   ├── index.svelte
│   └── app.html

Here is where we'll initialize Backendless. Inside your new __layout.svelte file, add in a <script> tag and import your new backendless package. Then add the <slot></slot feature from Svelte. This tells the layout file to import the current page content that you're on. You should see your index.svelte content show up after you save this.

<script>
    // Import the Backendless system into our application
    import Backendless from 'backendless'
</script>

<slot></slot>

Now we need to initialize the package by calling the built-in .initApp() method. This method requires both your Backendless App Key, and the Backendless Javascript SDK Key.

<script>
    // Import the Backendless system into our application
    import Backendless from 'backendless'
    const BACKENDLESS_APP_ID = 'ABCD-1234-XYZ0-7890-EFGHIJKLMNOP';
    const BACKENDLESS_API_KEY = 'QRST-5678-UVWX-YZ90-ABCDEFGHIJK';
    Backendless.initApp(BACKENDLESS_APP_ID, BACKENDLESS_API_KEY);
</script>

<slot></slot>

And now Backendless is initialized 🎉.

You could also store these in an env file if you want. Make sure to prefix them with VITE_ so that Svelte can read them on the front-end. Similar to how React uses REACT_APP_ prefix to expose their environment variables.

Create a user in your Backendless console

Now that your Backendless app is set up, make sure you are logged in, and on the left sidebar, click on "data" with the database icon. You'll see some new columns on the left side show up. App Tables, App Views, and System Data. Inside the System Data section, click on the table "Users" to bring up your built-in user table.

The table will highlight and prompt you to type in an email and a password. Once you do that, you're done!

Make sure that the column called userStatus is set to ENABLED before continuing. If it's not, click on the little dropdown arrow and choose "enabled".

Setting up authentication

We're going to set up a Svelte Store to track our user data that's returned from Backendless. This way it can be accessed on any component or page throughout our project. Inside the lib folder, create a new file called store.js.

├── source
│   ├── lib
│   │   ├── components
│   │   ├── data
│   │   ├── functions
│   │   ├── store.js
│   ├── routes
│   │   ├── __layout.svelte
│   │   ├── index.svelte
│   └── app.html

Import the writable function so we can create a store.

import {writable} from 'svelte/store';

Then add our new store variable and call it user. This will be an object containing all the user information we decide to store about our users.

import {writable} from 'svelte/store';

export const user = writable({});

And that's really all we need to do right now. Go back to the __layout.svelte file and let's import this svelte store into the file.

<script>
    // Import the Backendless system into our application
    import Backendless from 'backendless'
    const BACKENDLESS_APP_ID = 'ABCD-1234-XYZ0-7890-EFGHIJKLMNOP';
    const BACKENDLESS_API_KEY = 'QRST-5678-UVWX-YZ90-ABCDEFGHIJK';
    Backendless.initApp(BACKENDLESS_APP_ID, BACKENDLESS_API_KEY);

    import {user} from "$lib/store";
</script>

<slot></slot>

Lets setup some svelte code here to check if the email key inside the user object exists. If it doesn't, we'll show the login form. This is how we'll know the user is logged in or not. Make sure to add the $ in front of the svelte store when it's used inside the UI. This tells Svelte to automatically update this value any time the svelte store changes.

<script>
    // Import the Backendless system into our application
    import Backendless from 'backendless'
    const BACKENDLESS_APP_ID = 'ABCD-1234-XYZ0-7890-EFGHIJKLMNOP';
    const BACKENDLESS_API_KEY = 'QRST-5678-UVWX-YZ90-ABCDEFGHIJK';
    Backendless.initApp(BACKENDLESS_APP_ID, BACKENDLESS_API_KEY);

    import {user} from "$lib/store";
</script>

{#if $user.email}
    <h1>Welcome, User</h1>
{:else}
    <form>
        <label>Email: <input type="email"></label>
        <label>Password: <input type="password"></label>
        <button type="submit">Log In</button>
    </form>
{/if}

<slot></slot>

Add in the Login Function

Now the fun begins. Let's add in our Backendless login function inside our script tag. Once the user is successfully logged in, we'll update the svelte store and the UI will automatically update with the latest information.

Since Backendless needs the window object, we'll have to add the svelte specific onMount function so that this runs on the client side. This is similar to React's useEffect hook.

To make the data easier to work with, lets create a variable to track the input values. We'll call it loginData and make it an object with two keys: email and password.

<script>
    // Import the Backendless system into our application
    import Backendless from 'backendless'
    const BACKENDLESS_APP_ID = 'ABCD-1234-XYZ0-7890-EFGHIJKLMNOP';
    const BACKENDLESS_API_KEY = 'QRST-5678-UVWX-YZ90-ABCDEFGHIJK';
    Backendless.initApp(BACKENDLESS_APP_ID, BACKENDLESS_API_KEY);

    import {user} from "$lib/store";

    let loginData = {
        email: "",
        password: "",
    }
</script>

{#if $user.email}
    <h1>Welcome, User</h1>
{:else}
    <form>
        <label>Email: <input type="email" bind:value={loginData.email}></label>
        <label>Password: <input type="password"  bind:value={loginData.password}></label>
        <button type="submit">Log In</button>
    </form>
{/if}

<slot></slot>

Now for our login function. We'll define a new function called handleLogin and make it async. This will keep our code a little shorter. We'll then bind that new function to our form whenever a user tries to submit it. This is the most semantic way to capture form events. Our new function will do three things:

1) preventDefault() will stop our form from navigating us away from the page.
2) Run the Backendless login function with our username and password
3) Update our svelte store with the returned information

<script>
    // Import the Backendless system into our application
    import Backendless from 'backendless'
    const BACKENDLESS_APP_ID = 'ABCD-1234-XYZ0-7890-EFGHIJKLMNOP';
    const BACKENDLESS_API_KEY = 'QRST-5678-UVWX-YZ90-ABCDEFGHIJK';
    Backendless.initApp(BACKENDLESS_APP_ID, BACKENDLESS_API_KEY);

    import {user} from "$lib/store";

    let loginData = {
        email: "",
        password: "",
    }

    async function handleLogin(e) {
        e.preventDefault();

        // Log the user in. This returns a JSON object
        let response = await Backendless.UserService.login(
            loginData.email, loginData.password, true
        );

        // Save the updated user information to our svelte store
        user.set(response);
    }
</script>

{#if $user.email}
    <h1>Welcome, User</h1>
{:else}
    <form on:submit={handleLogin}>
        <label>Email: <input type="email" bind:value={loginData.email}></label>
        <label>Password: <input type="password"  bind:value={loginData.password}></label>
        <button type="submit">Log In</button>
    </form>
{/if}

<slot></slot>

Save your file. Refresh your page just to make sure everything is fresh (or start your svelte server if it's not running), and now try to log in with your new email and password that you made for yourself.

You should see the "Welcome, User" message! And that's all it takes to set up authentication with Backendless.

Advanced 11ty: Using Objects in your UI

Brewhouse Digital — Sat, 05 Feb 2022 17:34:55 +0000

In this tutorial, we will be writing an async / await call and then returning its response (an object) to the UI for further use.

Specifically, we'll be reading EXIF data from a photo in our images folder, but you'll be able to swap out our asynchronous call for any other asynchronous call you have, such as a fetch request, or another NPM package that you're using.

To begin, we're going to start with an 11ty filter. This is because filters can be chained together, we we'll need to do that in order to extract all of the object data on our front-end. I'll be using the Nunjucks syntax, but you'll be able to switch between Liquid or Handlebars fairly easily.

Inside our eleventy.js file, lets create our new filter:

eleventyConfig.addNunjucksAsyncFilter("getExifData", async function(image, callback) {
   // Coming soon
}

Starting from the top line, the built in 11ty method addNunjucksAsyncFilter will create a promise for us that won't be resolved until we say so, using the callback parameter at the end. I'll get into more detail on that later.

After the method, we give our filter a name. In this case, "getExifData". This is how we'll call the filter on the UI. After that, we create our async function and in our example, we want to pass an image path to our filter for the processing. The last thing you include in the parameters is the callback. This is required or the promise will never complete, and sometimes 11ty can crash if its not there.

Now what we want to do is import our NPM package. I'll be using ExifReader for this.

P.S. this is where you would swap out for your own asynchronous package / function.

npm i exifreader

At the top of your eleventy.js file, you can call it inside your app like so:

const ExifReader = require('exifreader');

Now that its added to our project, we can use it inside our new filter.

eleventyConfig.addNunjucksAsyncFilter("getExifData", async function(image, callback) {
   const exifData = await ExifReader.load(image);
}

What this will do is take an image path thats supplied to the filter, run it through the NPM package, and return a gigantic object of all the EXIF data contained within the image. This particular package is asynchronous so we need to add the await parameter so that 11ty doesn't finish compiling before the promise is fulfilled.

In my case, I dont need all of the data returned from this package, so I'm going to create my own Object of just the things I want.

eleventyConfig.addNunjucksAsyncFilter("getExifData", async function(image, callback) {
   const exifData = await ExifReader.load(image);

    const extractedValues = {
        camera: exifData.Model.value,
        shutterSpeed: exifData.ExposureTime.value,
        fStop: exifData.FNumber.value,
    }
}

Now I've simplified what data gets returned, and this will make it much easier to call on the UI side. Otherwise, I would have to drill down each of the objects and that might look messy if we're using this filter a lot. This way, it is standardized before it hits the front-end.

Now we need to resolve our promise. We do that by using the last function parameter, callback, passing null as the first value, and then our data that we want returned as the second value.

eleventyConfig.addNunjucksAsyncFilter("getExifData", async function(image, callback) {
   const exifData = await ExifReader.load(image);

    const extractedValues = {
        camera: exifData.Model.value,
        shutterSpeed: exifData.ExposureTime.value,
        fStop: exifData.FNumber.value,
    }

    callback(null, extractedValues);
}

Now we're ready to call this on the UI side.

Inside of your front-end files (in this case I'll be using blog-post.html), we can call the filter.

{{ "images/beach/sandy-waves.jpg" | getExifData }}

If you run this code, you'll probably see that it returns [object Object]. That means we're on the right path! Javascript doesn't let you print objects to the DOM as text, so we know that the eleventy.js filter is doing what it is supposed to do.

Now we can save this object into its own variable using a nunjucks function called set. And because we used a filter in the beginning, we can chain these together like so:

Inside your blog-post.html file change your expression syntax {{ }} to be the function syntax {% %} and call set:

{% set PhotoData = "images/beach/sandy-waves.jpg" | getExifData %}

Now we have our object stored in a way that we can work with.

In our UI, try this out:

<h1>Camera: {{ PhotoData.camera }}</h1>

And you should see your object data being compiled to the UI!

Completed Code

eleventyConfig.addNunjucksAsyncFilter("getExifData", async function(image, callback) {
   const exifData = await ExifReader.load(image);

    const extractedValues = {
        camera: exifData.Model.value,
        shutterSpeed: exifData.ExposureTime.value,
        fStop: exifData.FNumber.value,
    }

    callback(null, extractedValues);
}

{% set PhotoData = "images/beach/sandy-waves.jpg" | getExifData %}

<h1>Camera: {{ PhotoData.camera }}</h1>

This is how we can bring objects into our 11ty UI and parse them into our code. Hope you enjoyed this tutorial.

This same process will work even if you dont use an asynchronous call. Just remove all the async / await parameters and then change your addNunjucksAsyncFilter to addFilter.

Using secure environment variables in SvelteKit and Netlify

Brewhouse Digital — Sun, 01 Aug 2021 17:04:27 +0000

If your project needs to access a private API key such as Stripe or a database, you have come to the right place. This process started after I needed to access a database with a private API key. The SvelteKit documentation (and dozens of other articles on the web) explains how you can expose your environment variables to your javascript using Vite, but what if you wanted to use them securely through a Netlify function?

Step 1: Create your .env file

Create a file called .env in the root of your document. Inside, type a placeholder key/value pair such as:

ENVIRONMENT=localhost

Create the sample API file

Now that we have your new key defined, you'll need to create the API to read it. SvelteKit does things a little different in that it includes your APIs and pages inside a single folder called routes. Inside this folder, my personal preference is to create a new api folder to keep all the APIs separate from the pages. You could also disperse the APIs throughout your pages if you want. SvelteKit knows what is an API based on the .svelte or .js extension.

A gotcha here is that whatever you name the APIs, it can only be alphabetical names. Something like _api won't work since SvelteKit tries to render this as a special file.

Inside your new folder, create the new helloWorld.js file.

SvelteKit APIs are a little simpler than your standard Netlify function. Interestingly enough, when you build your project, SvelteKit includes all of your APIs together in a single render.js API.

Setting up the API

Inside your new file, you'll want to set up the foundation like so:

/**
 * @type {import('@sveltejs/kit').RequestHandler}
 */
export async function get(request) {
    const data = request.body;

    return {
        body: {
            message: "Hello World!"
        }
    };
}

In this example, this is an HTTP GET API. You can change that to post() for HTTP POST requests.

const data = request.body; returns any data that was sent along with the fetch request, such as with a fetch POST request.

Setting up the environment variable

Now with our base API ready, we can include our new environment variable that we created. You'll need to use the dotenv NPM package.

Since SvelteKit uses modules, you won't be able to use the require() statement. You'll have to use import instead, like so:

import dotenv from 'dotenv';
dotenv.config();

This snippet will go at the very top of your new API file like so:

import dotenv from 'dotenv';
dotenv.config();

/**
 * @type {import('@sveltejs/kit').RequestHandler}
 */
export async function get(request) {
    const data = request.body;

    return {
        body: {
            message: "Hello World!"
        }
    };
}

Accessing the new environment values

Vite has a hard time reading environment values, and so you must reference it by bracket notation.

// Wrong! This will return undefined
process.env.ENVIRONMENT;

// Correct! This will return 'localhost'
process.env['ENVIRONMENT'];

In your file, you can access the value securely by referencing with process.env. In our helloWorld.js file, let's call it in the return statement.

import dotenv from 'dotenv';
dotenv.config();

/**
 * @type {import('@sveltejs/kit').RequestHandler}
 */
export async function get(request) {
    const data = request.body;

    return {
        body: {
            message: "Hello World from " + process.env['ENVIRONMENT']
        }
    };
}

Setting up your SvelteKit project for Netlify

For all these pieces to connect properly, you'll have to use the Netlify Adapter. This is a SvelteKit requirement for deploying to a third party platform. Since we are using Netlify in this example, navigate to your svelte.config.js file in the root of your project, and add in:

import adapter from '@sveltejs/adapter-netlify';

to the very top. After this, run npm install to install all the required packages. If you get an error, check your package.json file and make sure that the package looks something like this:

"@sveltejs/adapter-netlify": "^1.0.0-next.25"

That "next" is important since at the time of this writing, SvelteKit is still in beta.

Once the adapter is installed, you need to add it to your config information. Inside the same svelte.config.js file, you can add your adapter inside the kit property. That looks like this:

adapter: adapter()

Here is a basic example of the entire svelte.config.js file:

import adapter from '@sveltejs/adapter-netlify';

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

        // Svelte requires an adapter for deployment
        adapter: adapter()
    }
};

export default config;

Once that is done, you'll need to create your netlify.toml file so Netlify can read where your files go.

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

Testing to make sure it works

Before we do all the work to get this on Netlify, lets test the API locally. Spin up your SvelteKit site by typing npm run dev in your command line or terminal, and then open http://localhost:3000 in your browser.

Navigate to your new API by following the paths you created in the routes folder. In my version, I added it under an api folder inside of routes. My path looks like:

http://localhost:3000/api/helloWorld

and you should see your new API response!

Deploy your site to Netlify

Once you deploy to netlify, you'll need to set up your environment variable there. Navigate to your site settings, and click on Site Settings

Choose Build & Deploy

Then choose Environment

click on the 'Edit variables' button, and add in a new variable called ENVIRONMENT (in all caps) and give it a value of production.

Once you have saved this, you may need to redeploy your site to make sure the new ENVIRONMENT variable is being loaded correctly.

Testing on Netlify

Navigate to your new API by following the paths you created in the routes folder. In my version, I added it under an api folder inside of routes. My path looks like:

https://random-long-netlify-domain.netlify.app/api/helloWorld

and you should see your new API using secure environment variables!

Happy coding!

Using PurgeCSS with Bootstrap and Eleventy

Brewhouse Digital — Sun, 09 May 2021 15:51:39 +0000

Tailwind is rad but have you ever wanted a customized, slim version of Bootstrap?

In this tutorial, we'll be adding PurgeCSS to our Eleventy project and have it automatically remove unused css while working on our project. It will scan through our nunjucks, javascript, markdown, and whatever other file types you want to use and make sure that we're only using the slimmest version of the Bootstrap library possible.

This tutorial assumes you already have the bootstrap css library added to your project. If not, go to https://getbootstrap.com/ and download the CSS. You can add it anywhere in your project. I keep mine in a source folder.

For this specific tutorial, you'll need two separate files. One for bootstrap.css, and another for bootstrap-reboot.css. This is because PurgeCSS will remove the reboot styles, potentially causing cross-browser issues in your CSS. We will remedy this later in the tutorial.

TLDR on what PurgeCSS is

PurgeCSS can scan through your content using a regex and find all the class names that are used in your project. You then feed it a css file, and it will remove any css that was not found in your project. The minified bootstrap 5 css library is around 150kb. Using PurgeCSS, you can easily drop that down to 15kb.

Step 1 - Install PurgeCSS

Install PostCSS & PurgeCSS, so they can work together.

npm i -D @fullhuman/postcss-purgecss postcss

PostCSS is an additional tool that lets you string together multiple plugins. This will be useful later if you decide you want to use something like Autoprefixer, as you can quickly add in more plugins. I'll go over that more in detail later in the tutorial.

We're also going to install Clean-CSS to help us minify the end result.

npm install clean-css

Step 2 - Create Module File

Create a file in your eleventy _data folder called compileCSSFramework.js (or whatever you want to name it. The name doesn't actually matter).

It is important to add it to this folder because the eleventy watch system can sometimes finish its updates before asynchronous requests (like PurgeCSS) are completed. By putting this in the _data folder, the eleventy watch system will wait until Bootstrap is completed before building the rest of the site.

Step 3 - Setup Require Statements

Add in your dependencies to the top of our new JS file. For this, we'll need the NodeJS file system, a css minifying plugin, our PostCSS and PurgeCSS libraries.

const fs = require("fs");
const MinifyCSS = require("clean-css");
const postCSS = require('postcss');
const purgeCSS = require('@fullhuman/postcss-purgecss');

Step 4 - Add In Modules Export Function

The next step is adding our module.exports. Below our require statements, create your module exports function.

module.exports = async function() {

}

There's a few things we'll need to do here:
1) Safety checks for the folder structure
2) Set up the paths to our files
3) Purge the Bootstrap library

Step 5 - Build The Safety Checks

First is to check if the eleventy _site folder is built (which doesn't exist when this function runs). This is because the NodeJS WriteFile function is unable to create files inside of folders that don't exist. We're going to make sure these folders are there so that we can successfully save our new bootstrap css.

module.exports = async function() {
  // You must create the folder structure first.
  // WriteFile does not create files if parent folders are missing
  if (!fs.existsSync('_site')){fs.mkdirSync('_site');}
  if (!fs.existsSync('_site/css')){fs.mkdirSync('_site/css');}
}

Step 6 - Setup File Paths

Now we are going to define our file paths in variables so that we can easily modify them in the future. There are three that you need:

1) The main bootstrap css source file
2) The target destination
3) The list of content that PurgeCSS needs to scan through.

Inside the module.exports function:

// Create a custom, purged, version of Bootstrap
const sourceCSS = "source/css/_bootstrap.css";
const destinationCSS = "_site/css/bootstrap.css";
// Add in your file types here
const sourceContent = [
  'source/**/*.njk',
  'source/**/*.html',
  'source/**/*.md',
  'source/**/*.liquid',
  'source/**/*.js'
];

You'll need to modify the sourceCSS path to match where your bootstrap files are located.

The destinationCSS shouldn't change much since the default eleventy project outputs the static files to the _site folder. You'll need to modify this if you've changed the defaults.

Inside the source array, the /**/ is a wildcard folder search. In this example, it will find every .njk, .html, .md, .liquid, and .js file and scan those for class names. Feel free to add or remove file names for your specific project.

Step 7 - Set Up PostCSS

Setting up PostCSS this way will allow us to add in future plugins like Autoprefixer.

Inside the module.exports function:

fs.readFile(sourceCSS, (err, css) => {
  postCSS([/* Plugins Go Here */])
  .process(css, {
    from: sourceCSS,
    to: destinationCSS
  })
  .then(result => {

  })
  .catch(error => {
    console.log(error)
  });
})

This tells NodeJS to go find our source bootstrap file, and pass the contents to the PostCSS plugin. It takes it, processes it, then returns the finished result. Inside the .then() promise, we'll tell PostCSS what to do with the new, trimmed code.

First, we need to tell it to use PurgeCSS.

Step 8 - Set Up PurgeCSS

Inside the /* Plugins Go Here */ comment, we can add PurgeCSS with our specific option parameters.

Inside the module.exports function:

postCSS([
  purgeCSS({
    content: sourceContent,
    variables: true,
    keyframes: true
  })
])

Step 9 - Adding Reboot Back Into The CSS

Since most of the Reboot code is stripped out, we'll need to add it back in when the processing is completed.

Inside our .then promise, lets grab the result and prepend Reboot.

.then(result => {
  let newCSS = result.css;
  let rebootCSS = fs.readFileSync('source/css/_reboot.css');
  let allCSS = rebootCSS + newCSS;
})

Now we won't have any issues with cross browser CSS.

Step 10 - Minifying The Output

This step is optional, but useful for keeping a small file size. Below our combined reboot + css variable, add in this easy one-liner to minify the result.

let compiledCSS = new MinifyCSS().minify(allCSS)['styles'];

Step 11 - Save The New Bootstrap Code

This will output the new CSS to your destination file.

fs.writeFileSync(destinationCSS, compiledCSS, {encoding:"utf8"})

The Final Result

const fs = require("fs");
const MinifyCSS = require("clean-css");
const postCSS = require('postcss');
const purgeCSS = require('@fullhuman/postcss-purgecss');

module.exports = async function() {
  // You must create the folder structure first.
  // WriteFile does not create files if parent folders are missing
  if (!fs.existsSync('_site')){fs.mkdirSync('_site');}
  if (!fs.existsSync('_site/css')){fs.mkdirSync('_site/css');}

  // Create a custom, purged, version of Bootstrap
  const sourceCSS = "source/css/_bootstrap.css";
  const destinationCSS = "_site/css/bootstrap.css";
  // Add in your file types here
  const sourceContent = [
    'source/**/*.njk',
    'source/**/*.html',
    'source/**/*.md',
    'source/**/*.liquid',
    'source/**/*.js'
  ];

  fs.readFile(sourceCSS, (err, css) => {
    postCSS([
      // Purge CSS will scan through and remove the styles 
      // that aren't in your project
      purgeCSS({
        content: sourceContent,
        variables: true,
        keyframes: true
      })
    ])
    .process(css, {
      from: sourceCSS,
      to: destinationCSS
    })
    .then(result => {
      // Combine with Reboot
      let newCSS = result.css;
      let rebootCSS = fs.readFileSync('source/css/_reboot.css');
      let allCSS = rebootCSS + newCSS;

      // Minify
      let compiledCSS = new MinifyCSS().minify(allCSS)['styles'];

      // Save
      fs.writeFileSync(destinationCSS, compiledCSS, {encoding:"utf8"})
    })
    .catch(error => {
      console.log(error)
    });
  })
};

Now when you spin up your local server, npx eleventy --serve, PurgeCSS will be running in the background, cleaning up any unused code from Bootstrap.

If you want to add a different library like Material UI, or Foundation, you should be able to swap out your path variables with the new CSS. If you do use something besides Bootstrap, make sure to change the lines pertaining to Reboot CSS.

If you'd like to use a ready-to-use eleventy template, try out the Celestial template on github. It's got all these features and more.

Minifying JS in Eleventy on production

Brewhouse Digital — Fri, 30 Apr 2021 17:54:32 +0000

This tutorial is written for the 11ty framework and we will be hosting the app on Netlify. Other platforms like Cloudflare and Vercel have similar support for this as well.

The goal of this tutorial is to speed up your local dev environment (by not spending resources minifying your code locally) and then making sure your javascript code is minified in production

Steps

1) Install the dotenv package so you can use environment variables.
npm install dotenv

2) Create the .env file and add it to your .gitignore.

3) Inside of .env, add this line ENVIRONMENT=local and save.

4) Add Dotenv to the top of your eleventy.js file
require('dotenv').config();

5) Log into Netlify and navigate to your site.

6) Click on "Site settings"

7) In the sidebar, click on the "Build & Deploy" link

8) Then click on the "Environment" sub link

9) Click on "Edit Variables" button

10) Add in the same key "ENVIRONMENT", and set the value to be "production"

11) Make sure to save!

12) In your codebase, make sure that the Terser package is installed
npm install terser

13) Import Terser into the top of your eleventy.js file
const { minify } = require("terser");

14) Following the tutorial from the 11ty dev site, we can add Terser (or use your existing implementation) like so:
https://www.11ty.dev/docs/quicktips/inline-js/

eleventyConfig.addNunjucksAsyncFilter("jsmin", async function (
  code,
  callback
) {
  try {
    const minified = await minify(code);
    callback(null, minified.code);
  } catch (err) {
    console.error("Terser error: ", err);
    // Fail gracefully.
    callback(null, code);
  }
});

15) Inside your new filter, wrap the minify function in an if statement

eleventyConfig.addNunjucksAsyncFilter("jsmin", async function (
    code,
    callback
) {
    try {
        if(process.env.ENVIRONMENT === "production") {
            const minified = await minify(code);
            callback(null, minified.code);
        } else {
            callback(null, code);
        }
    } catch (err) {
        console.error("Terser error: ", err);
        // Fail gracefully.
        callback(null, code);
    }
});

16) Inside your nunjuck files, markdown, or liquid files, you can now reference your new filter that will only minify your code when it detects that its in production!

{% set js %}
    {% include "source/_includes/partial-js/authentication.js" %}
    {% include "source/_includes/partial-js/scripts.js" %}
    {% include "source/_includes/partial-js/profile.js" %}
{% endset %}
{{ js | jsmin | safe }}