Starting from scratch

You can build apps inside the Svelte REPL, but at some point you'll want to develop in your local environment.

The easiest way is to use degit, a git-based scaffolding tool...

mkdir my-project
cd my-project
npx degit sveltejs/template

...but it's helpful to understand how things work under the hood, so we're going to create a project from nothing.

Create a new folder and add a src folder inside:

mkdir my-project
cd my-project

mkdir src

Installing Rollup

As of June 2020, the default template uses Rollup as its module bundler, though there is also an official webpack loader and a plethora of third party integrations for Parcel, Snowpack, Vite and everything else you might want to use. Install Rollup...

npm i -D rollup

...and create a rollup.config.js file:

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

Now we need to create that src/main.js entry point. We'll also create a test module to import, so you can see what Rollup does:

echo "import hello from './hello.js';

hello();" > src/main.js

echo "export default () => {
	console.log('hello!');
}" > src/hello.js

Run Rollup with the config file...

npx rollup -c

...and look at the public/build/bundle.js file:

var hello = () => {
	console.log('hello!');
};

hello();
//# sourceMappingURL=bundle.js.map

Now we just need to add a public/index.html file to load the bundle...

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1'>

	<title>My app</title>

	<script type="module" src='/build/bundle.js'></script>
</head>
<body>
	Open the console!
</body>
</html>

...and serve it on localhost:5000:

npm i -D serve
npx serve public

Adding plugins

That's cool, but not very Sveltey. We need to teach Rollup what to do when it encounters a Svelte file. We do that with plugins. Specifically, in addition to Svelte itself, we need two:

Install those...

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

...and add them to your config:

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

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

Now we can add a Svelte component. Create App.svelte...

<script>
	export let name;
</script>

<h1>Hello {name}!</h1>

<style>
	h1 {
		font-family: 'Comic Sans MS';
	}
</style>

...and instantiate it from main.js:

import App from './App.svelte';

new App({
	target: document.body,
	props: {
		name: 'world'
	}
});

The last thing we need to do is add a link to the new bundle.css file in index.html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1'>

	<title>My app</title>

	<link rel="stylesheet" href="/build/bundle.css">
	<script type="module" src='/build/bundle.js'></script>
</head>
<body>
</body>
</html>

Now when we run Rollup, it will include your compiled Svelte component in the JavaScript bundle. Try running npx serve again.

The official project template is slightly fancier — it has livereload and a development server built in, for example — but that's basically all there is to it.

Next: Building a game