Como desplegar React con Next.js en un servidor NGINX

Como desplegar React con Next.js en un servidor NGINX

Tiempo de lectura: 2 minutos Para desplegar la web que hemos creado con React y Next.js vamos a seguir estos pasos: Asegúrate de reemplazar tu-domino.com con tu dominio real y /ruta/a/tu/aplicacion/build con la ruta real de la carpeta build de tu aplicación Next.js. Es importante tener en cuenta que Nginx solo se encargará de servir los archivos estáticos generados por … Leer más

Crear un proyecto con React y Next.js

Crear un proyecto con React y Next.js

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo crear un proyecto React con Next.js y ejecutarlo. Lo primero que vamos a hacer es crear un nuevo proyecto con este comando: Ahora preguntará sobre la configuración. Yo he elegido y recomiendo esta: Usar TypeScript ya que nos va a permitir utilizar tipado en JavaScript, nos solucionará y agilizará el … Leer más

Solucionar error: Unknown compiler option ‘allowImportingTsExtensions’. Usdando Sonarqube con React y TypeScript

Solucionar error: Unknown compiler option ‘allowImportingTsExtensions’. Usdando Sonarqube con React y TypeScript

Tiempo de lectura: < 1 minuto Hoy vamos a solucionar el error Unknown compiler option ‘allowImportingTsExtensions’ que aparece cuando intentamos analizar un proyecto TypeScript con SonarQube y React. El error se encuentra en tsconfig.json del proyecto de React, se soluciona eliminando la siguiente línea: isMa Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor … Leer más

Solucionar error Argument for ‘–moduleResolution’ option must be: ‘node’, ‘classic’, ‘node16’, ‘nodenext’.; en SonarQube con React TypeScript

Solucionar error Argument for ‘–moduleResolution’ option must be: ‘node’, ‘classic’, ‘node16’, ‘nodenext’.; en SonarQube con React TypeScript

Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo solucionar el error Argument for ‘–moduleResolution’ option must be: ‘node’, ‘classic’, ‘node16’, ‘nodenext’.; cuando intentamos analizar un proyecto React con TypeScript usando Sonarqube. Este error se localiza en el archivo tsconfig.json, ya que se incluye: Para solucionarlo pondremos: isMa Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y … Leer más

Crea un tema para WordPress usando React con Frontity TypeScript y Vite

Crea un tema para WordPress usando React con Frontity TypeScript y Vite

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos crear un tema para WordPress usando React, TypeScript y Frontity. Además, vamos a añadir Vite por debajo que nos permitirá desplegar más rápido nuestra APP. Frontity es el framework que te permite conectar tu aplicación de React con WordPress, aprovechando su API REST o GraphQL para obtener y mostrar … Leer más

Añadir vídeo de YouTube en React

Añadir vídeo de YouTube en React

Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos añadir un vídeo de YouTube en React. Lo primero que tenemos que hacer es añadir esta dependencia: Una vez instalada vamos a crear el componente que se va a encargar de abrir el vídeo de YouTube. La llamamos YoutubePlayer.tsx Puedes personalizar las opciones añadiendo playerVars: referencia. Y este es … Leer más

Configurar ESLint para proyecto React o React Native con JavaScript o TypeScript

Configurar ESLint para proyecto React o React Native con JavaScript o TypeScript

Tiempo de lectura: 3 minutos Hoy vamos a aprender cómo podemos configurar ESLint para un proyecto que utiliza React y React Native y JavaScript o TypeScript. Nos permitirá reconocer los errores que aparecen en nuestro código y configurar el tipo de error que queremos. Lo primero de todo es instalar ESLint: Una vez instalado, lo instalamos en nuestro proyecto. Y … Leer más

Contenedor Nginx para React con Docker Compose

Contenedor Nginx para React con Docker Compose

Tiempo de lectura: 2 minutos Hoy os voy a compartir una configuración de contenedor para React basado en Nginx. Para ello vamos a crear este docker-compose.yml Ahora vamos a crear nuestro Dockerfile Finalmente, crearemos las carpetas necesarias: El fichero nginx.conf debe contener: Recuerda que la carpeta de distribución de React generada con Vite está dentro de dist, debes ponerla en … Leer más

Solucionar error de rutas cuando refrescas con F5 en React (react-router-dom) usando nginx

Solucionar error de rutas cuando refrescas con F5 en React (react-router-dom) usando nginx

Tiempo de lectura: < 1 minuto Hoy os comparto una solución para configurar correctamente el fichero nginx.conf y hacerlo compatible con la gestión de rutas de react-router-dom. Para solucionar el error, tenemos que añadir la línea try_files $uri $uri/ /index.html; dentro del archivo nginx.conf isMa Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor … Leer más

Generar build de desarrollo con React Vite

Generar build de desarrollo con React Vite

Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos generar un build de desarrollo con React Vite. Esto generará la carpeta dist con configuración de desarrollo. Para ello tenemos que ir al archivo packcage.json y añadir este comando dentro de «scripts»: { Y para poder utilizarlo tenemos que utilizar este comando: De esta forma generaremos el build en … Leer más