Svelte basics: Starting a project from scratch

Despite its "new kid on the block" reputation, Svelte was created back in 2016. The obvious comparisons are with React and Vue.

So, how is Svelte different? It's described as a compiler, it takes your declarative code, and turns it into the equivalent imperative JavaScript (describing desired results rather than explicit commands). This means your App will be smaller as you don't need the framework runtime in the browser. Svelte knows what goes into your app, so it just ships the code for your specific use case.

Basically, if you are using less JavaScript, your App will launch quicker, and your users will be very happy.

So, how do we create a component in Svelte?

First, you need to create a .svelte file, then you can add the following.

<p>Hello, World!</p>

So, I just write HTML? Well, yes. The other great thing about Svelte is that it maintains the nice idiomatic relationship of HTML, CSS and JavaScript within its component. That means we can include <script> and <style> tags in our component too! 👍

<script>

   const word = "World";

</script>

<style>

    p {
	color: purple;
	font-family: 'Comic Sans MS', cursive;
    }

</style>

<p>Hello, { word }!</p>

This CSS is also "scoped", that means it will only affect the markup in this file, so if we import another component which contains a paragraph, its paragraph won't get those nice font styles.

// Our cool new nested component - NestedComponent.svelte

<p>Our nested component</p>

<script>

   // import our new component
   import NestedComponent from './NestedComponent.svelte';

   const word = "World";

</script>

<style>

    p {
	color: purple;
	font-family: 'Comic Sans MS', cursive;
    }

</style>

<p>Hello, { word }!</p>
<!-- The styles won't be applied to the 2nd paragraph -->
</NestedComponent>

As Svelte is a compiler, getting an app started from scratch can be a little confusing. So, let's try and set one up. First, make a project folder, and install Svelte.

mkdir svelte-project
cd svelte-project
mkdir src

npm init -y
npm install -D svelte

Svelte uses rollup.js as its default module bundler (it's possible to use webpack, etc), it compiles small pieces of code into something larger, like our Svelte application. We will go ahead and install it.

npm i -D rollup

Rollup needs a basic configuration file. In your project root folder, create rollup.config.js, and add the following.

export default {
	input: 'src/main.js',
	output: {
		file: 'public/build/bundle.js',
		format: 'esm',
		sourcemap: true
	}
};

'src/main.js' will be the entry point for our app, and the output will be located in 'public/build/bundle.js'. format: 'esm' means rollup will compile to ECMAScript Modules, meaning it will use import.

We also need to tell rollup what to do with .svelte files. To do that, we will install 2 plugins, and add them to our configuration. We will also install a plugin for our CSS.

npm i -D svelte rollup-plugin-svelte @rollup/plugin-node-resolve
npm i rollup-plugin-css-only

import resolve from '@rollup/plugin-node-resolve';
import svelte from 'rollup-plugin-svelte';
import css from 'rollup-plugin-css-only';

export default {
  input: "src/main.js",
  output: {
    file: "public/build/bundle.js",
    format: "esm",
    sourcemap: true,
  },
  plugins: [resolve(), svelte({}), css({ output: "bundle.css" })],
};

Our configuration is now finished, so let's make our first Svelte app. In your src folder, create an App.svelte component, and paste the following. It's the same code as our component from earlier.

<script>

   const word = "World";

</script>

<style>

    p {
	color: purple;
	font-family: 'Comic Sans MS', cursive;
    }

</style>

<p>Hello, { word }!</p>

We also need that main.js file we mentioned in the rollup configuration. It will also live in our src directory. This file instantiates our app. You can paste the following there. Really long, right? 😬

import App from './App.svelte';

new App({
	target: document.body
});

Next, we run rollup to see if everything is working okay, and take a look at our bundle. Rollup should create public/build directories which contain your bundle.js and bundle.css. You can take a look at those files in your text editor.

npx rollup -c

Lastly, we need to create an index.html file in our public directory to help load our bundle. You can add the following markup to that file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Svelte App</title>
    <link rel="stylesheet" href="/build/bundle.css">
	<script type="module" src='/build/bundle.js'></script>
</head>
<body>

</body>
</html>

To see our app on a local server, we need one more dependency. This is the last one. I promise.

npm i -D serve
npx serve public

You should see your Svelte app when you visit http://localhost:5000/ in your browser. That font really ties the app together.

You may be thinking, that's a lot to set up, but luckily for us, the nice people at Svelte have an offical app template which is available on github here. It contains lots of nice things like live reloading, and a built-in development server.

That's all for this blog. Thanks for sticking around so long. ☕