avermeulen

AlpineJS with ViteJS

ViteJS is a modern JavaScript build tool that can be used to build modern JavaScript frameworks including ReactJS and VueJS to name only two. In this tutorial you will explore how to use ViteJS with AlpineJS. This will prepare you for using ViteJS with ReactJS or other modern web framework.

Modern JavaScript built tools like ViteJS, ParcelJS & react-create-app (built with webpack) embrace ES Modules. Meaning that external dependencies are installed via npm and imported. So no more script, style or link tags. HTML, CSS & JavaScript are bundled into compact bundle.

Create app using Vite

Let's start exploring ViteJS by creating a new application. Using this command:

avermeulen

Elastic Electricity App

Create a web app, to help your local Municipality to track electricity usage per household. Each month the Municipality gives each household's 50 units each for free. Households can topup if they need extra electricity.

As you use appliances, your units will drop accordingly.

If the units per household is equal or below 30, add a class warning into your current units.

In your app you must have the following.

avermeulen

Using ESLint with VS Code

ESLint is a tool for “linting” your code. It analyze your code and warn you of potential errors.

Installing ESLint

In order for it to work, you need to configure it with specific rules. Luckily it provides an ESLint configuration that anyone can use.

1. To use ESLint you will need to install Node.js