Vite - notatki

Kurs obejmuje
-> Czym jest Vite?
-> Jak używać Vite?
-> Jakie korzyści z tego płyną?
-> Jak stworzyć statyczny projekt JS?
-> Motywy
-> Tailwind
-> Zmienne środowiskowe
-> Deploymenty
-> Konfiguracja

1. Vite and Featues

Podczas gdy Webpack pobiera wszystkie paczki i kompiluje je na miejscu Vite
zachowuje ich relatywne ścieżki. W pierwszym przypadku serwer jest gotowy po
wczytaniu wsyzstkich paczek, w drugim paczki są wczytywane z relatywnych ścieżek
zachowanych w strukturze. Generalnie Vite tworay strukturę projektu bez instalacji
paczek ktore można zainstalować potem.

2. How to create project with Vite

Zainicjuj projekt npm

następnie zainstaluj vite
W komendach "dev": "vite dev"

Wystarczy w tym samym miejscu index.html i projekt zaczyna się kompilować

Dodawanie assetów do projektu:

utwórz main.js i dodaj content
możesz utworzyć inne pliki i eksportować z nich różne fragmenty kodu lecz pamiętaj
aby dodać typ skryptu jako module

<script type="module">
import "./main.js";
</script>

Tak samo w przypadku css lecz można zaimportować również klasy z modułu CSSa lecz
tlko w javascript

style.module.css

<script type="module">
import "./main.js";
import classes from "./style.2.module.css";
<- klasy zaczną działać
</script>

Klasy zawsze mają unikatowe kodowanie więc zawsze są tworzone "na nowo" najlepiej w
tym wypadku dodawać je dynamicznie. Przykład obiektu klasy: {title:
'_title_23mh0_7'}

<script type="module">
import "./main.js";
import classes from "./style.2.module.css";

document.querySelectorAll("h1").forEach((el) => {
el.classList.add(classes.title);
 });
</script>

Jest to w sumie bardzo bazowy serwer vite który jest używany do prostych projektów.

3. Vite CLI to generate projects

należy zainstalować create-vite, ogarnąłem to jako paczkę globalną,

potem wpisz komendę npm create vite i odpowiadaj na pytania

Jeśli nie chcesz tworzyć nowego folderu usuń nazwę i wpisz kropkę

Kolejne są opcje jaki projekt chcesz utworzyć, możesz wybrać spośród:

> Vanilla (czysty javascript)
> Vue
> React
> Preact
> Lit
> Svelte
> Others

Wybieramy pierwszą opcję a nastepnie JavaScript, jest również opcja typescript

Zainstaluj następnie wszystkie paczki

Po ruszeniu komendy npm run dev ukaże ci się templatka vite

Aby pominąć pytania

npm create vite may-app -- --template vanilla

Jeśli używasz starszego npma < 6: npm create vite may-app --template vanilla

Możesz w podobny sposób tworzyć inne aplikacje ale pamiętaj że mają one osobne
konfiguracje, podobnie jest w laravel.

Vue:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})

Laravel:

import { defineConfig } from "vite";

import laravel from "laravel-vite-plugin";

export default defineConfig({

plugins: [
laravel({
input: [
"resources/css/geoportal-styles.css",
"resources/css/ol-style.css",
"resources/css/app.css",
"resources/js/ol-map.js",
"resources/js/app.js",
 ],
refresh: true,
}),
],
});

-> import paczek do projektu

@vite(['resources/css/geoportal-styles.css', 'resources/css/app.css',
'resources/css/ol-style.css', 'resources/js/app.js', 'resources/js/ol-map.js'])

Wymaga laravel-vite-plugin

Bardzo łatwe tworzenie i kompilowanie projektów

4. Integracja Tailwind

> npm install -D tailwindcss postcss autoprefixer

> npx tailwindcss init -p

Pojawiają się pliki konfiguracyjne tailwind i postcss

Dodaj nastepnie style, komponenty i zmienne tailwind do dowolnego css podłączonego

do projektu

@tailwind base;
@tailwind components;
@tailwind utilities;

Do pliku konfiguracyjnego dodaj wsyzstkie pliki które powinny podlegać pod

tailwind:
/** @type {import('tailwindcss').Config} */
export default {
content: [],
theme: {
extend: {},
},
plugins: [],
}

Dodane pliki:

/** @type {import('tailwindcss').Config} */

export default {
content: ["index.html", "./*.js"],
theme: {
extend: {},
},
plugins: [],
};

Możesz korzystać z klas tailwinda

W React instalujesz tak samo, różni się konfiguracja

/** @type {import('tailwindcss').Config} */
export default {
content: [
 "./index.html",
"./src/**/*.{js, ts, jsx, tsx}" <- można wpisać wiele rozszerzeń
],
theme: {
extend: {},
},
plugins: [],
}

Skończyłeś 30:00

5. ENV variables

.env <- loaded in all cases

.env.local <- loaded all cases, ignored by git

.env.[mode] <- loaded in specific code np. development | production

Importowanie zmiennych środowiskowych:

import.meta.env

console.log(import.meta.env);
{
"VITE_DBNAME": "Something",
"VITE_DBPASS": "Something else",
"BASE_URL": "/",
"MODE": "development",
"DEV": true,
"PROD": false,
"SSR": false
}

bardziej sprecyzowane środowiska env mają pierwszeństwo nad innymi

6. Deployments

> npm run dev <- środowisko developerskie

> npm run build <- buodwanie aplikacji
> npm run preview <- widok zbudowanej aplikacji dobre do testowania aplikacji

Zbudowana aplikacja jest dostępna w folderze dist z którego można ją pobrać

Aby opublikować aplikację z customową domeną na githubie można to zrobić za pomocą

konfiguracji vite

import { defineConfig } from "vite";

export default defineConfig({

base: "/vite-github/",
});

wszystkie pliki należy zaczynać wtedy od ścieżki bazowej, w githubie można zbudować
taką stronę
za pomocą bota którego trzeba jednak skonfigurować
W githubie Settings > Pages > GitHub Actions > Static HTML

# 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: ["master"]

# 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

permissions:
contents: read
pages: write
id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-
progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production
deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false

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@v3
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 18
cache: 'npm'
- name: Install Dependencies
run: npm install
- name: Build Process
run: npm run build
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
# Upload entire repository
path: './dist'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2

7. Netlify deployments
npm install netlify-cli -g

Skończyłeś 53:30

> sudo netlify init

Postępuj zgonie z tem co masz w netlify-cli aby opublikować stronę, może byc
potrzebne podłączenie repozytorium

8. Vercel Deployments

npm install vercel -g

sudo vercel

Szybki deployment, działa podobnie jak netlify

9. Configurations

Tworzysz plik vite.config.js w którym umieszczasz konfiguracje narzedzia i serwera

bazowa konfiguracja, ona działa lecz nie otrzymuje wsparcia od technologii

intelisense

export default {
base: "/vite/",
};

Konfiguracja na bazie define config otrzymuje wsparcie od intelisense

import { defineConfig } from "vite";

export default defineConfig({

base: "/vite/",
});

Inne konfiguracje

import { defineConfig } from "vite";

export default defineConfig(({ command, mode, ssrBuild }) => {

console.log(command, mode, ssrBuild);
return {};
});

przy npm run dev

odda -> serve development false

przy npm run build

odda -> build production false

przy npm run preview

odda -> serve production false
Defined config
import { defineConfig } from "vite";

export default defineConfig(({ command, mode, ssrBuild }) => {

if (mode == "production") {
return {
base: "/vite/",
};
}
});

Async config
export default defineConfig(async ({ command, mode }) => {
const data = await someAyncFunction();

return {};
});

Pobieranie danych z .env

import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ command, mode }) => {

const env = loadEnv(mode, process.cwd(), ""); <- ostatnie to prefix za
pomocą którego szukasz interesujących cię fragmentów np "VITE_"

return {};
});

import { defineConfig } from "vite";

export default defineConfig({

clearScreen: false, <- stopuje autorefresh
envPrefix: "APP_", <- stosowane w przypadku zmiany "VITE_" np na "APP_"
logLevel: "silent", <- nie oddaje informacji o porcie lecz go uruchamia
logLevel: "info", <- domyślne
envDir: "direnv", <- zmiana lokalizacji pliku .env

css: {
devSourcemap: true, <- wygeneruj mapę zasobów css
},
server: {
port: 3000, <- zmiana portu
oprn: "index.html" <- otwórz konkretny plik
},
preview: {
port: 8888,
strictPort: true, <- zamyka projekt jeśli port nie jest dostepny
}

});