FullStack JWT Auth: Migrating SvelteKit to its latest version
Tags: webdev, javascript, svelte, tutorial
Published: 2022-10-08 10:09:53

## 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][1]. 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][2] extensively.

## Source code

These changes can be seen in this [git commit][3].

## Live version

This project was deployed on heroku (backend) and vercel (frontend) and its live version can be accessed [here](https://django-sveltekit-jwt-auth.vercel.app/).

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

```bash
╭─[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:

```bash
╭─[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:

```json
{
    ...
    "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:

```bash
╭─[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:

```json
{
    ...
    "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:

```bash
╭─[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:

```bash
╭─[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][3]. `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 ☕](mailto:sirneij@gmail.com). You can also connect with/follow me on [LinkedIn](https://www.linkedin.com/in/idogun-john-nelson/) and [@Sirneij](https://twitter.com/Sirneij) on Twitter. Also, it isn't bad if you help share it for wider coverage. I will appreciate it...

[1]: https://github.com/sveltejs/kit/discussions/5748 "Fixing load, and tightening up SvelteKit's design before 1.0 #5748"
[2]: https://github.com/sveltejs/kit/discussions/5774 'Migration guide #5774'
[3]: https://github.com/Sirneij/django_svelte_jwt_auth/commit/3c02bfabe55c7b5504b20b54026e935aaf84a4fe 'Migrated SvelteKit to latest version.'