web

Eseuri frontend starter

Acest proiect utilizează pnpm.

Instalează dependențele:

pnpm i

Rulează serverul de development:

pnpm dev

Compilează fișierele pentru producție:

pnpm build

Servește fișierele de producție:

pnpm serve-vite

Formatează codul:

pnpm format

Testează codul:

pnpm t

Deschide dashboard-ul Cypress:

pnpm e2e

NOTĂ: Pentru a putea rula Cypress, mai trebuie făcuți următorii pași (înainte de a deschide container-ul):

• Instalează VcXsrv
• Rulează programul XLaunch cu următoarele setări:
  1. Multiple windows
  2. Start no client
  3. Native opengl debifat, Disable access control bifat

Probleme

Variante Tailwind

Configurarea funcționează foarte bine, nu există probleme la încărcarea conținutului, reîncărcarea paginii sau la build în general.

Există totuși o particularitate la procesarea CSS: variantele Tailwind (hover:, focus: etc.) se pot folosi numai în clase. În combinație cu directiva @apply build-ul va eșua. De exemplu, următorul cod nu va fi compilat cu succes:

.elem {
  @apply bg-white border rounded;
  @apply hover:bg-red;
}

Pentru a obține același efect, fie scrieți stilurile în markup:

<div class="elem bg-white border rounded hover:bg-red" />

fie regândiți codul: extrageți clasele duplicate într-un component separat, de exemplu.

Testare cod

La momentul actual, configurarea Jest eșuează în a rula teste pe componentele Svelte. Fișierele .js sau .ts merg, în schimb.