Svelte Ride – Step By Step Guide To Your First Web App

Svelte is a JavaScript framework. It is free and open-source. As you may know JavaScript applications are fast, reduces server load and also provides rich interfaces, Svelte is another entity in the game. In this article, we will focus on some of the topics and create our first web application using Svelte.

Technical Level: Beginner.
Prerequisite: Basic command line Knowledge, Node.js installed.
Learn Svelte

Before we get straight into coding, let’s learn a little about Svelte. It was created by Rich Harris 3 years ago(at the time of writing of this article). It is written in TypeScript and licensed under MIT License. As of now, the latest stable version is 3.20.1.

Svelte applications do not include framework references. Instead, building a Svelte applications generates code to manipulate the DOM, which may give better client run-time performance. Svelte has its own compiler for converting app code into client-side JavaScript at build time.

Wikipedia

Let’s dive in then, shall we?

Preparing The Kitchen

We will copy a template provided by Svelte and start modifying it. Its not necessary to copy the template but as we are building an application in Svelte for the first time, I highly recommend so. You will easily get the hang of application directory structures and the files within. Follow the steps along,

  1. At first, please create a directory/folder for our Svelte application. Don’t wait for me, I already created mine named it learning-svelte.
  2. Now, open a command prompt/terminal in that directory and execute npx degit sveltejs/template.

Using this command will download a copy of the latest commit of the repository into your directory.

  1. After that, please execute npm install to install the required dependencies specified in the package.json file.
  2. And finally, execute npn run dev to start a development server. You will see a message on the terminal saying “Your application is ready…”.

Now, let’s open http://localhost:5000 in our browser to see the live application. You will see something like this,

Svelte default installation
Svelte default installation

As Svelte will run the development server on port 5000, make sure its not used by any other application. If you can’t stop the application using 5000, you can change Svelte’s default running port to something else. To do so, go to your project directory, open the package.json file and change start script like this, "start": "sirv public  -p 5555" where 5555 is a port of your choice.

Knowing The Ingredients

Now that we have a basic template of a Svelte application, let’s peek to see what we have in there. We will get to know more as we dig deep later.

Svelte Template in VS Code
Default directory structure

node_modules contains the packages needed for our application.

public directory contains the static files, for example the index.html. build for inside of the public directory contains the generated css and js from our svelte files.

src where we will put all the codes we write, i.e. all the svelte components or template parts.

package.json is place where we will specify all the dependencies, metadata etc.

README.md is supposed to contain information about our project.

rollup.config.js, as the name suggests, configuration file for rollup which is module bundler..gitignore specifies the files and directories to exclude when pushing commit to remote git branch. And the package-lock.json file is automatically generated whenever node_modules and package.json changes.

Personally I keep all my projects of a technology in a single workspace. For example, here I have created a workspace named “Svelte-Factory” where I will keep all of my Svelte projects. Similarly, I have workspace for React and other technologies. This helps keeping my projects organized.

Start Cooking

Now, the thing about Svelte, you can write it like html. If you have been coding in raw html, css, js then you will feel right at home. Let’s open App.svelte in a editor, I will be using Visual Studio Code throughout this tutorial. Our goal is to create a single page application that represents a person.

In a svelte file, we will write all of the JavaScript inside of the script tag, all the styles in css and html part inside of the main. For now, let’s just consider this as a rule, as you start coding in Svelte, you will get to know further. Let’s keep a narrow focus here.

As you can see here, a variable named ‘name‘ is exported inside of the script tag. So that we can use this variable somewhere else, maybe inside another file. In this case, App component is imported in main.js and using props value of the variable ‘name‘ is set.

Props is short from of ‘Properties’. Let’s say we have two components. In order to pass data between components, we export a variable of component A. Then we import component A into B and inside B we define that variable of A using props.

1. Creating Information Header

Now, we will add couple of more variables as we go and see how it becomes. Please try to code with me now, I will include a link of the source files down the article.

Hi, I am Lee
Front-end developer
based in Dhaka.
2. Add Image

Let’s add an image, a good personal website needs to have a image, for this tutorial I will use one of my photoshop art.

If the image source path definition seems new, “./something” means a directory named something on current directory.

3. Adding Description

Now, we will add a small description, perhaps dummy text. But you are suggested to put your short bio in here. So, the main block will look similar to this,

Application live view

You may have realized that its very similar to raw html, go ahead and add some more details of your choice. For the time being I will add another paragraph for my email.

4. Adding Font-Awesome Icons

We will add some social media icons and for that we are going to use Font-Awesome. If you have spent some time in web, you know that Font-Awesome is. It’s a cool library of fonts. To use it in our project, we are going to use svelte-awesome. But first, we need to install the package. So, execute npm install --save svelte-awesome in your application’s root directory.

Now, we will import svelte-awesome and the icons we want use in our App.svelte like this,

Icon names should be imported like this, using curly-braces as they are explicit imports.

Implicit import is usually default export which can be imported with any name. For example let’s say we have two component. We can import the component with any name if the component is exported as default. But explicit imports should be imported as they are exported(same name) in their mother component.

And add two icons, one for twitter and another for github. But you can add the ones you like, do not forget to import the proper icon. Icon name will usually be similar with font-awesome icon names.

Wait, let’s check how it looks now
Personal website in svelte

Serving The Dish

Okay, let’s stop the design here, let’s look into some other things. Open the index.html from public directory. Change things as needed. For example you may want to change the title, add some metadata etc. I will leave this upto you. But do not remove references to bundle.css, bundle.js. When you build your svelte development for production, bundle css and js will contain the generated css and js from your Svelte files. And there might be another reference to global.css which contains some css rules, these rules are default. If you haven’t noticed, in our App.svelte we never change anchor’s text decoration but didn’t have any underline, whereas, anchors usually have one. That’s because of the rules already defined in global.css. You can choose to keep or change, you know better.

We were working on svelte development server this whole time, now we will build our application for production, which will be a static website. To build your app, execute npm run build which will create css and js bundle inside of your public/build directory. But I would like to recommend defining your application homepage, the url it will be available on, before building the app. For example, mine will be,

Congrats! Now, upload your static files to your web server and you are done!

Read svelte documentation now to learn it deeply. I hope I was able to give you a glance of it. I kept things very limited and narrowed, because starting should be easy. I am so excited to see what amazing projects you do, reach me on twitter @iamlizu. Check the github repo of this sample project.

Happy Coding!
Recommended: GitHub Tutorial – Learn GitHub Basics GitHub is one of the most popular platform for software development version control — used by 31 Million developers worldwide. If you are working on a private or open source project GitHub always comes handy to keep tracks of your work.