Docker Compose to Deploy React with Next.js in Production with Nginx + Next.js

Docker Compose to Deploy React with Next.js in Production with Nginx + Next.js

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

Create Build with React and Next.js

Create Build with React and Next.js

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

How to Deploy React with Next.js on an Nginx Server

How to Deploy React with Next.js on an Nginx Server

Tiempo de lectura: 2 minutos To deploy the web application we have created with React and Next.js, we will follow these steps: run npm build Make sure to replace your-domain.com with your actual domain and /path/to/your/application/build with the actual path to your Next.js application’s build folder. sudo systemctl restart nginx It is important to note that Nginx will only serve … Read more

Create a project with React and Next.js

Create a project with React and Next.js

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: npm 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

Fix error: Unknown compiler option ‘allowImportingTsExtensions’. Using Sonarqube with React and TypeScript

Fix error: Unknown compiler option ‘allowImportingTsExtensions’. Using Sonarqube with React and TypeScript

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

Argument for ‘moduleResolution’ option must be: ‘node’, ‘classic’, ‘node16’, or ‘nodenext’.

Argument for ‘moduleResolution’ option must be: ‘node’, ‘classic’, ‘node16’, or ‘nodenext’.

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

Create a WordPress Theme Using React with Frontity, TypeScript, and Vite

Create a WordPress Theme Using React with Frontity, TypeScript, and Vite

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

Implementing Google Sign-in in React Native (also compatible with Expo)

Implementing Google Sign-in in React Native (also compatible with Expo)

Tiempo de lectura: 5 minutos Today we are going to learn how to implement Google Login with Google Sign for React Native and that is also compatible with Expo. We are going to use the library react-native-google-signin/google-signin First let’s install the necessary library: npx expo install @react-native-google-signin/google-signin Important, for the library to work you must have a native app. (Here … Read more

Adding YouTube Video in React

Adding YouTube Video in React

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 You can customize the options by adding playerVars: reference. … Read more

Setting up ESLint for React or React Native project with JavaScript or TypeScript

Setting up ESLint for React or React Native project with JavaScript or TypeScript

Tiempo de lectura: 3 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. Returns only the HTML translated, without any additions.HTML: First of … Read more