DEV Community

Cover image for Getting started with Svelte
Benjamin Thorpe
Benjamin Thorpe

Posted on • Updated on

Getting started with Svelte

What is Svelte?

According to the official website;

"Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app."

In simple terms, Svelte is a tool for building JavaScript-based web applications like React, Angular or Vue.

Technically, Svelte acts as a compiler.

Enough of the bells and whistle, there are many articles about how good and powerful Svelte really is, let's get right into our first project.

Our first Svelte Project.

TLDR: Use the online REPL to learn without installing anything locally.

Requirements

  • Install
    • Node
    • Git
  • Basics of:
    • HTML
    • CSS
    • JavaScript
    • Navigating the Command Line
// download the official svelte template
npx degit sveltejs/template project-name

// enter into project
cd project-name

// install dependencies to run svelte
npm install

// run the development server
npm run dev
Enter fullscreen mode Exit fullscreen mode

Open browser and type localhost:5000, you should see something like this.
svelte-hello

Conclusion

Thanks for reading. Next up will be about the file structure in Svelte.

External Resources

Top comments (2)

Collapse
 
jonrandy profile image
Jon Randy ๐ŸŽ–๏ธ

A 'radical new approach' that the excellent riot.js was doing before Svelte existed! :P

Collapse
 
benjithorpe profile image
Benjamin Thorpe

:) at least they both did what they promised. :P