Running Svelte Tutorial Locally

Summary

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.

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

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
# 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
tree src/routes

src/routes
└── +page.svelte
<h1>Hello World</h1>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
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.