vite-now

Create single-file Vite React projects for quick experimentation.

Scripting environments like Python let you write and run a single file. Back when typical web development was only vanilla HTML/JS/CSS, you could simply launch a HTML file from your disk in your browser. The modern web's complicated build tooling makes it much more difficult to quickly try something out.

With vite-now, you write one JSX file and let vite-now provide sensible defaults around it. It's a bit like a "fiddle", but using the development tools you already know.

Install:

npm install -g @aaronc81/vite-now

Write this in a new foo.jsx file:

export default function Main() {
  return <h1>Hello, world!</h1>;
}

then run vn foo.jsx to start Vite!

Guide

The only requirement is that your JSX file must have a default export function that returns a React component.

You can control configuration of vite-now using magic comments:

• // @vn-name Hello, World! will change the title of your application's page.
• // @vn-use plugin version adds a plugin, a predetermined set of packages and configuration. The version is optional, if omitted the latest version is used. Current plugins are:
  • react (enabled by default, but if you'd like to use a non-default version, you can specify it explicitly)
  • tailwindcss

Intended Usage

The idea of vite-now is quick, throwaway experimentation. If you want to start creating an app, move to a proper Vite project.

There are specific "happy paths" supported by the plugin system, like using React and Tailwind. Other stacks or additional dependencies aren't currently supported.