Getting Started with Svelte Framework for Front End Development
Tags: svelte, webdev, programming, javascript
Published: 2021-01-28 21:36:30

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

Svelte is an up and coming front end framework for developing front end web apps.

It’s simple to use and lets us create results fast.

In this article, we’ll look at how to create our first app with Svelte.

Creating the Project
====================

To write our first app, we can create our Svelte project by downloading thw `svelte-app.zip` from [https://svelte.dev/blog/the-easiest-way-to-get-started](https://svelte.dev/blog/the-easiest-way-to-get-started).

Then we extract it and run `npm install` to install the packages.

Alternatively, we can run:

```
npx degit sveltejs/template my-svelte-project  
cd my-svelte-project  
npm install  
npm run dev
```

to create our Svelte project. We can substitute `my-svelte-project` with the name of our choice.

Then we go to [http://localhost:5000/](http://localhost:5000/).

In `index.js` , we should have:

```
import App from "./App.svelte";const app = new App({  
  target: document.body  
});export default app;
```

as the entry point for our app.

It’ll display our app’s content in the `body` tag of our app.

Writing our First App
=====================

Now that we have our app running, we can start writing some code. For instance,

We can write the following:

`App.svelte` :

```
<script>  
  let name = "Jane";  
</script><main>  
  Hello {name}  
</main>
```

to create our first app. It has a `name` variable, which is set to `'Jane'` , and we referenced it in our template.

Therefore, we should get `Hello Jane` displayed on the screen.

The code in the `script` tag is referenced in the `main` markup.

We can add styling to the `style` tag. For instance, we can write:

`App.svelte` :

```
<script>  
  let name = "Jane";  
</script><style>  
  p {  
    font-weight: bold;  
  }  
</style><main>  
  <p>Hello {name}</p>  
</main>
```

Then we make our text bold.

We can also call JavaScript inside the curly braces.

For instance, we can write:

`App.svelte` :

```
<script>  
  let name = "Jane";  
</script><main>  
  <p>Hello {name.toUpperCase()}</p>  
</main>
```

Then we see `Hello JANE` displayed on the screen.

Dynamic Attributes
==================

We can add dynamic HTML attribute values to our app.

For instance, we can write the following to add an image with the URL set as a value of a variable:

`App.svelte` :

```
<script>  
  let src =  
    "https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF\_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=755&q=80";  
</script><main>  
  <img src={src} alt='' >  
</main>
```

In the code above, we set our image’s URL as the value of variable `src` .

Then we pass `src` as the value of `src` .

Shorthand
---------

If we have something like `src={src}` , we can shrink it down to `{src}` .

We can rewrite the example above as follows:

```
<script>  
  let src =  
    "https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF\_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=755&q=80";  
</script><main>  
  <img {src} alt='' >  
</main>
```

Adding Components
=================

We can add components to our app to divide our app’s code into smaller pieces.

To do that, we import the component and then referencing it in the markup as follows:

`Button.svelte` :

```
<script>  
</script><button>  
  Button  
</button>
```

`App.svelte` ;

```
<script>  
  import Button from "./Button.svelte";  
</script><main>  
  <Button />  
</main>
```

Then we get a button on the screen via the `Button.svelte` component.

Displaying Raw HTML
===================

We can display Raw HTML in a component by writing the following code:

`App.svelte` :

```
<script>  
  let string = "<b>hello</b>";  
</script>

<main>  
  <p>{@html string}</p>  
</main>
```

The `@html` tag indicates that we want to display the content as raw HTML. Therefore, we’ll see a bold `hello` on the screen.

Handling Events
===============

To make our app useful, it has to be able to handle user events.

For instance, we can use the `on:click` attribute to handle click events of a button as follows:

`App.svelte` :

```
<script>  
  let count = 0;  
  const handleClick = () => {  
    count += 1;  
  };  
</script>

<main>  
  <button on:click={handleClick}>  
    Increment  
  </button>  
  <p>{count}</p>  
</main>
```

In the code above, we have the `on:click` attribute set to the `handleClick` function we have in the `script` tag.

Then when we click the button, it’ll be called, `count` will be incremented. Then the latest value of `count` is displayed.

The DOM is automatically updated with the values in `script` are updated so we don’t have to worry about that.

We can also add variables that are derived from other ones in our code.

For instance, we can add a new variable that has the value which is double the `count` as follows:

```
<script>  
  let count = 0;  
  $: doubleCount = count * 2; 
  const handleClick = () => {  
    count += 1;  
  };  
</script>

<main>  
  <button on:click={handleClick}>  
    Increment  
  </button>  
  <p>{count} {doubleCount}</p>  
</main>
```

The code above has:

```
$: doubleCount = count * 2;
```

which is a variable computed from `count` . It tells Svelte to return the code whenever the referenced value change.

Conclusion
==========

Getting started with Svelte is simple. It uses the same component-based architecture as other major frameworks like React, Angular, and Vue.

Each component has a logic part and a markup part. Events can be handled by setting event handlers on elements.

We can have variables that are derived from others by adding labels to them with the `$` .