Barim's blog · ابراهيم - Tuto: Setup a Svelte project using esbuild

This article will show you how to set up a new Svelte project to develop a custom tag, using esbuild, with live reloading.

Reload Svelte app when code changes

First, why use esbuild ? Well, it’s a very fast bundler that’s easy to set up, and I did not find a lot of tutorials about Svelte and esbuild.

Next, what is a custom tag ? It’s an HTML tag, like <pre> or <input> but we are in charge to define its behavior and its look, thanks to some JavaScript code. In fact, thanks to Svelte, we can define both in a single component.

So, to do just that, in a new directory, we will create 4 files :

package.json : defines all JavaScript dependencies
esbuild.js : script to launch the local server, watch files and reload Svelte
index.html : our main web page
app.svelte : the Svelte custom tag component

package.json

This is where we declare our dependencies. We need esbuild and its svelte plugin. Obviously, we also need Svelte.

{
  "type": "module",
  "dependencies": {
    "esbuild": "^0.19.4",
    "esbuild-svelte": "^0.8.0",
    "svelte": "^4.2.1"
  }
}

To install all of them, execute the npm install command:

npm i

If you don’t want to create the package.json by hand, you can use this npm command :

npm i esbuild esbuild-svelte svelte

But do not forget to add the line "type": "module", or you’ll get an error at build time.

File esbuild.js

The esbuild script builds, watches and reloads the Svelte application.

import * as esbuild from 'esbuild';
import sveltePlugin from 'esbuild-svelte';

let ctx = await esbuild.context({
	entryPoints: ['app.svelte'],
	bundle: true,
	format: 'esm',
	outdir: './build',
	plugins: [
		sveltePlugin({
			compilerOptions: { customElement: true}
		})
	],
	banner: {
		js: "new EventSource('http://127.0.0.1:8888/esbuild').addEventListener('change', () => location.reload())"
	},
	logLevel: 'info'
});
await ctx.watch();
await ctx.serve({
	servedir: './',
	port: 8888,
	host: '127.0.0.1'
});

The entryPoints lists Svelte component main files : in this example, we only have app.svelte.

We want to create a custom tag (web component) so we need to force the format to esm and also activate the option customElement in the Svelte plugin.

This script will start a local server from the local directory (see servedir path) on port 8888 and watch for any changes and reload the page if any, by injecting a JavaScript code inside the rendered HTML, thanks to the banner esbuild directive.

File index.html

Create an index.html file :

<!DOCTYPE html>
<html lang="en">
	<head>
		<title></title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script defer src="build/app.js" type="module"></script>
	</head>
	<body>
		<app-input/>
	</body>
</html>

You can see that we use our web component app-input as any HTML tag. It is that easy with Svelte. Just use a two words tag with a dash separation, so the browser knows it is a custom tag.

File app.svelte

And lastly, add a file ‘app.svelte’ that will define our web component :

<svelte:options customElement="app-input" />

Hello world

Now, launch your local server with :

node esbuild.js

If all is ok, you can connect your browser to http://localhost:8888/ and get the greeting message.

You can update your code and see the live refresh. Happy coding !

← Tuto: Tags in Svelte Go Learning Resources →