Byggverktyget Vite

I denna övning tittar vi på hur vi kan använda byggverktyget vite för att bygga vår kod och hantera npm-moduler.

Förkunskaper

Du har en fungerade labbmiljö efter kmom03 i ditt webapp-lager repo.

Installera Vite

Vi börjar med att installera Vite som ett utvecklingsberoende (development dependency) med följande kommando.

## stå i webapp-lager
npm install -D vite

Efter att du har installerat kommandot kan vi dra igång vite med följande kommando i terminalen.

## stå i webapp-lager
npx vite

Nu startas en webbserver med hjälp av vite där du kan gå till din Lager-app i webbläsaren via den adress som visas i terminalen. Webbserver fungerar lite mer avancerat än http-server som vi har använt tidigare i kursen med kommandot npm start. Med vite webbservern får vi automatisk omladdning av webbläsaren om vi ändrar saker.

För att underlätta för start av vite webbservern lägger vi till två stycken script i package.json, min script del i package.json ser nu ut på detta sättet.

"scripts": {
  "test": "echo \"Implement later\" && exit 0",
  "start": "http-server .",
  "posttest": "npm run eslint && npm run stylelint && npm run htmlhint",
  "eslint": "eslint",
  "eslint:fix": "eslint --fix",
  "stylelint": "stylelint \"**/*.css\"",
  "stylelint:fix": "stylelint --fix \"**/*.css\"",
  "htmlhint": "htmlhint \"**/*.html\"",
  "dev": "vite",
  "build": "vite build"
},

Bygga koden med vite

De som var skarpögda ser att vi även la in ett annat script än npm run dev scriptet. I detta fallet är det build, som kan användas för att skapa ett bygga av de kod. Då tas som vid dev scriptet utgångspunkt från index.html och all JavaScript och CSS som refereras därifrån och i alla underliggande filer och packas ihop till ett bygga i en dist-katalog.

Så om du testar att skapa ett bygge med npm run build, bör du kunna se en ny katalog i ditt webapp-lager repo.

För att vi inte vill ha med byggen till GitHub lägger vi in dist/ i vår .gitignore fil. Min fil ser ut på detta sättet.

node_modules/
.env
dist/

Då den CSS och JavaScript som genereras av vites bygg kommando inte riktigt följer vår kodstandard kan vi ignorera den från stylelint och eslint.

I .stylelintignore skriver vi in:

**/*.min.css
dist/

I eslint.config.mjs lägger vi till dist/ i ignores delen längst ner:

import js from "@eslint/js"
import globals from "globals"
import json from "@eslint/json"
import css from "@eslint/css"
import { defineConfig } from "eslint/config"

export default defineConfig([
  {
    files: ["**/*.{js,mjs,cjs}"],
    plugins: { js },
    extends: ["js/recommended"],
    languageOptions: { globals: { ...globals.browser, ...globals.node } },
    rules: {
      'no-unused-vars': 'warn',
      'no-console': 'off',
      semi: ['error', 'never'],
      indent: ['error', 2]
    }
  },
  {
    files: ["**/*.json"],
    plugins: { json },
    language: "json/json",
    extends: ["json/recommended"],
  },
  {
    files: ["**/*.css"],
    plugins: { css },
    language: "css/css",
    extends: ["css/recommended"],
    rules: {
      // allow unknown CSS-variables (var(--...)) defined in other files
      "css/no-invalid-properties": ["error", { allowUnknownVariables: true }],
      "css/use-baseline": ["error", { available: "newly" }],
    },
  },
  {
    ignores: [
      "package-lock.json",
      "dist"
    ],
  },
])

Driftsättning via GitHub Pages

Tidigare har vi bara laddat upp vår koden till GitHub och sedan har det bara automagiskt driftsatts med hjälp av filen .github/workflows/static-deploy.yml. För att det ska fungera även efter ett vite bygge behöver vi fixa lite, vi tar utgångspunkt i Vite’s egna beskrivning. Först skapar vi filen vite.config.js och lägger in följande. Om ditt repo av någon anledning heter något annat än webapp-lager lägg in det.

export default {
  base: '/webapp-lager/',
}

Sedan går vi till filen .github/workflows/static-deploy.yml, där kan du klistra in följande. Den stora skillnaden mot tidigare är att nu installerar vi först alla npm-moduler och sedan kör vi npm run build steget. Sedan tar vi dist-katalogen och driftsätter utifrån den.

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches:
      - main
      - 'kmom*'

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v5
      - name: Set up Node
        uses: actions/setup-node@v6
        with:
          node-version: lts/*
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v4
        with:
          # Upload dist folder
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4