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
, orvenv
. 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
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 thesass
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 areconstants.ts
— only exports theBASE_API_URI
to avoid repetition — andrequestUtils.ts
— a file that exports most of the functions used for making requests to the server as well as storing and removingrefresh
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 runnpm init svelte@next name_of_project
. It does what its name suggests — routing. SvelteKit utilizes a somewhatfilesystem-based router
which generates your routes based on your folder/file structure. For example, since ourroutes
folder containsaccounts
sub-folder and thelogin
sub-folder with anindex.svelte
file, to navigate to thelogin
page, your URL will behttp://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 haveusers
andadmins
sub-folders inside thelogin
folder with their respectiveindex.svelte
files. Then the URL to theusers
login page would behttp://localhost:3000/accounts/login/users
and theadmins
http://localhost:3000/accounts/login/admins
. It should be noted that it's not a must to create folders and thenindex.svelte
in them. I could have achieved same thing if I had only created anaccounts
folder and thenlogin.svelte
in it. I just wanted a clean structure. In SvelteKit,index.svelte
is taken as the base file for the page. For instance, theindex.svelte
at the root of theroutes
folder will be served on hitting/
URI, same as the the one inlogin
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 yourbase.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 thedist
folder.store
: Stores serve same purpose asredux
,ContextAPI
and maybereactQuery
in react, andvuex
in Vue. They simply help your application behave consistently. In our case, we have two stores —userStore
andnotificationStore
. They do just what their names suggest — store user and notification data. We havewritable
stores in our case so that we can have access toset
andupdate
methods in addition to thesubscribe
method all store types have. TheuserStore
exposes the current user's data available in object type whilenotificationStore
gives a string notification message.static
: This houses the static stuff such as yourimages
.
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.
Top comments (0)