Experimenting With Svelte - episode 1 #

Getting a basic site running locally

Introduction

This is part of a series of notes documenting some experiments with the Svelte and SvelteKit code stack. To see a full list of posts in this series visit the project link

Getting going

In the previous note I explained why I wanted to experiment with Svelte and SvelteKit.

As is the case with most frameworks these days, SvelteKit offers a simplified CLI setup of a basic project, so my first experiment is to get this working locally.

Following the instructions, I opened up my WSL2 Ubuntu distro, created a new directory for these epxeriments, and typed:

npm init svelte@next experiment01

During the setup it asks you if you want to use Typescript, ESLint and Prettier - I said yes to all of these.

Then I ran these commands:

cd experiment01
npm install
npm run dev -- --open

A hiccough

On the first run the build failed with this error message:

(node:9397) UnhandledPromiseRejectionWarning: file:///home/julian/source/web/svelte-kit-experiments/experiment01/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:257
import { createMakeHot } from "svelte-hmr";
         ^^^^^^^^^^^^^
SyntaxError: The requested module 'svelte-hmr' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'svelte-hmr';
const { createMakeHot } = pkg;

A bit of Googling suggested that the fix was to update node. Turned out I was running node v12, so a quick nvm install 14.17.6 got things working again.

This time on running npm run dev -- --open my web browser opened to diplay a simple test site running locally.

A note on tooling. Throughout this series of experiments I will be using Visual Studio Code to edit files, together with the Svelte for VS Code extension.

Code on GitHub

As I work through these epxeriments I will share the code into this repo on GitHub. The code for this first experiment is in the sub-folder /experiment01.

Next steps

In the next experiment I will explore the code underneath each of the three pages in the sample app.

Avatar
Proactive application of technology to business

My interests include technology, personal knowledge management, social change

Related