Auravant Extensions Template - en

Description

This command makes your life easier by creating a template to start extension projects in Auravant much faster and more efficiently. The template comes with an initial config using the following stack:

• React: Library for building user interfaces.
• Vite.js: Fast and modern build tool.
• TypeScript: Superset of JavaScript that adds static types.
• TailwindCSS: Utility-first CSS framework for styling.
• Prettier: Code formatter.
• ESLint: Tool for identifying and reporting problems in JavaScript and TypeScript code.

Additionally, it includes the SDK Types package so that you have autocomplete when interacting with our SDK.

Usage for Developers

To create a new project based on this template as an external developer to Auravant, use the following command:

npx avt-ext@latest repo_name

Components

You can install components based on shadcn using the npx from avt-ext-componentes.

Recommended VSCode Extensions

To fully enjoy this template, I recommend installing the following extensions in VSCode:

• Prettier: Code formatter: Automatically formats the code.
• ESLint: Identifies and reports problems in JavaScript and TypeScript code.
• Prettier ESLint: Integrates Prettier and ESLint, ensuring a consistent formatting experience.
• Tailwind CSS IntelliSense: Provides real-time autocomplete and documentation for Tailwind CSS classes.

Custom commands

These commands are designed to facilitate the development process for Auravant extensions:

• npm run build:zip: This command runs the build command and zips the files inside the dist folder with all the necessary files for deployment. This dist.zip file is what you will need to add your extension to the platform.
• npm run format: This command uses Prettier to format all the project's code. When executed, it reviews all files and applies the format specified in the config. This helps keep the code clean for everyone.
• npm run lint: This command uses ESLint to analyze the code for errors and style issues. The command is configured to review all .ts and .tsx files, report unused disable directives, and ensure there are no warnings (--max-warnings 0). This helps ensure that the code follows the quality and style rules established in the project.

React-router-dom

Remember that the extensions are an iframe, so you will need to use HashRouter instead of BrowserRouter.

Made with ❤️ by Nacho.

Auravant Extensions Template - es

Descripción

Este comando te hace la vida más fácil, te crea un template para iniciar proyectos de extensiones en Auravant mucho más rápido y eficiente. El template viene con una config inicial con el siguiente stack:

• React: Biblioteca para construir interfaces de usuario.
• Vite.js: Herramienta de construcción rápida y moderna.
• TypeScript: Superset de JavaScript que añade tipos estáticos.
• TailwindCSS: Framework de utilidades para estilos CSS.
• Prettier: Formateador de código.
• ESLint: Herramienta para identificar y reportar problemas en el código JavaScript y TypeScript.

Ademas, agrega el paquete SDK Types para que tengas autocompletado a la hora de interactuar con nuestro SDK.

Uso para desarrolladores

Para crear un nuevo proyecto basado en este template siendo un desarrollador externo a Auravant, usá el siguiente comando papá:

npx avt-ext@latest nombre_del_repo

Componentes

Podes instalar los componentes basados en shadcn utilizando el npx de avt-ext-componentes.

Extensiones Recomendadas para VSCode

Para disfrutar al máximo de este template te recomiendo instalar las siguientes extensiones en VSCode:

• Prettier: Code formatter: Para formatear el código automáticamente.
• ESLint: Para identificar y reportar problemas en el código JavaScript y TypeScript.
• Prettier ESLint: Para integrar Prettier y ESLint, asegurando una experiencia de formateo consistente.
• Tailwind CSS IntelliSense: Para obtener autocompletado y documentación en tiempo real para clases de Tailwind CSS.

Comandos Personalizados

Estos comandos estan hechos para facilitar el proceso del desarrollo en las extensiones de Auravant:

• npm run build:zip: Este comando ejecuta el comando build y zippea los archivos que están dentro de la carpeta dist con todos los archivos necesarios para el deploy. Este archivo dist.zip es el que vas a necesitar para agregar tu extensión a la plataforma.
• npm run format: Este comando utiliza Prettier para formattear todo el código del proyecto. Al ejecutarlo revisa todos los archivos y aplica el formato especificado en la config. Esto ayuda a mantener el código limpio para todos.
• npm run lint: Este comando utiliza ESLint para analizar el código en busca de errores y problemas de estilo. El comando está configurado para revisar todos los archivos con extensiones .ts y .tsx, reportar directivas de desactivación no utilizadas y asegurarse de que no haya advertencias (--max-warnings 0). Esto ayuda a garantizar que el código siga las reglas de calidad y estilo establecidas en el proyecto.

React-router-dom

No te olvides que las extensiones son un iframe, por lo que vas a necesitar utilizar HashRouter en vez de BrowserRouter.

Hecho con ❤️ por Nacho.