dcorregidor_react_vite_template v1.0.0

00 LEGACY TEMPLATE

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

This, template use this plugin:

• @vitejs/plugin-react-swc uses SWC for Fast Refresh

01 PRETTIERC && ESLINT

Para trabajar con este proyecto de forma uniforme, hay que tener instalado y configurado en VS CODE Prettierc y ES-Lint y asegurar que prettierc es el editor de ts, tsx, js, jsx habilitado por defecto.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
    // other rules...
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        project: ['./tsconfig.json', './tsconfig.node.json'],
        tsconfigRootDir: __dirname,
    },
};

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

02 CONFIGURACIÓN DE MSAL

Registro de una Aplicación en Azure Active Directory

Sigue estos pasos para registrar tu aplicación en Azure Active Directory (Azure AD): Los datos que tiene son de prueba y en cualquier momento desaparecerán.

1. Inicia sesión en el portal de Azure

Ve a https://portal.azure.com e inicia sesión con tu cuenta de Azure.

2. Registra tu aplicación

• En el panel de la izquierda, haz clic en "Azure Active Directory".
• Luego, en el menú de Azure AD, haz clic en "App registrations".
• Haz clic en "New registration" en la parte superior.
• Ingresa un nombre para tu aplicación, selecciona el tipo de cuentas que podrán usar tu aplicación y proporciona la URL de redirección (por lo general, es la URL de tu aplicación seguida de /auth).
• Haz clic en "Register".

3. Obtén el ID de la aplicación y el ID del inquilino

Una vez que tu aplicación esté registrada, se te redirigirá a la página de la aplicación. Aquí, puedes obtener el "Application (client) ID" y el "Directory (tenant) ID". Necesitarás estos para tu configuración de MSAL.

4. Crea una nueva clave secreta de la aplicación

• En la página de tu aplicación, haz clic en "Certificates & secrets" en el menú de la izquierda.
• Haz clic en "New client secret", proporciona una descripción y selecciona una duración. Luego, haz clic en "Add".
• Copia la clave secreta generada. Necesitarás esto para que el backend se pueda identificar en nombre de la app.

5. Configura los permisos de la API

• En la página de tu aplicación, haz clic en "API permissions" en el menú de la izquierda.
• Haz clic en "Add a permission", selecciona las APIs que tu aplicación necesita acceder y luego los permisos que necesita.

6. Crea un scope

• En la página de tu aplicación, haz clic en "Expose an API" en el menú de la izquierda.
• Haz clic en "+ Add a scope".
• Rellena los campos necesarios. En el campo "Scope name", puedes poner algo como access_as_user. Este será el scope que usarás en tu loginRequest.
• Haz clic en "Add scope".

Una vez que hayas creado el scope, puedes usarlo en tu loginRequest en tu aplicación de React. Por ejemplo, tu loginRequest podría verse así:

const loginRequest = {
    scopes: ['api://<Application (client) ID>/access_as_user'],
};

03 ASSETS

1 FONTS

Tienes que descargar las fuentes del repo y declararlas de forma global para que puedan usarse, en este caso se está haciendo en la hoja de estilos de bodyContainer y las fuentes están en la carpeta public/assets/fonts

2 IMAGES

Acuerdate de sustituir el logo y el favicon por el de tu aplicación

3 ICONOGRAFY

Los iconos pertenecen al paquete fluentui/react-icons

TODO

1 AÑADIR EL i18n y/o sacar literales a constantes

2 Maquetar componentes base

3 Enganchar con las APIS y retirar los mocks