FullStack JWT Auth: Introducing SvelteKit

Introduction

Welcome to the front-end part of this series. In this article, we'll incept working with SvelteKit. It will be introduced and the file structure we'll be working with will be shown. Let's get right in!

Source code

The overall source code for this project can be accessed here:

Sirneij / django_svelte_jwt_auth

A robust and secure Authentication and Authorization System built with Django and SvelteKit

django_svelte_jwt_auth

This is the codebase that follows the series of tutorials on building a FullStack JWT Authentication and Authorization System with Django and SvelteKit.

This project was deployed on heroku (backend) and vercel (frontend) and its live version can be accessed here.

To run this application locally, you need to run both the backend and frontend projects. While the latter has some instructions already for spinning it up, the former can be spinned up following the instructions below.

Run locally

To run locally

• Clone this repo:

   git clone https://github.com/Sirneij/django_svelte_jwt_auth.git
  

• Change directory into the backend folder:

   cd backend
  

• Create a virtual environment:

   pipenv shell
  

  You might opt for other dependencies management tools such as virtualenv, poetry, or venv. It's up to you.

• Install the dependencies:

  pipenv install
  

• Make migrations and migrate the database:

   python manage.py makemigrations
   python manage.py migrate
  

• Finally, run the application:

   python manage.py runserver
  

View on GitHub

Live version

This project was deployed on heroku (backend) and vercel (frontend) and its live version can be accessed here.

What is SvelteKit?

SvelteKit is to svelte.js what Next.js is to react.js with somewhat different approach and idea. It is a front-end framework that fuses Single-Page Applications (plagued by compromising SEO and others) and Multi-Page Applications (without app-like feel) to deliver a transitional application feel which combines the best of both worlds. SvelteKit is ridiculously magical in ensuring beautiful development experience and intuitive syntax which makes it very easy to learn and productive. It's suitable for building web applications of all sizes, even data-intensive ones.

File structure

The current file structure for the front-end project is as follows:

├── frontend
│   ├── package.json
│   ├── package-lock.json
│   ├── README.md
│   ├── src
│   │   ├── app.d.ts
│   │   ├── app.html
│   │   ├── components
│   │   │   └── Header
│   │   │       ├── Header.svelte
│   │   │       └── svelte-logo.svg
│   │   ├── dist
│   │   │   └── CSS
│   │   │       ├── style.min.CSS
│   │   │       └── style.min.CSS.map
│   │   ├── lib
│   │   │   ├── constants.ts
│   │   │   └── requestUtils.ts
│   │   ├── routes
│   │   │   ├── accounts
│   │   │   │   ├── login
│   │   │   │   │   └── index.svelte
│   │   │   │   ├── register
│   │   │   │   │   └── index.svelte
│   │   │   │   └── user
│   │   │   │       └── [id].svelte
│   │   │   ├── index.svelte
│   │   │   └── __layout.svelte
│   │   ├── sass
│   │   │   ├── _about.scss
│   │   │   ├── _form.scss
│   │   │   ├── _globals.scss
│   │   │   ├── _header.scss
│   │   │   ├── _home.scss
│   │   │   ├── style.scss
│   │   │   └── _variables.scss
│   │   └── store
│   │       ├── notificationStore.ts
│   │       └── userStore.ts
│   ├── static
│   │   ├── favicon.png
│   │   ├── robots.txt
│   │   ├── svelte-welcome.png
│   │   └── svelte-welcome.webp
│   ├── svelte.config.js
│   └── tsconfig.json
├── Pipfile
├── Pipfile.lock
└── README.md

Kindly grab it here. It contains some folders and files we'll be working with. Currently, most of the HTML and CSS(Sass) have been written and compiled. We'll continue modifying these files as we move on but before then, let's acquaint ourselves with what each sub-folder does.

• components is a sub-folder that was created to house additional components, in this case, Header component. It was created for modularity sake.

• dist: This houses the minimized CSS file for the entire project. It was automatically created from the sass files using Live Sass Compiler by Ritwick Dey VS Code extension.

• lib: Since many requests to the server will be made to create, authenticate, and authorize users in the app, this sub-folder houses two files that will help prevent over-bloating of each component with long scripts. The current files in this folder are constants.ts — only exports the BASE_API_URI to avoid repetition — and requestUtils.ts — a file that exports most of the functions used for making requests to the server as well as storing and removing refresh tokens to the user's browser's localStorage. It just serves as a nice abstraction to keep code organized.

• routes: This folder was automatically created when you run npm init svelte@next name_of_project. It does what its name suggests — routing. SvelteKit utilizes a somewhat filesystem-based router which generates your routes based on your folder/file structure. For example, since our routes folder contains accounts sub-folder and the login sub-folder with an index.svelte file, to navigate to the login page, your URL will be http://localhost:3000/accounts/login. Based on the file structure. If we had two login pages, like one for normal users and the other for admins for instance, we could have users and admins sub-folders inside the login folder with their respective index.svelte files. Then the URL to the users login page would be http://localhost:3000/accounts/login/users and the admins http://localhost:3000/accounts/login/admins. It should be noted that it's not a must to create folders and then index.svelte in them. I could have achieved same thing if I had only created an accounts folder and then login.svelte in it. I just wanted a clean structure. In SvelteKit, index.svelte is taken as the base file for the page. For instance, the index.svelte at the root of the routes folder will be served on hitting / URI, same as the the one in login folder. __layout.svelte is one of the special files SvelteKit recognizes — __error.svelte is another one. It houses the components you want on every page of the current route. Which means, on all pages. If you have used Django Templating Language, it serves same purpose as your base.html which other templates inherit. It's important to have the __(double underscores) before it. You are encouraged to consult the docs for more clarifications.

• sass is just the folder I created to house my sass codes. Most of styles in there were copied from the demo project that comes with SvelteKit and the compiled CSS files were the ones inside the dist folder.

• store: Stores serve same purpose as redux, ContextAPI and maybe reactQuery in react, and vuex in Vue. They simply help your application behave consistently. In our case, we have two stores — userStore and notificationStore. They do just what their names suggest — store user and notification data. We have writable stores in our case so that we can have access to set and update methods in addition to the subscribe method all store types have. The userStore exposes the current user's data available in object type while notificationStore gives a string notification message.

• static: This houses the static stuff such as your images.

That's it for this article. Up next is some detail about SvelteKit.

Outro

Enjoyed this article, consider contacting me for a job, something worthwhile or buying a coffee ☕. You can also connect with/follow me on LinkedIn.