Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?

RiotJS + ViteJS tutorial – DEV Community


RiotJS is getting common however nonetheless missing visibility in comparison with mastodons initiatives like Vue, React, and Angular.

Nevertheless, Riot is my first selection when making a front-end, right here is why:

  • Minimal studying curve, Small API, Near HTML/JS requirements, no magic methods, it is accessible to everybody
  • Performant and predictable
  • “Every part you wished native the net elements API regarded like” talked about on their web site, and I do approve!
  • Tiny construct when gzipped (in comparison with different front-ends)
  • Good documentation

The event tooling is sort of broad, and one in every of my favourites is Vite. Nevertheless, I am unable to discover any documentation or tutorial to run Riot with Vite! That is why I wrote this text. Let’s repair that collectively.

This tutorial will undergo all of the steps to create a counter; the ultimate end result:

If you wish to have a look at the ultimate code, the GitHub repository: https://github.com/steevepay/riotjs-vite-setup

Construct and run Riot with Vite

Init and set up packages

Create a brand new listing

mkdir riot-vite-setup && cd riot-vite-setup
Enter fullscreen mode

Exit fullscreen mode

Init the node mission

npm init
Enter fullscreen mode

Exit fullscreen mode

Now it’s important to set up the next npm packages:

npm set up --save-dev riot vite 
Enter fullscreen mode

Exit fullscreen mode

Nothing particular, however right here is a very powerful:

npm set up --save-dev rollup rollup-plugin-riot 
Enter fullscreen mode

Exit fullscreen mode


  • Rollup: ViteJS makes use of Rollup beneath the hood as its default bundler for JavaScript modules.
  • Rollup-plugin-riot: It’s a plugin that compiles Riot information inside rollup processes. With out it, Riot cannot be compiled and utilized by Vite.

Lastly, create a Vite configuration file, vite.conf.js:

import { defineConfig } from 'vite'
import riot from 'rollup-plugin-riot'

export default defineConfig({
  root       : course of.cwd() + '/consumer',
  plugins    : [riot()],
  construct: { 
    minify       : 'esbuild', /** https://vitejs.dev/config/build-options.html#build-minify */
    goal       : 'esnext' /** https://vitejs.dev/config/build-options.html#build-target */
Enter fullscreen mode

Exit fullscreen mode

Possibility particulars:

  • root: defines the mission root listing (the place index.html is positioned). In our case, it’s positioned in consumer.
  • goal: Browser compatibility goal for the ultimate bundle.
  • minify: Minify the ultimate bundle, Esbuild is 20 ~ 40x sooner than Terser and only one ~ 2% worse compression.
  • Lean extra about Vite configuration: https://vitejs.dev/config/

Base mission

All of the front-end code will likely be positioned within the consumer listing. Let’s create three information:

  • consumer/index.html: entry level of your front-end, it’ll mount the Riot utility
  • consumer/index.riot: Riot utility
  • consumer/c-button.riot: Customized button element utilized by the applying.

At this stage, the basis listing ought to seem like:

Enter fullscreen mode

Exit fullscreen mode

The consumer/index.html is fairly fundamental. It imports and mounts the Riot utility:

<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>RiotJS + ViteJS</title>
    <div id="root"></div>
    <script kind="module">
      /** Load riot.js **/
      import * as riot from 'riot'
      import App from './index.riot'

      const mountApp = riot.element(App)
Enter fullscreen mode

Exit fullscreen mode

The consumer/index.riot imports the customized button c-button and defines three cases:

  • one to extend the counter
  • one to lower the counter
  • one to print the counter
        <h1> Riotjs + ViteJS </h1>
        <c-button> { state.complete } </c-button>
        <c-button major="true" onclick={ () => replace({ complete: state.complete + 1 }) }> Add </c-button>
        <c-button hazard="true" onclick={ () => replace({ complete: state.complete - 1 }) }> Delete </c-button>
        /** Load the customized button **/
        import cButton from './c-button.riot';

        export default {
            /** Outline the customized button **/
            elements : {
            /** State of the counter **/
            state : {
                complete: 0
Enter fullscreen mode

Exit fullscreen mode

The consumer/c-button.riot accommodates a slot to vary the textual content and props to vary the type of the button (default/gray, major/purple, or hazard/orange):

<c-button >
    <button class="btn{ props.major ? ' btn-primary' : '' }{ props.hazard ? ' btn-danger' : '' }">
Enter fullscreen mode

Exit fullscreen mode

Now we’ve got all the things to start out a improvement server to get a preview of the app!

Run stay preview

Begin the event server, then entry the stay preview on http://localhost:5173/ :

npm run dev
Enter fullscreen mode

Exit fullscreen mode

Et voilà, it is best to have the ability to enhance/lower the counter 🎉 You can also make code adjustments, and the preview will likely be refreshed mechanically.

🛟 When you want any assist, go away a remark.

Construct for manufacturing

Construct the entrance for manufacturing:

npm run construct
Enter fullscreen mode

Exit fullscreen mode

Constructed information are positioned within the dist listing.


Utilizing Vite makes the event of Riot utility tremendous straightforward:

  • No-brain configuration
  • environment friendly improvement server with HMR (Scorching Module Alternative), permitting you to see adjustments in your code immediately with out a full web page reload
  • environment friendly construct system with tree-shaking

Thanks for studying! Cheers 🍻


Add a Comment

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?