Directory and files structure of Svelte projects

In this short article we will learn about the files and directory structure of Svelte projects. This is the structure of project that we get when we install Svelte. If you don’t know how to install svelte, then check this article – Install Svelte and Create Project.

There are 4 directories – node_modules, public, scripts, and src. Apart from them, we are interested in 2 files – package.json and rollup.config.js. Let’s understand the purpose of each of them –

package.json

package.json is the primary file of all nodejs projects. Since Svelte is also a framework based on node, so the same rule applies here too. This file lists the properties of your project like name and version. All the packages, plugins, modules etc., which you have installed in your project, are listed in this file. We call them dependencies. For example, here we have different rollup plugins and svelte in devDependencies. When you run npm install from your project directory, all these dependencies gets installed inside node_modules folder.

{
  "name": "svelte-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0"
  }
}

rollup.config.js

Another interesting file is rollup.config.js. Although you don’t need to dig deep into this but a basic idea is helpful. This file is responsible for server operations like starting or stopping it. It holds settings for rollup plugins which are the building blocks of Svelte system. For example, suppose you install a css framework library like bootstrap into your project then this file indicates that all the css should be placed in a single file called bundle.css.

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only';

const production = !process.env.ROLLUP_WATCH;

function serve() {
	let server;

	function toExit() {
		if (server) server.kill(0);
	}

	return {
		writeBundle() {
			if (server) return;
			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
				stdio: ['ignore', 'inherit', 'inherit'],
				shell: true
			});

			process.on('SIGTERM', toExit);
			process.on('exit', toExit);
		}
	};
}

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/build/bundle.js'
	},
	plugins: [
		svelte({
			compilerOptions: {
				// enable run-time checks when not in production
				dev: !production
			}
		}),
		// we'll extract any component CSS out into
		// a separate file - better for performance
		css({ output: 'bundle.css' }),

		// If you have external dependencies installed from
		// npm, you'll most likely need these plugins. In
		// some cases you'll need additional configuration -
		// consult the documentation for details:
		// https://github.com/rollup/plugins/tree/master/packages/commonjs
		resolve({
			browser: true,
			dedupe: ['svelte']
		}),
		commonjs(),

		// In dev mode, call `npm run start` once
		// the bundle has been generated
		!production && serve(),

		// Watch the `public` directory and refresh the
		// browser on changes when not in production
		!production && livereload('public'),

		// If we're building for production (npm run build
		// instead of npm run dev), minify
		production && terser()
	],
	watch: {
		clearScreen: false
	}
};

node_modules

All the installed packages, modules and plugins are stored in this directory.

public folder

This folder holds the production ready files. So, if your project has images, videos, other multimedia, svg etc. then they all will be stored in this folder. When you run npm run build, Svelte will compile your files, optimize them and store in build folder within public folder. This build folder can be deployed to server.

It contains 3 files – favicon.png, index.html, global.css.

favicon.png

As you might know, favicon is the small icon image which gets displayed in the browser’s tab along with page titles. This is the brand logo of your organization or project. You can replace it with your own png image but keep the file name same.

global.css

If you have some css which you want to apply throughout your application, then this is the place to list that. The css listed in Svelte files are bound within the scope of files only. So, styles in one file doesn’t apply in another file. That’s why the global.css is provided.

By default, Svelte fill this file with the below css –

html, body {
	position: relative;
	width: 100%;
	height: 100%;
}

body {
	color: #333;
	margin: 0;
	padding: 8px;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

a {
	color: rgb(0,100,200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(0,80,160);
}

label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 2px;
}

input:disabled {
	color: #ccc;
}

button {
	color: #333;
	background-color: #f4f4f4;
	outline: none;
}

button:disabled {
	color: #999;
}

button:not(:disabled):active {
	background-color: #ddd;
}

button:focus {
	border-color: #666;
}

index.html

The file which gets loaded on browsers is index.html. Like any html file, it had head, body, title, meta, stylesheet, javascript etc. If you want to add some script or css from cdn then do it in this file. The content is similar to this –

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

	<title>Svelte app</title>

	<link rel='icon' type='image/png' href='/favicon.png'>
	<link rel='stylesheet' href='/global.css'>
	<link rel='stylesheet' href='/build/bundle.css'>

	<script defer src='/build/bundle.js'></script>
</head>

<body>
</body>
</html>

You can see that favicon, global.css, bundle.css and bundle.js are listed in it. bundle.css is the file which holds all the css of the project except the ones we put in global.css. bundle.js is the compiled file of whole js in the project.

scripts folder

This is an extra folder where you can put js scripts with special purpose like web sockets, background running files etc.

src folder

All the development files goes into this. You can create more folders to structure your project. In a new project we get 2 files – main.js and App.svelte.

main.js

If you look into rollup.config.js, you will find a line – input: 'src/main.js'. This indicates that the javascript must start from this file. So, the content of main.js decides the flow of the application.

import App from './App.svelte';

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

export default app;

According to the above code, whatever is rendered by our whole svelte app that will be placed inside body tag of index.html.

App.svelte

All the svelte files have this format –

<script>
  // Place all javascript here
</script>

// Html of the page goes here

<style>
// CSS of this page goes here
</style>

    Tweet this to help others