How to get started in svelte

Hey folks ! welcome back to second part of a very new series on Svelte (a compiler that generates minimal and highly optimised JavaScript code from our sources ).

Today we are going to set up our "Hello World" app for svelte .

Firstly ,we should have prerequisites to setup as mentioned in part 1 . now moving ahead .

Use the degit

Open your editor and type these commands in terminal where you want to setup the app.

      npm install -g degit
      npx degit sveltejs/template hello-world-project
      cd my-svelte-project

and then to start the app

npm install
npm run dev

Screenshot from 2021-09-21 22-39-53.png and its ready in few seconds

Use REPL( read–eval–print loop ) provided by svelte :

This willl be the easist way to learn svelte by having code snippet from the REPLs and download them into your local system and try to run them and play with that , steps are as ->

You can choose a list of examples to get started,tweak them until they outgrow and then download its zip file svelte-app.zip. uncompress it and run

cd /path/to/svelte-app
npm install
npm run dev

It will run the same REPL to your local and you can play with it.

Runs at localhost:3000 And its done with some small steps and very easy as well

src /App.svelte : Initialy this file will act as root node for whole app ,but we can chang it to some other by making few changes .
index.html : is the file where the svelte root file is finally served and merged into the body of the html component of the app , main.js send the components here.
public/build/ : a very important ad compact small in size , created after compilation of the whole src files.All the svelte and JS files are compiled to bundle.js and bundle.css. These bundles that are created and build are very light weighted. This is one of the major + point in using svelte
main.js: The starting point to our app. It just instantiates the App component and binds it to the body of our html page.
.gitignore: Tells git which files or folder to ignore from the project
rollup.config.js: Svelte uses rollup.js as a module bundler. This configuration file tells rollup how to compile and build your app. Lets look into App.svelte , what it contains

<script>
   //script part
</script>

<p.>
<!--  HTML elements goes here -->
</p>

<style>
    /* for CSS things */
</style>

So, we are done with our basics of setup and file structure ,we will look in more deep as we go through the series further .

We will take basics example to understand the concepts of svelte one by one.

In the next part we will discuss about the LOGICS in svelte and how to handle them Stay tuned

Hope you folks enjoyed and get something from here .

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on ,and if you want to add something please write into comments linkedin

Setting up for SVELTE

Series on Svelte : part 2

Thank you for reading, and let's connect!