start ui web

START UI [Web] est un référentiel de démarrage frontal a opposé créé et entretenu par l'équipe BearStudio et d'autres contributeurs. Il représente la pile à jour de notre équipe que nous utilisons lors de la création d'applications Web pour nos clients.

Documentation

Pour des informations détaillées sur la façon d'utiliser ce projet, veuillez vous référer à la documentation. La documentation contient toutes les informations nécessaires sur l'installation, l'utilisation et certains guides.

Démo

Une démonstration en lecture seule de ce que vous aurez lors du démarrage d'un projet avec Start UI [Web] est disponible sur Demo.Start-UI.com.

Technologies

? TypeScript, ⚛️ React, ⚫️ NextJS, ⚡️ Chakra UI ,? TRPC, ▲ PRISMA,? ️ Query Tanstack, livre de contes ,? Dramaturge ,? REACT HOW FORM ,? React i18Next

Exigences

• Nodejs> = 20
• Pnpm
• Docker (ou une base de données PostgreSQL)

Commencer

pnpm create start-ui --web myApp

Qui échafaunera un nouveau dossier avec la dernière version de Start UI [Web]?

Installation

1. Dupliquez le fichier .env.example dans un nouveau fichier .env et mettez à jour les variables d'environnement

cp .env.example .env

Note

Conseils rapides pour le développement local

• Ne mettez pas à jour la variable Email_Server , car la valeur par défaut sera utilisée pour attraper les e-mails pendant le développement.

2. Installer des dépendances

pnpm install

3. Configurer et démarrer la DB avec Docker

pnpm dk:init

Note

Vous ne voulez pas utiliser Docker?

Configurez une base de données PostgreSQL (localement ou en ligne) et remplacez la variable d'environnement de la base de données_url . Ensuite, vous pouvez exécuter pnpm db:push pour mettre à jour votre schéma de base de données, puis exécuter pnpm db:seed pour semer votre base de données.

Développement

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

E-mails en développement

Maildev pour attraper des e-mails

En développement, les e-mails ne seront pas envoyés et seront pris par Maildev.

L'interface utilisateur de Maildev est disponible à 0.0.0.0:1080.

Aperçu des e-mails

Les modèles de courriels sont construits avec des composants react-email dans le dossier src/emails .

Vous pouvez prévisualiser un modèle de messagerie sur http://localhost:3000/devtools/email/{template} où {template} est le nom du fichier de modèle dans le dossier src/emails/templates .

Exemple: code de connexion

Aperçu de la traduction par e-mail

Ajoutez la langue dans l'URL d'aperçu comme http://localhost:3000/devtools/email/{template}/{language} où {language} est la clé de langue ( en , fr , ...)

Aperçu des accessoires par e-mail

Vous pouvez ajouter des paramètres de recherche à l'URL d'aperçu pour passer sous forme d'accessoires au modèle. http://localhost:3000/devtools/email/{template}/?{propsName}={propsValue}

Livre de contes

pnpm storybook

Mettre à jour le typage du thème

Lors de l'ajout ou de la mise à jour des composants du thème, des variations de composants, des tailles, des couleurs et d'autres fondations de thème, vous pouvez étendre les types de thème internes pour fournir une belle assurance auto-automatique.

Exécutez simplement la commande suivante après la mise à jour du thème:

pnpm theme:generate-typing

Générer des composants d'icônes personnalisés à partir des fichiers SVG

Mettez les fichiers SVG personnalisés dans le dossier src/components/Icons/svg-sources , puis exécutez la commande suivante:

pnpm theme:generate-icons

Avertissement

Toutes les icônes SVG doivent être des fichiers SVG préfixés par icon- (Exemple: icon-externel-link ) avec une taille 24x24px , une seule forme et remplie de couleur #000 (sera remplacée par currentColor ).

Mettre à jour la touche de stockage du mode couleur

Vous pouvez mettre à jour la clé de stockage utilisée pour détecter le mode couleur en mettant à jour cette constante dans le fichier src/theme/config.ts :

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

Tests E2E

Les tests E2E sont configurés avec le dramaturge.

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

Les tests sont écrits dans le dossier e2e ; Il existe également un dossier e2e/utils qui contient quelques utils pour aider à la rédaction de tests.

Montrez un indice sur les environnements de développement

Configurez la variable ENV NEXT_PUBLIC_ENV_NAME avec le nom de l'environnement.

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

Traductions

Configurer l'extension alliée i18n

Nous avons recommandé d'utiliser le plugin allié i18n pour le code VS pour la gestion des traductions.

Créer ou modifier le fichier .vscode/settings.json avec les paramètres suivants:

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

Production

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

Déployer avec Docker

1. Construisez l'image docker (remplacer start-ui-web par le nom de votre projet)

 docker build -t start-ui-web .

2. Exécutez l'image docker (remplacer start-ui-web par le nom de votre projet)

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

La demande sera exposée sur le port 80 (http: // localhost)