AlpineJSwithViteJS.md

AlpineJS with ViteJS

• Create app using Vite

npm vite create@latest

Follow the prompts:

• Pick vanilla JS

Change into the folder create.

Do npm install

Next do npm run dev - this will start an development ViteJS instance that will compile your code in the fly.

It will open up automatically in the browser.

If you change some things in main.js and save the file.

Show the text below in the page by replacing the text that is setting #app element with the text below.

document.querySelector('#app').innerHTML = "I 💚 Alpine JS!"

The browser will refresh automatically, after you save the file.

Alpine setup

Run the following command to install it.

npm install alpinejs

Import Alpine in the main.js file

Now import Alpine into your bundle and initialize it like so:

import Alpine from 'alpinejs'
 
window.Alpine = Alpine
 
Alpine.start()

Small Alpine App

Create a small app that displays daily jokes at the click of a button. Here is an example app that displays quotes Vite Example App

Create your own module

Use npm module

Here is an external npm module to use Everyday Fun

Style your app

Create a new css file. Make sure that you have saved and imported your file.

Deploy your app

Add 2 files - vite.config.js & deploy.sh

import { defineConfig } from 'vite'

export default defineConfig({
    base: 'repo-name',
})

Create the deploy.sh file in your project.

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git checkout -b main
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main

# if you are deploying to https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:<USERNAME>/<REPO> main:gh-pages

cd -

You will use this file when deploying the project.

for vite.config.js for use this:

import { defineConfig } from 'vite'

export default defineConfig({
    base: 'repo-name',
})