Learn to Code via Tutorials on Repl.it!

← Back to all posts
Svelte Web Framework Tutorial #1 - Setup, what Svelte is and why you should use it.
h
xfinnbar (149)

Requirements

For you to be able to follow along with this guide, you'll need to understand:

  • HTML
  • HTTP
  • The difference between the front end and the back end and what they do
  • Basic JavaScript
  • Preferably some CSS

What is Svelte?

Svelte is a web framework (toolset) for creating complex UI, reusable components (parts of the page) and much more.
Sound familiar?
You must have been using React.js (I know React fanboys, it's a library not a framework, but it serves the same purpose as a framework), Razor, ASP. NET, Jinja, Angular 🤮, Vue.js or another similar framework.

Why should I use a web framework?

Web frameworks provide more maintainable code and some useful utilities. Let's say you have a navigation bar. You want to add a new link to it. What do you do? Well, without a framework, you'd go through every page on your website and copy paste it. With a framework, you can edit it once in it's own file and the changes will be automagically reflected in every page on your website.
Web frameworks also provide lots of useful tools, such as reactive state (syncing JS variables to the page) or in the case of Svelte, transitions.

Why should I use a front-end (browser-side) framework, like Svelte?

There are two types of frameworks: Back-end and front-end. The biggest difference between the two is that one of them runs on the server (back-end) and one of them runs in the browser* (front-end).

There are advantages and disadvantages to each:

Front-end frameworks are good for:

  • Smooth user experience
  • Fast navigation
  • Mobile app-like feeling

Back-end frameworks are good for:

  • Search engine optimization (Google will love you)
  • Compatibility with old browsers
  • Compatibility with folks who have disabled JavaScript for privacy
  • People with bad internet connections

*Unless they are rendered using SSR

Why should I use Svelte?

Svelte is the framework of the future. A few of the most important reasons are:

  • It's easy to use in comparison to other frameworks
  • It has very small bundle sizes (Svelte code will be smaller and faster to download than other frameworks' code). This helps people with slow internet a lot.
  • Its syntax is really clean

What is Routify?

Routify is a router for Svelte. Routers add support for multiple pages to frameworks, because most don't support routing out of the box, Svelte included.

How does Svelte Work?

Svelte will take your code an run it through a compiler, which is a special program that will turn your Svelte code into plain HTML, CSS and JavaScript. Then, you can either serve this on a backend server, such as Flask or Express, or you can run it via a bash repl.

Getting set up

This guide aims to be compatible with both replit and your own local system, so I've split this bit up into two.

Replit exclusive steps:

  • Create a bash repl (You can also use a Python or Node.js repl if you want to integrate it with your backend, but that is beyond the scope of this tutorial.)
  • Delete main.sh

Local exclusive steps:

  1. Install Node.js from https://nodejs.org.
  2. Run node -v to check that it is installed correctly. If there are no errors, you have successfully set up Node.
  3. Create a folder and open it in your text editor of choice. I recommend Visual Studio Code with the Svelte extension.

  1. In the shell, enter npx @roxi/routify init. This will create a new Routify project for you.
    1.5 (Edit). If you are on replit, open the file .nolluprc.js and replace the contents with this:
module.exports = {
  hot: true,
  contentBase: 'assets',
  publicPath: 'build',
  historyApiFallback: '__app.html',
  port: 5000,
  host: '0.0.0.0'
}

Next, create a file called .replit and inside it enter:
run="npm run dev"
2. In the shell, enter npm run dev to start the development server. This will make the web preview window appear, and you should see some stuff on there. Feel free to explore the example site. Notice how smooth the page feels. That's not because it's a fast web server, it's because of Routify's client-side routing.

Sorry! That's all I've got time to write today.

I'll be continuing this series of tutorials, so comment and I'll mention you to give you a notification when the next tutorial comes out. Thank you so much for reading this! ||Please upvote im desperate for cycles||

Comments
hotnewtop
xfinnbar (149)

@DynamicSquid If you were not seeing the preview window, do step 1.5.