Dec 10, 2022
Running Svelte Tutorial Locally
Summary
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: doneSimple 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 devAs 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 vulnerabilitiesThen 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/chatNote 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.6msThis 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.svelteTo 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.
