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

Tagged in:

Comments

About the Author

akamit

I am Akash Mittal, an overall computer scientist. If you want to guest post, need help in your projects, want to advertise, Feel free to contact me at [email protected]

View All Articles