DEV Community

CodeCadim by Brahim Hamdouni
CodeCadim by Brahim Hamdouni

Posted on • Edited on

Setup a Svelte project using esbuild

#svelte #tutorial #javascript #esbuild

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

Reload Svelte app when code changes

Fisrt, why use esbuild ? Well, it's a very fast bundler that's easy to setup and I did not find a lot of tutorial 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" } }
Enter fullscreen mode Exit fullscreen mode

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

npm i
Enter fullscreen mode Exit fullscreen mode

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

npm i esbuild esbuild-svelte svelte
Enter fullscreen mode Exit fullscreen mode

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

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' });
Enter fullscreen mode Exit fullscreen mode

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.

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>
Enter fullscreen mode Exit fullscreen mode

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.

app.svelte

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

<svelte:options customElement="app-input" /> Hello world
Enter fullscreen mode Exit fullscreen mode

Now, launch your local server with :

node esbuild.js
Enter fullscreen mode Exit fullscreen mode

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 !

This article was cross-posted from my blog.

Top comments (0)