Integrating SvelteKit with Backendless
Tags: svelte, backendless, javascript, database
Published: 2022-02-14 03:39:16

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.

```bash
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.

```bash
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!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9lp0uc26r84ex839gej4.png) 

*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*

```json
"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

```javascript
import MyComponent from "../../../../../components/MyComponent"
```

you can use the alias

```javascript
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 <Card />, <Modal />, or <Accordion />.

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".

![Backendless Dashboard view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2f498w9gfqrk2p6y0uao.png) 

### Installing the Backendless NPM package

[https://www.npmjs.com/package/backendless](https://www.npmjs.com/package/backendless)

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

```bash
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.

```html
<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.

```html
<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.

![Backendless Database tool for setting up a new user](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0cb5njyvn2k2lwqgyzq.png) 

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.

```javascript
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.

```javascript
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.

```html
<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.

```html
<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>
```

![The SvelteKit site showing the new form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mshxf5720ao8pcy9rdwv.png) 

### 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.

```html
<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

```html
<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.

![Backendless successfully logging in the new user through the form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7nhx2ze6trmmq0u9co3h.gif)