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

Total
0
Shares
Table of Contents Hide
  1. Code Example
  2. Live Demo

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

Sign Up for Our Newsletters

Get only the best articles delivered to your mail

You May Also Like