Vitriol is a package that provides a simple and elegant way to use Mithril with Vite, a fast and modern frontend tooling.In this blog, I will show you how to set up a basic Mithril + Vite project usign Vitriol.
Prerequisites
To follow this tutorial, you will need:
• Node.js and npm installed on your machine
• A code editor of your choice
• A basic knowledge of Javascript and Mithril
Step 1: Launch Vitriol npm package to create your project
npm create vitriol
if you are usign Vitriol for the first type, the system will ask you to install the package first.
Step 2: Follow the prompts
The vitriol client will ask you the type of project (JSX or Standard), the name of the project and if you want to include Ionic framework or not. For this demo, we will use JSX and we will include the Ionic Framework. Also, you can keep vitriol-project as the default project name. If you use another project name, you have to change vitriol-project by this other project name in step 3.
Step 3: Install your project
cd vitriol-project
npm install
Wait until the node packages installation is completed
Step 4: Run your project
Run the following command to run your application on the development web server.
npm run dev
Open your browser usign the URL displayed on your terminal
You should see this page
Step 5: Update the application
The source code of the application is located in the src folder.
The entry point file is main.js. This is where the components initialization are done as well as Mithril routes definition.
All .jsx files in the pages folder are automatically included as Mithril routes and can be reach using /#!/pagename url or m.route.set(/pagename) function.
Step 6: Test automation
Vitest is used as test framework for your application. All testing scripts are in folder /test
Run the following command to launch the test scripts
npm run test
Step 7: Production Build
Once your application is ready for production, run the build command to create the final application bundle.
npm run build
You can test your production files locally before uploading them to your web server by running this command
npm run preview
Production files are created in /dist folder and can be uploaded to you web server from there.
Top comments (1)
Great thank you :-)