Cómo configurar React + Typescript en una aplicación laravel con inertia

Hernán Arica — Thu, 09 May 2024 09:39:53 +0000

Instalar dependencias de ts.
Crear archivo tsconfig.json y su configuración.
Crear el archivo de definición para vite/client.
Importante!

Lo primero

Doy por sentado que ya tenés configurado inertia con react para un proyecto laravel.

Instalar dependencias de ts

npm install -D typescript @types/react @types/react-dom

Si estas usando docker, recordá anteponer el "sail"

Crear tsconfig.json

touch tsconfig.json
En esta parte la configuración es más a gusto, peor te paso la mía

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "allowImportingTsExtensions": true,
    "paths": {
      "@/*": ["./resources/js/*"]
    }
  },
  "include": ["resources/js/**/*.ts", "resources/js/**/*.tsx", "resources/js/**/*.d.ts", "vite.config.ts"],
  "exclude": ["node_modules"]
}

Crear el archivo de definición

cd ./recources/js
echo "/// <reference types="vite/client" />" > vite-env.d.ts

Al momento de crearlo también hay que agregarle el comentario especial

Importante

Al hacer un npm run build, tenés que importar el build con un type=module, ejemplo:
<script type="module" src="{{ asset("build/assets/app-tX21Cx8Q.js") }}"></script>

Sin nada más que decir, espero que les sea de ayuda esta guía.

React router + Manejo de roles + Autenticación

Hernán Arica — Fri, 16 Jun 2023 19:02:41 +0000

Introducción

Si eres de las personas que necesitan realizar una aplicación en la cual hay un sistema de autenticación y necesitas mostrar "X" vista dependiendo del rol, este es tu lugar.
Lo primero es decirte que tecnologias uso en el ejemplo:

React 18.2.0
react-router-dom 6.12.0
zustand 4.3.8

Lo primero

No voy a ahondar mucho en el proceso de login, manejo del estado global etc, ire directo al grano, en este ejemplo tenemos un usuario que cuando se general el login, se popula con sus respectivos datos, y al hacer logout, ese usuario queda en null, la info del usuario se guarda en localStorage y se recupera al momento de inicializar el manejador de estado global, asi tendremos disponible de primera mano su información.

Estructura del proyecto (De ejemplo)

Dentro de la carpeta src, tenemos otra llamada router, en router pondremos todos nuestros routers, por ejemplo:

Dentro de cada archivo armaremos nuestro router para cada rol, con createBrowserRouter() y generamos la instancia del RouterProvider pasandole nuestras routes como en el ejemplo con AdminRoutes:

Manejo del rol

Por ultimo en la carpeta routes, crear un archivo AppRouter, el cual se encargará de mostrar el rol correspondiente de un usuario, segun su rol, gracias a que con la ayuda de un manejador de estado global, ya tenemos esa info de antemano:

Como pueden ver, si no hay role definido, muestra el PublicRouter el cual contiene en mi caso, solo un router con una vista de login. Este componente AppRouter deben montarlo en el componente raiz, main.

Sin nada más que decir, espero que les sea de ayuda este ejemplo.

DEV Community: Hernán Arica

Cómo configurar React + Typescript en una aplicación laravel con inertia

Lo primero

Instalar dependencias de ts

Crear tsconfig.json

Crear el archivo de definición

Importante

React router + Manejo de roles + Autenticación

Introducción

Lo primero

Estructura del proyecto (De ejemplo)

Manejo del rol