How to start coding in Svelte? Clean project & write first code

When we install Svelte in a fresh project, we get few files auto filled with demo data. We need to erase this in order to start writing code for our project.

src/main.js

In this file, we don’t need to pass any prop to App.svelte component. So, we can delete that. Our main.js should look like this –

import App from './App.svelte';

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

export default app;

src/App.svelte

Delete everything from this file. We will start with a fresh empty file.

public/global.css

We do not want any global css because we will install tailwindcss. So delete everything from this file too.

public/index.html

In this file change the title with the title of your project.

Code Example

Let’s start writing our first code. open App.svelte file and write the below code –

<style>
  main {
    font-family: sans-serif;
    text-align: center;
  }
</style>

<main>
  <h1>Tony Stark is Ironman</h1>
</main>

In this file we have included style and html. Similarly, you can include script also. We will discuss in future articles.

    Tweet this to help others

Live Demo