Building custom plugins for Vite

I recently started building an Open Source project that is powered by Vite ⚡️ and I am amazed about the ecosystem of plugins it has. The Vite itself is a great tool that is changing how currently the modern web development looks and feels like. When I first tried it after working with Webpack (and 50-60 seconds project reload time) I immediately felt in love with it.

In this article, I will guide you through the process of building a simple custom plugin that will be responsible for setting certain cache-control headers. In this article, I won't be publishing it in npm nor creating a separate repostiory for it, while instead I will be building it locally in vite.config.ts.

What is Vite?

If you are not yet familiar with Vite, it is Next Generation Frontend Tooling that's really fast.

It is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).

A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

Vite is opinionated and comes with sensible defaults out of the box, but is also highly extensible via its Plugin API and JavaScript API with full typing support.

What is great about Vite is that it works with any modern frontend framework like Vue, React, Svelte, Solid and more.

Vite Plugins?

When building a project with Vite, you can use plugins from it ecosystem that is really huge. You can check out the Awesome Vite list here for reference. In my personal project I am using like 10 plugins already :D

The plugins allow for several different functionality like PWA, SSG, SSR, I18N, and many more.

Custom plugin code

As I mentioned in the beginning of the article, I will show you some code of the local plugin that I have recently created for my project that I decided could be quite useful to you as well.

The first thing you need to add a custom plugin to your Vite project is the vite.config.ts file. The configuration contains the plugins array that will accept a plugin object with certain configuration:

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    // your plugins
  ]
})

In here, you will be registering your plugins like PWA, Vue, etc.

Right now, I will paste some code and explain it step by step:

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      name: 'vite-plugin-cache-control',
      configureServer(server: ViteDevServer) {
        return () => {
          server.middlewares.use(async (request, response, next) => {
            response.setHeader("Cache-Control", 'max-age=604800, stale-while-revalidate=86400');
          });
        };
      }
    }
  ],
})

1. name - this is an unique name for your plugin. Nothing more to say basically, just make it unique ;)
2. The logic of the plugin, in my case configureServer method. I needed to set certain header on the server response so I have added a new middleware that sets this header accordingly. Of course, this is not the full code of the plugin. I decided to skip things that are not necessary for this article.

And that's it. This will make your Vite app to send this header with coresponding value to the browser.

Summary

Well done! You have just created a custom local plugin for your Vite project. Make sure to check out the documentation of Vite on how to build plugins and what other plugins are available :)