Meteor
Posted By Sebastian

Meteor & Svelte – Building Full-Stack Reactive Web Applications – 02: Working With Svelte In Meteor


Subscribe On YouTube

Episodes

In episode 1 of the Meteor & Svelte series you’ve learnt how to install Meteor on your development system and create a first meteor project.

In this episode we’re going to install Svelte in the Meteor project and go through a first simple Meteor/Svelte sample application.

Installing Svelte In Meteor

In order to be able to use Svelte within you Meteor project we need to install further dependencies. First of all we’re we need to add the NPM package svelte by using the following command:

$ meteor npm install --save svelte

Furthermore we need to make sure to also add two more Meteor packages. This is done by using the meteor add command:

$ meteor add svelte:compiler rdb:svelte-meteor-data

Next let’s remove the blaze-html-templates Meteor package as we’ll not be using the Blaze templating system in our application:

$ meteor remove blaze-html-templates

To make sure that HTML files are processes add the static-html Meteor package. It simply turns <head> and <body> fragments found in .html files into raw HTML that will be served from the Meteor web server:

$ meteor add static-html

Now the Meteor project is prepared and we’re ready to make use of Svelte for implementing the client part of our project.

Replace HTML code in client/main.html

In the following steps we’ll start with a first and simple Svelte example. First of all we’re replacing the code in client/main.html with what you can see in the following listing:

<head>
  <title>Issue List</title>
</head>

<body>
  <div id="app"></div>
</body>

The HTML code which is inserted consists of a head and a body section. Within the body section a div element is included and the string app is assigned to the id attribute of this element. Later on we’ll use this div element to insert the result of the Svelte application.

Replace JavaScript code in client/main.js

Next, let’s also replace the JavaScript code in main.js as well with what you can copy from the following listing:

import { Meteor } from 'meteor/meteor';
import App from '../imports/ui/App.svelte';

Meteor.startup(() => {
  new App({
    target: document.getElementById('app')
  });
});

This is the JavaScript entry point of the client application and here we’re using this entry point to call Meteor.startup. The function which is passed to the call of the startup method will run as soon as the DOM is ready.

We’re using this function to create a instance of App (which will be the main Svelte component we’ll be implementing in the next step). The App constructor is taking an object as a parameter which contains the target property. This property is used to specify the target for the App component’s output (the HTML element which should be used to insert the output). By using the document.getElementById method we’re retrieving a reference to the div element with id app and assigning this reference to the target property.

Implementing App Component

We’ve already made use of App component, so now it’s time to actually implement this Svelte component in imports/ui/App.svelte:

<script>
    import Issue from './Issue.svelte';

    function getIssues() {
        return [
            { 
                title: 'First Issue Title', 
                description: 'First Issue Description', 
                dueDate: '2021-01-01', 
                priority: 'Low'
            },
            {
                title: 'Second Issue Title', 
                description: 'Second Issue Description', 
                dueDate: '2021-01-01', 
                priority: 'Medium'
            },
            {
                title: 'Third Issue Title', 
                description: 'Third Issue Description', 
                dueDate: '2021-01-03', 
                priority: 'High'
            }
        ];
    }
</script>

<div>
    <header>
        <h1>Issues:</h1>
    </header>
    <ul>
        {#each getIssues() as issue}
            <Issue 
                issue={issue} />
        {/each}
    </ul>
</div>

Components are the main building blocks of Svelte applications. Svelte components can consists of three areas:

  • script
  • style
  • markup

In the App component implementation we’ve only used a script and a markup section so far. We’ve used the script section to add two things:

  • An import statement for Issue component (a second Svelte component which we’ll implement in the next step)
  • The getIssues function which is returning an array of issue objects

Inside the markup code we’re outputting a list of issues. Therefore we’re using a the block

{#each getIssues() as issue}
        ...
{/each}

to iterate through the list of issues which is returned from function getIssues.

For outputting every single issue object we’re making use of Issue component in the following way:

<Issue issue={issue} />

We’re using the issue prop here to pass over the current issue object to Issue component. Therewith Issue component is able to access data of the current issue object and can generate the corresponding output:

Implementing Issue Component

In the last step we need to add the implementation for Issue component as well in imports/ui/Issue.svelte:

<script>
    export let issue;
</script>

<li>{issue.title} - {issue.description}</li>

As you can see this implementation of a Svelte component is a very simple one:

  • Within the script section the issue property is defined, so that the issue object can be passed into that component.
  • The markup code is used to access the title and description information and include the corresponding values in the output.

Finally start the Meteor web server again:

$ meteor

The final result which you should see in the browser when accessing localhost:3000 should look like what you can see in the following screenshot:

10.png

Advertisement: Svelte.js - The Complete Guide

Build high-performance web applications with Svelte.js – a lightweight JavaScript compiler:

Svelte.js – The Complete Guide*

  • Svelte.js from scratch, with zero knowledge assumed
  • All the theory and practical applications of Svelte
  • Core concepts and advanced techniques to build Svelte applications

Go To Course*

* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!


Using and writing about best practices and latest technologies in web design & development is my passion.