How to create and run your first Svelte Rollup Application?

In this post, we will learn how to run our first Svelte Rollup Application.

To make things understandable, we will create a small Svelte app from scratch and write a basic Rollup configuration to build and run the application.

1 – What is Svelte?

Svelte is a new front-end library. It is known for its blazing fast speed. Unlike other UI libraries such as React, Svelte is more of a compiler. While traditional frameworks like React or Vue do much of the work in the browser, Svelte shifts that work into the compile step.

When we write Svelte code, we need to have a build step that translates that code in standard HTML, CSS & Javascript. Basically, Svelte code is not directly executed by browsers. This makes it faster while also transferring less code to the browser.

2 – Setting up a new Svelte Project

To demo our Svelte Rollup application, we will create an extremely simple Svelte application. However, before that we have to setup our project.

First, we will create a new directory for our application files.

$ mkdir my-first-svelte-app

Next, we navigate into the directory and then initialize a new npm project.

$ cd my-first-svelte-app
$ npm init -y

This will generate a package.json file for our application. Now we can install the required packages. As a first step, we install svelte.

$ npm install svelte

At this point, we are ready to write some code for our demo application.

3 – Creating the Svelte App

By convention, we put all our code into the src directory. You can use any editor of your choice or the terminal to create the same. Inside the src directory, we create two files App.svelte and main.js.

The App.svelte file will contain our component code. See below:

<script>
    export let name;
</script>

<p>Hello {name}</p>

Here, we only have a paragraph that shows a hello message. The name within curly braces is a prop.

Next, we configure the main.js file as below:

import App from './App.svelte';

const app = new App({
    target: document.body,
    props: {
        name: 'Web Ninja'
    },
});

export default app;

Here, we create a new instance of our App. We also specify that we want to load the component in the document body. Lastly, we supply the name as part of props.

With this our Svelte application is ready. Now we need to check out how run the application.

4 – Installing Svelte Rollup Packages

Now is the time to add Rollup into the mix.

Rollup is basically a module bundler for Javascript applications. It takes our application code and bundles it into files that browsers can easily parse. In other words, Rollup converts our .svelte files into browser-understandable HTML, CSS and Javascript.

To get started with Rollup, we first need to install the required package.

$ npm install -D rollup

Please note that this is a development dependency.

Next, we also need to install two more Rollup development dependencies. See below:

npm install -D @rollup/plugin-node-resolve rollup-plugin-svelte

The @rollup/plugin-node-resolve helps rollup resolve third party plugins. The second dependency rollup-plugin-svelte is a third party plugin that helps Rollup understand how to handle Svelte applications.

As with rollup, both of these dependencies are also development only.

5 – Rollup Configuration File

Rollup needs a configuration file to understand what it needs to do.

We will start by creating a very simple rollup configuration file. It will simply bundle our Svelte application file into the public/build folder.

See below:

import svelte from "rollup-plugin-svelte";
import resolve from '@rollup/plugin-node-resolve';

export default {
    input: 'src/main.js',
    output: {
        file: 'public/build/bundle.js',
        format: 'iife',
        name: 'app',
    },
    plugins: [
        svelte({
            include: 'src/**/*.svelte',
        }),
        resolve({ browser: true }),
    ],
}

Let us understand what we are doing here.

• In line 1 & 2, we have the imports.
• In line 5, we specify the path to the input file. This is the main.js file.
• In line 6, we specify the output. Basically, this is destination of our built artifacts. We also specify the format as iife (immediately invoked function express). Along with this, we specify the name of the variable to which we assign the iife output value. In this case, we call it app.
• Lastly, in line 11 onward, we specify the plugin configuration. Basically, we specify where our .svelte files located. Also, we specify that we are building for the browser.

6 – Adding Rollup to NPM Scripts

The next step is to add Rollup to our NPM scripts so that we can build and run our application.

To run Rollup, we add a new script to our package.json file.

"scripts": {
    "dev": "rollup -c -w",
}

The -c flag specifies that we want Rollup to use a configuration file. By default, it checks for a file named rollup.config.js. We already created the file in previous section.

The -w flag instructs Rollup to watch our files for changes. In case we change something in our source code, Rollup automatically rebuilds the artifacts.

We can now run npm run dev to build our Svelte application. The built files will be placed inside /public/build folder.

7 – Serving the Content

Though we have successfully compiled our application, we still need a way to serve it. Therefore, we create an index.html file in the public folder.

<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>My First Svelte App</title>
        <script defer src="build/bundle.js"></script>
    </head>
    <body></body>
</html>

Important thing to note is the script tag where we specify the location to our new built bundle.js file.

To serve the application, we will install a simple web server using sirv-cli package.

$ npm install -D sirv-cli

And then, we add a script to run the application.

"scripts": {
    "dev": "rollup -c -w",
    "start": "sirv public"
},

We can now start our application by running the command npm run start. The application will be accessible on http://localhost:5000. You should see the Hello message in the browser window.

Conclusion

With this, we have successfully learnt how to run Svelte Rollup application. We created a new Svelte app from scratch and also wrote a basic Rollup configuration.

The code for this post is available on Github.

In the next post, we will look at how to configure Svelte Rollup Hot-Reload feature.

If you have any comments or queries, please feel free to mention in the comments section below.