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:
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.
Top comments (0)