start ui web

Start UI [Web] es un repositorio de inicio de frontend de opinión creado y mantenido por el equipo de BearStudio y otros contribuyentes. Representa la pila actualizada de nuestro equipo que utilizamos al crear aplicaciones web para nuestros clientes.

Documentación

Para obtener información detallada sobre cómo usar este proyecto, consulte la documentación. La documentación contiene toda la información necesaria sobre la instalación, el uso y algunas guías.

Manifestación

Una demostración de solo lectura en vivo de lo que tendrá al iniciar un proyecto con Start UI [Web] está disponible en demo.start-ui.com.

Tecnologías

? Mecanografiado, ⚛️ Reaccion, ⚫️ Nextjs, ⚡️ Chakra UI ,? TRPC, ▲ Prisma, ️ TanStack Query, Storybook ,? Dramaturgo ,? Reaccionar la forma del gancho ,? React I18Next

Requisitos

• Nodejs> = 20
• PNPM
• Docker (o una base de datos PostgreSQL)

Empezando

pnpm create start-ui --web myApp

¿Eso andamiará una nueva carpeta con la última versión de Start UI [Web]?

Instalación

1. Duplicar el archivo .env.example a un nuevo archivo .env , y actualice las variables de entorno

cp .env.example .env

Nota

Consejos rápidos para el desarrollo local

• No actualice la variable Email_Server , porque el valor predeterminado se usará para captar los correos electrónicos durante el desarrollo.

2. Instalar dependencias

pnpm install

3. Configurar e iniciar el DB con Docker

pnpm dk:init

Nota

¿No quieres usar Docker?

Configurar una base de datos PostgreSQL (localmente o en línea) y reemplace la variable de entorno Database_URL . Luego puede ejecutar pnpm db:push para actualizar el esquema de su base de datos y luego ejecutar pnpm db:seed para sembrar su base de datos.

Desarrollo

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

Correos electrónicos en desarrollo

Maildev para captar correos electrónicos

En el desarrollo, los correos electrónicos no serán enviados y serán atrapados por Maildev.

La interfaz de usuario de Maildev está disponible a 0.0.0.0:1080.

Correos electrónicos de vista previa

Las plantillas de correo electrónico están construidas con componentes react-email en la carpeta src/emails .

Puede obtener una vista previa de una plantilla de correo electrónico en http://localhost:3000/devtools/email/{template} donde {template} es el nombre del archivo de plantilla en la carpeta src/emails/templates .

Ejemplo: código de inicio de sesión

Vista previa de traducción por correo electrónico

Agregue el lenguaje en la URL de vista previa como http://localhost:3000/devtools/email/{template}/{language} donde {language} es la clave del idioma ( en , fr , ...)

Vista previa de los accesorios por correo electrónico

Puede agregar parámetros de búsqueda a la URL de vista previa para pasar como accesorios a la plantilla. http://localhost:3000/devtools/email/{template}/?{propsName}={propsValue}

Libro de cuentos

pnpm storybook

Actualizar el tema del tema

Al agregar o actualizar los componentes del tema, las variaciones de componentes, los tamaños, los colores y otras bases del tema, puede extender las tipificaciones de temas internos para proporcionar un buen autocompleto.

Simplemente ejecute el siguiente comando después de actualizar el tema:

pnpm theme:generate-typing

Genere componentes de iconos personalizados a partir de archivos SVG

Coloque los archivos SVG personalizados en la carpeta src/components/Icons/svg-sources y luego ejecute el siguiente comando:

pnpm theme:generate-icons

Advertencia

Todos los iconos SVG deben ser los archivos SVG prefijados por icon- (Ejemplo: icon-externel-link ) con tamaño de 24x24px , solo una forma y lleno de color #000 (será reemplazado por currentColor ).

Actualizar la tecla de almacenamiento del modo de color

Puede actualizar la tecla de almacenamiento utilizada para detectar el modo de color actualizando esta constante en el archivo src/theme/config.ts :

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

Pruebas de E2E

Las pruebas E2E se configuran con dramaturgo.

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

Las pruebas se escriben en la carpeta e2e ; También hay una carpeta e2e/utils que contiene algunos UTILS para ayudar a escribir pruebas.

Mostrar pista sobre entornos de desarrollo

Configurar la variable de envío de NEXT_PUBLIC_ENV_NAME con el nombre del entorno.

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

Traducciones

Configurar la extensión de aliado i18n

Recomendamos usar el complemento de aliado i18n para el código VS para la gestión de traducciones.

Cree o edite el archivo .vscode/settings.json con la siguiente configuración:

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

Producción

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

Desplegarse con Docker

1. Construya la imagen Docker (reemplace start-ui-web con el nombre de su proyecto)

 docker build -t start-ui-web .

2. Ejecute la imagen Docker (reemplace start-ui-web con el nombre de su proyecto)

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

La aplicación se expusirá en el puerto 80 (http: // localhost)