start ui web

Start UI [Web] ist ein von dem Bearstudio -Team und anderer Mitwirkenden erstellte und gepflegtes Frontend Starter -Repository. Es repräsentiert den aktuellen Stack unseres Teams, den wir beim Erstellen von Web-Apps für unsere Kunden verwenden.

Dokumentation

Ausführliche Informationen zur Verwendung dieses Projekts finden Sie in der Dokumentation. Die Dokumentation enthält alle erforderlichen Informationen zu Installation, Verwendung und einigen Leitfäden.

Demo

Eine Live-schreibgeschützte Demonstration dessen, was Sie beim Starten eines Projekts mit Start UI [Web] haben werden, finden Sie auf demo.start-ui.com.

Technologien

? TypeScript, ⚛️ React, ⚫️ NextJs, ⚡️ Chakra ui,? TRPC, ▲ Prisma,? euen Tanstack -Abfrage, Storybook,? Dramatiker,? Hakenform reagieren,? Reagieren i18Next

Anforderungen

• Nodejs> = 20
• Pnpm
• Docker (oder eine PostgreSQL -Datenbank)

Erste Schritte

pnpm create start-ui --web myApp

Das wird ein neuer Ordner mit der neuesten Version von Start UI [Web] ins Gerät bringen?

Installation

1. Duplizieren Sie die Datei .env.example in eine neue .env -Datei und aktualisieren

cp .env.example .env

Notiz

Schnelle Ratschläge für die lokale Entwicklung

• Aktualisieren Sie die Variable von E -Mail_Server nicht , da der Standardwert verwendet wird, um die E -Mails während der Entwicklung zu fangen.

2. Abhängigkeiten installieren

pnpm install

3. Setzen Sie den DB mit Docker ein und starten Sie die DB

pnpm dk:init

Notiz

Willst du Docker nicht benutzen?

Richten Sie eine PostgreSQL -Datenbank (lokal oder online) ein und ersetzen Sie die Umgebungsvariable Database_url . Anschließend können Sie pnpm db:push um Ihr Datenbankschema zu aktualisieren und dann pnpm db:seed für Ihre Datenbank auszuführen.

Entwicklung

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

E -Mails in der Entwicklung

Maildev, um E -Mails zu fangen

In der Entwicklung werden die E -Mails nicht gesendet und von Maildev gefangen.

Die Maildev -Benutzeroberfläche ist unter 0,0.0.0:1080 erhältlich.

Vorschau -E -Mails

E-Mail-Vorlagen werden mit react-email Komponenten im Ordner src/emails erstellt.

Sie src/emails/templates eine E -Mail -Vorlage unter http://localhost:3000/devtools/email/{template} {template} wob

Beispiel: Anmeldecode

E -Mail -Übersetzung Vorschau

Fügen Sie die Sprache in der Vorschau -URL wie http://localhost:3000/devtools/email/{template}/{language} wobei {language} der Sprachschlüssel ist ( en , fr , ...)

E -Mail -Requisiten Vorschau

Sie können der Vorschau -URL Suchparameter hinzufügen, um sie als Requisiten an die Vorlage zu übergeben. http://localhost:3000/devtools/email/{template}/?{propsName}={propsValue}

Storybook

pnpm storybook

Aktualisieren Sie das Themen -Tippen

Beim Hinzufügen oder Aktualisieren von Themenkomponenten, Komponentenvariationen, Größen, Farben und anderen Themenfundamenten können Sie die internen Themen -Typierungen erweitern, um eine schöne Autocomplete zu bieten.

Führen Sie einfach den folgenden Befehl aus, nachdem Sie das Thema aktualisiert haben:

pnpm theme:generate-typing

Generieren Sie benutzerdefinierte Icons -Komponenten aus SVG -Dateien

Fügen Sie die benutzerdefinierten SVG-Dateien in den Ordner src/components/Icons/svg-sources ein und führen Sie den folgenden Befehl aus:

pnpm theme:generate-icons

Warnung

Alle SVG-Symbole sollten SVG-Dateien sein, die von icon- (Beispiel: icon-externel-link ) mit 24x24px- Größe, nur eine Form und mit #000 Farbe (durch currentColor ersetzt werden) vorangestellt werden.

Aktualisieren Sie den Farbmodus -Speicherschlüssel

Sie können den Speicherschlüssel aktualisieren, der verwendet wird, um den Farbmodus zu erkennen, indem Sie diese Konstante in der Datei src/theme/config.ts aktualisieren:

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

E2E -Tests

E2E -Tests werden mit Dramatikern eingerichtet.

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

Tests sind im e2e -Ordner geschrieben; Es gibt auch einen e2e/utils -Ordner, der einige Utils enthält, um Tests zu schreiben.

Zeigen Sie Hinweise auf Entwicklungsumgebungen

Richten Sie die Variable NEXT_PUBLIC_ENV_NAME mit dem Namen der Umgebung ein.

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

Übersetzungen

Richten Sie die I18N Ally -Erweiterung ein

Wir haben empfohlen, das I18N Ally Plugin für VS Code for Translations Management zu verwenden.

Erstellen oder bearbeiten Sie die Datei .vscode/settings.json mit den folgenden Einstellungen:

{
  "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.* " ]
}

Produktion

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

Mit Docker einsetzen

1. Erstellen Sie das Docker-Bild (ersetzen Sie start-ui-web durch Ihren Projektnamen).

 docker build -t start-ui-web .

2. Führen Sie das Docker-Bild aus (ersetzen Sie start-ui-web durch Ihren Projektnamen).

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

Die Anwendung wird auf Port 80 (http: // localhost) ausgesetzt.