Running Svelte Tutorial Locally

Summary

Ashraf Miah
5 min readDec 10, 2022

--

Svelte is a javascript web framework that compiles to native javascript potentially making it lighter and quicker than comparable frameworks such as React.

The team at Svelte offer a brower-based interactive Tutorial, which highlights all of the key features and there other online environments to test your understanding. The Tutorial doesn’t however guide a user on how to create a suitable environment locally using SvelteKit . On face value, it appears that SvelteKit is a bit daunting for beginners but only two small changes are required to use effectively. The purpose of this guide is to provide all he steps needed to run the Svelte Tutorial locally.

NodeJS Environment

With most javascript projects NodeJS and it’s package manager npm are requirements. The reader is left to install for their particular Operating System and set-up. The instructions below are suitable for a Ubuntu 18.04 using the conda package manager. As a side note, that although conda (as part of the miniconda suite) is associated primarily with the Python language, it is quite flexible.

The follow steps create a dedicate conda virtual environment and install the latest nodejs:

# Create environment called npm
conda create --name npm -c conda-forge

Collecting package metadata (current_repodata.json): done
Solving environment: done

## Package Plan ##

environment location: /home/miaha/miniconda3/envs/npm



Proceed ([y]/n)?

Preparing transaction: done
Verifying transaction: done
Executing transaction: done
#
# To activate this environment, use
#
# $ conda activate npm
#
# To deactivate an active environment, use
#
# $ conda deactivate

# Activate npm
conda activate npm

# Install nodejs
conda install nodejs -c conda-forge

Collecting package metadata (current_repodata.json): done
Solving environment: done

## Package Plan ##

environment location: /home/miaha/miniconda3/envs/npm

added / updated specs:
- nodejs


The following packages will be downloaded:

package | build
---------------------------|-----------------
ca-certificates-2022.12.7 | ha878542_0 143 KB conda-forge
libgcc-ng-12.2.0 | h65d4601_19 931 KB conda-forge
libgomp-12.2.0 | h65d4601_19 455 KB conda-forge
libstdcxx-ng-12.2.0 | h46fd767_19 4.3 MB conda-forge
libuv-1.44.2 | h166bdaf_0 1.0 MB conda-forge
libzlib-1.2.13 | h166bdaf_4 64 KB conda-forge
nodejs-18.12.1 | h8839609_0 16.3 MB conda-forge
openssl-3.0.7 | h0b41bf4_1 2.5 MB conda-forge
zlib-1.2.13 | h166bdaf_4 92 KB conda-forge
------------------------------------------------------------
Total: 25.7 MB

The following NEW packages will be INSTALLED:

icu conda-forge/linux-64::icu-70.1-h27087fc_0
libstdcxx-ng conda-forge/linux-64::libstdcxx-ng-12.2.0-h46fd767_19
libuv conda-forge/linux-64::libuv-1.44.2-h166bdaf_0
libzlib conda-forge/linux-64::libzlib-1.2.13-h166bdaf_4
nodejs conda-forge/linux-64::nodejs-18.12.1-h8839609_0
zlib conda-forge/linux-64::zlib-1.2.13-h166bdaf_4

The following packages will be UPDATED:

ca-certificates pkgs/main::ca-certificates-2022.10.11~ --> conda-forge::ca-certificates-2022.12.7-ha878542_0
libgcc-ng pkgs/main::libgcc-ng-11.2.0-h1234567_1 --> conda-forge::libgcc-ng-12.2.0-h65d4601_19
libgomp pkgs/main::libgomp-11.2.0-h1234567_1 --> conda-forge::libgomp-12.2.0-h65d4601_19
openssl pkgs/main::openssl-1.1.1s-h7f8727e_0 --> conda-forge::openssl-3.0.7-h0b41bf4_1

The following packages will be SUPERSEDED by a higher-priority channel:

_libgcc_mutex pkgs/main::_libgcc_mutex-0.1-main --> conda-forge::_libgcc_mutex-0.1-conda_forge
_openmp_mutex pkgs/main::_openmp_mutex-5.1-1_gnu --> conda-forge::_openmp_mutex-4.5-2_gnu


Proceed ([y]/n)?


Downloading and Extracting Packages

Preparing transaction: done
Verifying transaction: done
Executing transaction: done

Simple Approach Using Vite

For the basic tutorial, it’s recommended to use the Vite plugin to create an example project called myapp-simple:

# Create project
npm create vite@latest myapp-simple -- --template svelte

Need to install the following packages:
create-vite@4.0.0
Ok to proceed? (y)

Scaffolding project in /home/miaha/Documents/miaha-svelte/myapp-simple...

Done. Now run:

cd myapp-simple
npm install
npm run dev

As usual it’s important to enter the correct directory and then install the dependencies:

# Install dependencies
npm install

added 24 packages, and audited 25 packages in 11s

4 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

Then run the development server:

# Run server
npm run dev

> myapp-simple@0.0.0 dev
> vite

Forced re-optimization of dependencies
Port 5173 is in use, trying another one...

VITE v4.0.0 ready in 274 ms

➜ Local: http://localhost:5174/
➜ Network: use --host to expose
➜ press h to show help

The key directory is the src folder and the Vite package does not enforce a directory structure — look at the source of App.svelte .

Set-up Tutorial with SvelteKit

The recommended approach is to use SvelteKit which isn’t as intuiive but does a lot of the boilerplate required for production. Confirm the version of node you are running and then create a Svelte project:

# Check node version
node --version

v18.12.1

# Create suitable directory structure
mkdir /path/to/tutorial && cd /path/to/tutorial

# Create svelte project
npm create svelte@latest myapp

create-svelte version 2.0.0-next.202

Welcome to SvelteKit!

This is release candidate software; expect bugs and missing features.

Problems? Open an issue on https://github.com/sveltejs/kit/issues if none exists already.

✔ Which Svelte app template? › Skeleton project
✔ Add type checking with TypeScript? › No
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Playwright for browser testing? … No / Yes
✔ Add Vitest for unit testing? … No / Yes

Your project is ready!
✔ ESLint
https://github.com/sveltejs/eslint-plugin-svelte3
✔ Prettier
https://prettier.io/docs/en/options.html
https://github.com/sveltejs/prettier-plugin-svelte#options
✔ Playwright
https://playwright.dev

Install community-maintained integrations:
https://github.com/svelte-add/svelte-adders

Next steps:
1: cd myapp
2: npm install (or pnpm install, etc)
3: git init && git add -A && git commit -m "Initial commit" (optional)
4: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat

Note that an interactive session is launched to configure the layout — the easiest option is to say “No” to all options — alternatively follow the prompts above for a good baseline. The key choice is the “Skeleton project”.

The next steps are displayed in the text:

# Change into app directory (this is an important step!)
cd myapp

# Install dependencies
npm install

added 147 packages, and audited 148 packages in 13s

30 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

# List installed packages
npm list

myapp@0.0.1 /home/miaha/Documents/miaha-svelte/myapp
├── @playwright/test@1.28.1
├── @sveltejs/adapter-auto@1.0.0-next.90
├── @sveltejs/kit@1.0.0-next.581
├── eslint-config-prettier@8.5.0
├── eslint-plugin-svelte3@4.0.0
├── eslint@8.29.0
├── prettier-plugin-svelte@2.9.0
├── prettier@2.8.1
├── svelte@3.54.0
└── vite@4.0.0

# Start development environment
npm run dev -- --open

> myapp@0.0.1 dev
> vite dev --open


Forced re-optimization of dependencies

VITE v4.0.0 ready in 401 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
10:42:32 [vite-plugin-svelte] ssr compile done.
package files time avg
myapp 3 49.7ms 16.6ms

This will display the default load page. The creation process however created a massive directory structure with over 540 directories!!! So what do you actually edit? The way SvelteKit is structure, the source file is stored under routes e.g.

tree src/routes

src/routes
└── +page.svelte

To follow the tutorial, edit the +page.svelte and see it being Hot Reloaded in the browser e.g.

<h1>Hello World</h1>

Unlike Vite, the directory structure and filenames have to be a certain format. For example, a Example.svelte file in the routes folder will be ignored and cannot be loaded into the main +page.svelte file. Such components must be defined in the lib folder and referenced as $lib. This is a fundamental and key difference between the Vite and SvelteKit approaches.

So a quick summary, is set-up a node environment, create a Svelte application and then edit the file under src/routes to follow the Svelte Tutorial locally.

--

--

Ashraf Miah

Data Scientist and Chartered Aeronautical Engineer (MEng CEng EUR ING MRAeS) with over 15 years experience in the Aerospace, Defence and Rail Industry.