Svelte | Introduction and Installation

Svelte is the new methodology for creating web apps. It can be used in a small part of a code or in an entire single page application. It is a compiler not a framework, which is faster than other JavaScript libraries like ReactJS, AngularJS, VueJS. It is used to create reactive web apps. If any change occurs in the data that change will reflect on the page instantly. It is also used in rapid application development (RAD) means quickly produce minimally coded software application. It is used in Web Optimization. But it does not use virtual DOM which makes it different from others. It is free and open source written by Rich Harris. Svelte Compiles your Code for production at execution time into vanilla JavaScript bundle. If you deploy your application over the internet then you don’t need to deploy Svelte like we did other library. That’s why it results in a fast execution.

Prerequisite: Before installing or start working on Svelte, we have to make sure few things are available in our sustem.

Installation of Svelte: Now we are ready to install the Svelte.

  • Step 1: Open the command prompt or terminal and install a package named degit, which allows us to easily clone the latest commit from a github repository.
    npm install -g degit

  • Step 2: Now create a directory on the desktop and run the below command. The degit go to the repository(sveltejs) find the template and download it locally for us in the project named myproject.
    degit sveltejs/template myproject

  • Step 3: The project is created, now open this in text editor. In the src folder we have main.js file which is used to execute our svelte app The App.svelte is the root component of our application and the package.json file contains all the dependencies which needs to be installed.
  • Step 4: Now install all the dependencies make sure you are inside of the “myproject” directory.
    npm install
  • Step 5: Now create a local development server to run our application.
    npm run dev

  • Step 6: Now follow the above link and application will open in the browser.

full-stack-img

My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.