How to configure Svelte Rollup Server Hot Reload?

In this post, we will learn how to configure Svelte Rollup Server Hot Reload. Also, we will look at how start our server after the build process completes.

In the previous post, we had setup a Svelte Rollup Application from scratch. We will be adding on to that in this post so it would be better if you go through that before continuing.

1 – Rollup Dev Server Start

In the previous post, we started our application using npm run dev followed by npm run start. Basically, we had the below scripts configured in our package.json file.

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

It is not optimal to run both the commands every time we make a change in the code and wish to see our application running. However, we can use Rollup plugins to create our own serve plugin.

See below rollup.config.js file with the necessary setup.

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

function serve() {
    // Keep a reference to a spawned server process
    let server;
  
    function toExit() {
      // Kill the server if it exists
      if (server) server.kill(0);
    }
  
    return {
      writeBundle() {
        if (server) return;
        // Spawn a child server process
        server = require('child_process').spawn(
          'npm',
          ['run', 'start', '--', '--dev'],
          {
            stdio: ['ignore', 'inherit', 'inherit'],
            shell: true,
          }
        );
  
        // Kill the server on process termination or exit
        process.on('SIGTERM', toExit);
        process.on('exit', toExit);
      },
    };
  }

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

Basically, here we create a custom serve() plugin. It exports an object which has the key writeBundle(). The writeBundle() is actually a function. Basically, inside the function, we spawn a child node process and start the server.

Lastly, we call the function serve() in the plugins section of our configuration.

If we execute npm run dev now, we will see that the sirv server automatically starts. We can simply navigate to http://localhost:5000 to see our application in action.

2 – Svelte Rollup Server Hot Reload

Hot reloading is another feature where a fresh build and server restart would also refresh the browser. This will load our new changes automatically. This is a neat feature where we are doing development and wish to quickly see the impact of our changes.

To do so, we need to install an additional package as below:

$ npm install -D rollup-plugin-livereload

Now, we have to add the hot reloading configuration in the configuration file. See below:

import livereload from 'rollup-plugin-livereload';

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

In the livereload() function, we specify the folder which rollup should watch for live reloading. In our case, it is the public folder. Do not forget the import statement at the top of the file.

If we start our application now, we will notice that Rollup will refresh the browser whenever we make changes to the Svelte files.

3 – Conclusion

With this, we have successfully configured Svelte Rollup Server Hot Reload functionality.

The code for the same is available in Github.

In the next post, we will do a step-by-step walkthrough of a Svelte application.

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