FullStack JWT Auth: Migrating SvelteKit to its latest version

Introduction

From where we left off, SvelteKit has undergone some breaking changes as discussed in Fixing load, and tightening up SvelteKit's design before 1.0 #5748. The subject of this article is not to discuss whether or not these breaking changes are worth it. We basically want to see how to successfully update the application built in the course of this series of articles to incorporate the latest design decisions of SvelteKit. We will refer to this Migration guide #5774 extensively.

Source code

These changes can be seen in this git commit.

Live version

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

Application's Migration Guide

To fully migrate our current application to incorporate the latest changes, the following steps should be taken:

Step 1: Check possible update in package.json

Open up your terminal in the frontend directory and issue the following command:

╭─[Johns-MacBook-Pro] as sirneij in ~/Documents/Devs/django_svelte_jwt_auth/frontend using node v18.10.0 on (main)✔                                            09:16:47
╰─(๑˃̵ᴗ˂̵)و npx npm-check-updates -u

Then:

╭─[Johns-MacBook-Pro] as sirneij in ~/Documents/Devs/django_svelte_jwt_auth/frontend using node v18.10.0 on (main)✔                                            09:16:47
╰─(๑˃̵ᴗ˂̵)و npm install

After that, change the "dev", "build", "package", and "preview" part of scripts in package.json file to:

{
    ...
    "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "package": "vite package",
    "preview": "vite preview",
    ...
  },
  ...
}

These ensure that SvelteKit uses vite for serving your files in development, build, packaging, or preview mode.

These commands should update all the dependencies in the project's package.json file. Paradventure it didn't, remove the project's node_modules and package-lock.json file:

╭─[Johns-MacBook-Pro] as sirneij in ~/Documents/Devs/django_svelte_jwt_auth/frontend using node v18.10.0 on (main)✔                                            09:16:47
╰─(๑˃̵ᴗ˂̵)و rm -rf node_modules package-lock.json

Then, manually update your package.json file's "devDependencies" and "dependencies" sections to the following:

{
    ...
    "devDependencies": {
        "@sveltejs/adapter-auto": "next",
        "@sveltejs/kit": "^1.0.0-next.511",
        "@typescript-eslint/eslint-plugin": "^5.39.0",
        "@typescript-eslint/parser": "^5.39.0",
        "eslint": "^8.24.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-svelte3": "^4.0.0",
        "prettier": "^2.7.1",
        "prettier-plugin-svelte": "^2.7.1",
        "svelte": "^3.50.1",
        "svelte-check": "^2.9.1",
        "svelte-preprocess": "^4.10.7",
        "tslib": "^2.4.0",
        "typescript": "^4.8.4"
    },
    ...
    "dependencies": {
        "@sveltejs/adapter-vercel": "^1.0.0-next.77"
    }
    ...
}

Then install them:

╭─[Johns-MacBook-Pro] as sirneij in ~/Documents/Devs/django_svelte_jwt_auth/frontend using node v18.10.0 on (main)✔                                            09:16:47
╰─(๑˃̵ᴗ˂̵)و npm install

Step 2: Run SvelteKit's migration script

To ease migrating previous codebases to the new design, SvelteKit's maintainers wrote a migration script. Run the migration script using the command below:

╭─[Johns-MacBook-Pro] as sirneij in ~/Documents/Devs/django_svelte_jwt_auth/frontend using node v18.10.0 on (main)✔                                            09:16:47
╰─(๑˃̵ᴗ˂̵)و npx svelte-migrate routes

At first, it needs to be installed which you should consent to. The script helps rename your files and create directories when appropriate. Our routes/__layout.svelte turns to +layout.svelte, routes/index.svelte to routes/+page.svelte, and so on. All codes in each file's <script context="module" lang="ts"> ... </script> have been moved to the file's or directory's +page.ts. If a file's <script context="module" lang="ts"> ... </script> returns a prop such as the one previously in routes/accounts/user/[username]-[id].svelte, you will have to return only the data, in this case userResponse without putting it in props. Also, in the +page.svelte of the directory, replace export let userResponse: UserResponse; with export let data: any; and all its occurrencies.

Aside these, I also made some TypeScript-based adjustments as seen in the git commit. browser which previously lived in $app/env has been moved to $app/environment.

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 and @Sirneij on Twitter. Also, it isn't bad if you help share it for wider coverage. I will appreciate it...