⚡ Setting Up Mithril + Vite Using Vitriol
Vitriol is a lightweight npm package that integrates Mithril with Vite and Ionic Framework, enabling fast and modern frontend development.
🛠 Prerequisites
Make sure you have the following before starting:
- Node.js and npm installed
- Your preferred code editor
- Basic knowledge of JavaScript and Mithril
🚀 Step 1: Create Your Project with Vitriol
npm create vitriol@latest
If you're using Vitriol for the first time, npm will prompt you to install the package.
🧩 Step 2: Configure Project Setup
You’ll be asked to choose:
- Project type:
JSXorStandard - Project name (default is
vitriol-project) - Whether to include the Ionic Framework (we recommend including it for this demo)
- Add
devcontainer.jsonconfiguration? This option lets you set up a Development Container for seamless coding in environments like GitHub Codespaces or VS Code Remote. Choose Yes if you want to enable this feature.
📌 If you use a custom project name, replace vitriol-project in subsequent steps with your chosen name.
📦 Step 3: Install Dependencies
cd vitriol-project
npm install
Wait until installation completes.
🌐 Step 4: Start Development Server
npm run dev
Then open the URL displayed in your terminal to see your running app in the browser.
You should see this page:
🔧 Step 5: Explore and Update the App
The source files are in the /src folder.
-
main.jssets up components and Mithril routes automatically - All
.js(.jsx) files inside/pagesare auto-registered as routes - Access pages via URLs like
/#/pagenameor programmatically withm.route.set("/pagename")
✅ Step 6: Automate Testing with Vitest
Vitest is used as test framework for your application.
Tests live in the /test folder.
To run them:
npm run test
📦 Step 7: Build for Production
npm run build
- The build output is placed in the
/distdirectory
npm run preview
- To test your production-ready files locally before deploying
Top comments (1)
Great thank you :-)