start ui web

Mulai UI [Web] adalah repositori starter frontend yang dipelajari yang dibuat & dikelola oleh tim Bearstudio dan kontributor lainnya. Ini mewakili tumpukan terkini tim kami yang kami gunakan saat membuat aplikasi web untuk klien kami.

Dokumentasi

Untuk informasi terperinci tentang cara menggunakan proyek ini, silakan merujuk ke dokumentasi. Dokumentasi berisi semua informasi yang diperlukan tentang instalasi, penggunaan, dan beberapa panduan.

Demo

Demonstrasi live read-only tentang apa yang akan Anda miliki saat memulai proyek dengan Start UI [Web] tersedia di demo.start-ui.com.

Teknologi

? Naskah, ⚛️ Bereaksi, ⚫️ Nextjs, ⚡️ Chakra UI ,? TRPC, ▲ Prisma ,? ️ Tanstack Query, Storybook ,? Penulis naskah ,? Bereaksi bentuk kait,? Bereaksi I18Next

Persyaratan

• NodeJS> = 20
• PNPM
• Docker (atau database PostgreSQL)

Memulai

pnpm create start-ui --web myApp

Itu akan perancah folder baru dengan versi terbaru dari Start UI [Web]?

Instalasi

1. Duplikat file .env.example ke file .env baru, dan perbarui variabel lingkungan

cp .env.example .env

Catatan

Saran cepat untuk pengembangan lokal

• Jangan perbarui variabel email_server , karena nilai default akan digunakan untuk menangkap email selama pengembangan.

2. Instal dependensi

pnpm install

3. Siapkan dan mulai DB dengan Docker

pnpm dk:init

Catatan

Tidak ingin menggunakan Docker?

Siapkan database PostgreSQL (secara lokal atau online) dan ganti variabel lingkungan database_URL . Kemudian Anda dapat menjalankan pnpm db:push untuk memperbarui skema database Anda dan kemudian menjalankan pnpm db:seed to Seed Database Anda.

Perkembangan

 # Run the database in Docker (if not already started)
pnpm dk:start
# Run the development server
pnpm dev

Email dalam pengembangan

Maildev untuk menangkap email

Dalam pengembangan, email tidak akan dikirim dan akan ditangkap oleh Maildev.

Maildev UI tersedia di 0,0.0.0:1080.

Pratinjau email

Template email dibangun dengan komponen react-email di folder src/emails .

Anda dapat melihat pratinjau templat email di http://localhost:3000/devtools/email/{template} di mana {template} adalah nama file template di folder src/emails/templates .

Contoh: Kode Login

Pratinjau terjemahan email

Tambahkan bahasa dalam URL pratinjau seperti http://localhost:3000/devtools/email/{template}/{language} di mana {language} adalah kunci bahasa ( en , fr , ...)

Pratinjau alat peraga email

Anda dapat menambahkan Params Pencarian ke URL Pratinjau untuk diteruskan sebagai alat peraga ke templat. http://localhost:3000/devtools/email/{template}/?{propsName}={propsValue}

Buku cerita

pnpm storybook

Perbarui pengetikan tema

Saat menambahkan atau memperbarui komponen tema, variasi komponen, ukuran, warna, dan fondasi tema lainnya, Anda dapat memperluas pengetikan tema internal untuk memberikan pelengkapan otomatis yang bagus.

Cukup jalankan perintah berikut setelah memperbarui tema:

pnpm theme:generate-typing

Hasilkan Komponen Ikon Kustom dari File SVG

Masukkan file SVG khusus ke dalam folder src/components/Icons/svg-sources dan kemudian jalankan perintah berikut:

pnpm theme:generate-icons

Peringatan

Semua ikon SVG harus diawali dengan file SVG dengan icon- (Contoh: icon-externel-link ) dengan ukuran 24x24px , hanya satu bentuk dan diisi dengan warna #000 (akan diganti dengan currentColor ).

Perbarui Kunci Penyimpanan Mode Warna

Anda dapat memperbarui tombol penyimpanan yang digunakan untuk mendeteksi mode warna dengan memperbarui konstanta ini di file src/theme/config.ts :

 export const COLOR_MODE_STORAGE_KEY = 'start-ui-color-mode' ; // Update the key according to your needs

Tes e2e

Tes E2E diatur dengan penulis naskah.

pnpm e2e     # Run tests in headless mode, this is the command executed in CI
pnpm e2e:ui  # Open a UI which allow you to run specific tests and see test execution

Tes ditulis dalam folder e2e ; Ada juga folder e2e/utils yang berisi beberapa util untuk membantu menulis tes.

Tampilkan petunjuk tentang lingkungan pengembangan

Siapkan variabel env NEXT_PUBLIC_ENV_NAME dengan nama lingkungan.

 NEXT_PUBLIC_ENV_NAME="staging"
NEXT_PUBLIC_ENV_EMOJI="?"
NEXT_PUBLIC_ENV_COLOR_SCHEME="teal"

Terjemahan

Siapkan ekstensi sekutu i18n

Kami merekomendasikan menggunakan plugin I18N Ally untuk VS Code untuk manajemen terjemahan.

Buat atau edit file .vscode/settings.json dengan pengaturan berikut:

{
  "i18n-ally.localesPaths" : [ " src/locales " ],
  "i18n-ally.keystyle" : " nested " ,
  "i18n-ally.enabledFrameworks" : [ " general " , " react " , " i18next " ],
  "i18n-ally.namespace" : true ,
  "i18n-ally.defaultNamespace" : " common " ,
  "i18n-ally.extract.autoDetect" : true ,
  "i18n-ally.keysInUse" : [ " common.languages.* " ]
}

Produksi

pnpm install
pnpm storybook:build # Optional: Will expose the Storybook at `/storybook`
pnpm build
pnpm start

Digunakan dengan Docker

1. Bangun gambar Docker (ganti start-ui-web dengan nama proyek Anda)

 docker build -t start-ui-web .

2. Jalankan gambar Docker (ganti start-ui-web dengan nama proyek Anda)

 docker run -p 80:3000 start-ui-web

Aplikasi akan diekspos pada port 80 (http: // localhost)