Technical Level: Beginner.
Prerequisite: Basic command line Knowledge, Node.js installed.
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.
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,
- At first, please create a directory/folder for our Svelte application. Don’t wait for me, I already created mine named it learning-svelte.
- 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.
- After that, please execute
npm installto install the required dependencies specified in the package.json file.
- And finally, execute
npn run devto 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,
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.
node_modules contains the packages needed for our application.
public directory contains the static files, for example the
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
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.
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.
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.
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,
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
Serving The Dish
Okay, let’s stop the design here, let’s look into some other things. Open the
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.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.