Experimenting With Svelte - episode 1

Getting a basic site running locally

Julian Elve

Sep 17, 2021

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.

Docs: https://docs.hugoblox.com/content/writing-markdown-latex/#callouts

Parameters

#0 : optional, positional Add the class “alert-{#0}” to the

container of the callout element. Default Hugo Blox Builder available styles are “note” and “warning”. Otherwise you can create your own class (see assets/scss/blox-bootstrap/elements/_callout.scss). */}}

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.

code learning-in-public