Files
2026-09-06 11:11:27 +02:00

2.2 KiB

Nuxt Boilerplate

Szablon startowy do zajęć z Nuxt: Bun + Nuxt + TypeScript + Tailwind, z podpiętym MySQL (Drizzle ORM) i Redisem do wspólnych baz danych z kursu.

Uruchomienie

bun install
bun run db:push   # tworzy tabelę `notes` z server/db/schema.ts
bun run dev

Strona główna pokazuje krótką listę notatek (MySQL) i pole klucz/wartość (Redis), żeby od razu było widać, że oba połączenia działają.

Co tu jest

  • app/pages/index.vue - przykładowa strona z <template lang="pug">, która korzysta z endpointów opisanych niżej przez useFetch/$fetch. Usuń ją, gdy zrozumiesz zasadę działania i zaczniesz tworzyć własne strony.
  • server/api/notes.get.ts / notes.post.ts - przykładowy odczyt i zapis do MySQL przez Drizzle.
  • server/api/cache/[key].get.ts / [key].put.ts - przykładowy odczyt i zapis do Redisa.
  • server/db/schema.ts - definicje tabel w Drizzle. Dodawaj tu kolejne tabele, a potem uruchom bun run db:push, żeby zsynchronizować je z bazą MySQL (bez plików migracji - push po prostu porównuje schemat z bazą na żywo).
  • server/db/index.ts / server/utils/redis.ts - gotowe klienty, które czytają dane połączenia ze zmiennych środowiskowych. W Twoim workspace w Coderze są one już ustawione (MYSQL_*, REDIS_*) - nie musisz nigdzie wpisywać hasła.
  • .env.example - potrzebne tylko, jeśli chcesz uruchomić projekt poza workspace'em w Coderze, na własnym MySQL/Redis.
  • .gitea/workflows/deploy.yml - wdraża projekt na Vercel przy pushu do main, ale tylko jeśli ustawisz VERCEL_TOKEN (i VERCEL_ORG_ID/ VERCEL_PROJECT_ID) jako sekrety repozytorium. Bez nich zadanie jest pomijane - nic się nie psuje.

Uwagi

  • Twój użytkownik Redis widzi tylko klucze pod student:<twoja-nazwa>:* (wymuszone po stronie serwera) - dlatego endpointy cache dodają ten prefiks do kluczy. Klucze spoza tego prefiksu zostaną odrzucone.
  • Twój użytkownik MySQL ma dostęp tylko do swojej własnej bazy - nie musisz nic dodatkowo podawać poza tym, co jest już w MYSQL_DATABASE.
  • Klasy Tailwinda działają wszędzie dzięki @nuxtjs/tailwindcss - do podstawowego użycia nie potrzeba dodatkowego pliku CSS.