Tiempo de lectura: < 1 minuto Today I’m going to share with you a much-needed Docker Compose setup that will allow you to deploy a fully functional website using Nginx and React with Next.js in just a few minutes. The first thing you need to do is create the docker-compose.yml file: version: ‘3’ services: nextjs-app: build: context: . ports: – “3000:3000” … Read more
Tiempo de lectura: < 1 minuto Today we will learn how to create a build (with the folder) using React Next.js. The first thing we need to do is go to the next.config.mjs file which by default has: /** @type {import(‘next’).NextConfig} */ const nextConfig = {}; export default nextConfig; We will change it to: /** @type {import(‘next’).NextConfig} */ const nextConfig = … Read more
Tiempo de lectura: 2 minutos To deploy the web application we have created with React and Next.js, we will follow these steps: Prepare the application for production: Run npm run build in your Next.js project to build the application. This will generate a build folder containing the optimized production files. npm run build Configure Nginx: You need to configure Nginx … Read more
Tiempo de lectura: 2 minutos Today we are going to learn how to create a React project with Next.js and run it. The first thing we are going to do is to create a new project with this command: npx create-next-app my_app Now it will ask about the configuration. I have chosen and recommend this one: Use TypeScript since it … Read more
Tiempo de lectura: < 1 minuto Today we are going to solve the error Unknown compiler option ‘allowImportingTsExtensions’ that appears when trying to analyze a TypeScript project with SonarQube and React. The error is found in tsconfig.json of the React project, it is fixed by removing the following line: allowImportingTsExtensions”: true, DevCodeLightdevcodelight.com
Tiempo de lectura: < 1 minuto Today we are going to learn how to solve the error Argument for ‘–moduleResolution’ option must be: ‘node’, ‘classic’, ‘node16’, ‘nodenext’.; when trying to analyze a React project with TypeScript using Sonarqube. This error is located in the tsconfig.json file, as it includes: “moduleResolution”: “bundle”, To fix it, we will set: “moduleResolution”: “node”, DevCodeLightdevcodelight.com
Tiempo de lectura: 2 minutos Today we are going to learn how to create a WordPress theme using React, TypeScript, and Frontity. Additionally, we will add Vite underneath, which will allow us to deploy our app faster. Frontity is the framework that allows you to connect your React application with WordPress, leveraging its REST API or GraphQL to fetch and … Read more
Tiempo de lectura: < 1 minuto Today we’re going to learn how we can add a YouTube video in React. The first thing we need to do is to add this dependency: npm install react-youtube –save Once installed, let’s create the component responsible for opening the YouTube video. We’ll call it YoutubePlayer.tsx import React from ‘react’; import YouTube, { YouTubeProps } … Read more
Tiempo de lectura: 2 minutos Today we are going to learn how we can set up ESLint for a project that uses React and React Native with JavaScript or TypeScript. This will allow us to recognize errors that appear in our code and configure the type of error we want. First of all, we need to install ESLint: npm install … Read more
Tiempo de lectura: 2 minutos Today I’m going to share a container setup for React based on Nginx. To do this, we are going to create this docker-compose.yml version: ‘3.1’ services: nginx_frailstop: build: . container_name: nginx_frailstop restart: unless-stopped ports: – “80:80” – “443:443” volumes: – ./dist:/usr/share/nginx/html – ./config/nginx/cache/:/var/cache/nginx/ – ./config/nginx/sites/:/etc/nginx/sites-enabled/ – ./config/nginx/config/nginx.conf:/etc/nginx/nginx.conf Now we are going to create our Dockerfile … Read more
