Integrating SvelteKit with Backendless

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.