In this post, we will do a step-by-step walkthrough of our first Svelte Application. In essence, we will be understanding the overall structure of a Svelte application.
If you wish to follow along, you can first set up a Svelte Rollup application so that you have a development project ready to work with.
1 – A Svelte Component
In Svelte, we can organize our application into components.
Let’s look at a simple component as below:
App.svelte<script>
export let name;
</script>
<p>Welcome to the {name} Library</p>
As you can see, a component can have a script section and a normal HTML markup section. It can also have its own CSS style section but more on that later. Technically, all three sections are optional.
The script section contains the Javascript code that runs when we create an instance of this component. In the above snippet, we only have one statement within the script tags.
export let name;The export keyword marks the variable as a prop of this component. In other words, it is accessible to the consumers of this component. Think of it as an interface to our component.
We can also specify an initial default value for a prop. The default value is used when the consumer does not specify the prop on the component. In other words, the value is undefined.
The markup section contains normal HTML code. See below:
<p>Welcome to the {name} Library</p>However, notice the curly braces around the name. Basically, the curly braces specify that the value of the name will come from the prop name.
2 – The Main File
At this point, you might be wondering how our component App will be rendered. Also, how will it receive the prop values?
This will be taken care of in the main.js file. See below code:
main.jsimport App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'Fantasy'
},
});
export default app;
As you can see, we first import the App component from the App.svelte file.
Next, we instantiate the component using the new keyword. While instantiating, we specify the target for the component. In this case, we want the App component to be rendered in the body of our HTML.
Also, we pass the props object. Notice that we use the same property name as the one inside the component. In the end, we export the App object.
3 – The Index HTML
There is another file we need to create in order to render our application. That file is the index.html. And we create the file within the public folder.
See below:
index.html<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My First Svelte App</title>
<script defer src="https://dzone.com/articles/build/bundle.js"></script>
</head>
<body></body>
</html>
If you notice above, the body tags have no content. At the time of serving the application, the body section will be rendered with the App component as we specified in the main.js file.
The script tag points to the location of the bundle.js file. This is nothing but the compiled javascript file of our Svelte application. The browser cannot directly understand Svelte code. This is the reason we compile our Svelte code into browser-understandable javascript. You can read about it in the previous post.
Conclusion
With this, we have successfully done a step-by-step walkthrough of our first Svelte application. This post basically helps us attain a good understanding of the overall structure of a typical Svelte application.
In the next post, we will look at Svelte Reactive Variables.
You can find the code for this on Github.
In case of any queries or comments, please write in the comments section below.
