hardhat-vite
Hardhat plugin wrapping Vite to configure and launch dApps.
What
When developing a dApp, it is common to start the hardhat node
and deploy contracts before starting whichever bundler the client code uses. This plugin wraps the Vite, a newer & very fast, bundler and exposes the commands as a Hardhat task.
You can either use it at the command line with hardhat vite serve
or you could execute it after your hardhat node
is ready, by wrapping the "node:server-ready"
task:
import { subtask } from "hardhat/config";
import { TASK_NODE_SERVER_READY } from "hardhat/builtin-tasks/task-names";
subtask(TASK_NODE_SERVER_READY, nodeReady);
async function nodeReady(args, hre, runSuper) {
await runSuper(args);
await hre.run("deploy");
await hre.run("vite", {
command: "serve",
// Adding things here will be available in `import.meta.env`
env: {
RPC_URL: `http://${args.address}:${args.port}`,
},
});
}
Installation
npm install hardhat-vite
Import the plugin in your hardhat.config.js
:
require("hardhat-vite");
Or if you are using TypeScript, in your hardhat.config.ts
:
import "hardhat-vite";
Tasks
This plugin adds the vite
task which accepts the Vite commands: serve
(or dev
), build
, and preview
. It can also be provided a JSON object of environment variable overrides.
Usage: hardhat [GLOBAL OPTIONS] vite [--env <JSON>] [command]
OPTIONS:
--env JSON object to be merged with Vite environment variables (default: {})
POSITIONAL ARGUMENTS:
command The Vite command to run (serve, build, preview)
vite: Runs Vite commands in the context of Hardhat
For global options help run: hardhat help
Basic configuration
This plugin doesn't require any configuration, but allows all Vite options to be specified inside your hardhat.config.js
. You may still choose to use a vite.config.js
file, too!
See Vite's config documentation for all the available options.