Cómo Instalar React.js en cPanel: Guía 2024

Publicado: 2024-09-01
Tabla de contenido
  • Requisitos previos
  • Paso 1: prepare su aplicación React.js
  • Paso 2: Configure su entorno cPanel
  • Paso 3: configurar los ajustes del servidor
  • Paso 4: Finalización y prueba
  • Solución de problemas
  • Conclusión

React.js se ha convertido en una de las bibliotecas de JavaScript más populares para crear interfaces de usuario dinámicas e interactivas. Si bien se usa comúnmente con marcos de backend como Node.js, muchos desarrolladores buscan implementar sus aplicaciones React.js en entornos de alojamiento compartido que usan cPanel, un panel de control popular para administrar cuentas de alojamiento web.

Este artículo lo guiará a través del proceso de instalación e implementación de una aplicación React.js usando cPanel, incluso si su proveedor de alojamiento no atiende específicamente a marcos de JavaScript.

También puedes leer: Los 7 mejores hosting para aplicaciones React 2024 (comparados)

Requisitos previos

Antes de sumergirse en el proceso de instalación, existen algunos requisitos previos que debe cumplir:

  1. Una aplicación React.js lista para implementar : asegúrese de que su aplicación React esté completa y lista para producción. Esto significa que todo el trabajo de desarrollo está finalizado y usted está listo para crear una versión de la aplicación que se pueda ofrecer a los usuarios.
  2. Acceso a cPanel : necesita acceso a cPanel, que proporciona su servicio de alojamiento web. La mayoría de los proveedores de hosting compartido ofrecen cPanel como parte de su servicio. (Recomendamos Hostinger con nuestra oferta especial usando el código de cupón “ Codeless ”)
  3. Un nombre de dominio : un dominio o subdominio registrado donde implementará su aplicación React. Si aún no lo ha configurado, puede usar un dominio existente o crear un subdominio a través de cPanel.

Paso 1: prepare su aplicación React.js

Generar una compilación de producción

El primer paso para implementar su aplicación React.js en cPanel es crear una versión de producción de su aplicación. Esta compilación está optimizada para el rendimiento, lo que garantiza que se ejecute de manera eficiente en la web. Siga estos pasos en su computadora local.

  1. Abra Terminal : navegue hasta el directorio de su proyecto React usando su terminal o símbolo del sistema.
  2. Ejecute el comando de compilación : npm run build Si está utilizando Yarn como administrador de paquetes, usaría: yarn build Este comando genera una carpeta build en el directorio de su proyecto. La carpeta build contiene todos los archivos estáticos necesarios para ejecutar su aplicación, incluidos los archivos HTML, CSS y JavaScript.

Vista previa de la compilación (opcional)

Antes de la implementación, es una buena idea obtener una vista previa de la compilación de producción localmente para garantizar que todo funcione correctamente. Puedes hacer esto usando una herramienta de servidor simple:

  1. Instalar Serve globalmente : npm install -g serve
  2. Sirve la compilación : serve -s build Este comando iniciará un servidor local y entregará tu aplicación desde el directorio build , permitiéndote obtener una vista previa de ella en tu navegador.

Paso 2: Configure su entorno cPanel

Una vez que su aplicación React esté lista para su implementación, debe configurar su entorno cPanel.

Crear un subdominio (opcional)

Si desea que se pueda acceder a su aplicación React a través de un subdominio (por ejemplo, react.yourdomain.com ), debe crear uno en cPanel:

  1. Inicie sesión en cPanel : utilice el portal de inicio de sesión de su proveedor de hosting para acceder a cPanel.
  2. Navegue a Subdominios : en la sección Dominios, haga clic en "Subdominios".
  3. Cree un nuevo subdominio : ingrese el nombre deseado para su subdominio y especifique el directorio raíz del documento. Si deja la configuración predeterminada, cPanel creará un nuevo directorio en public_html con el nombre de su subdominio.

Cargue los archivos de compilación

Con la compilación de producción lista, ahora puede cargarla en su servidor.

  1. Acceda al Administrador de archivos : en cPanel, ubique el "Administrador de archivos" en la sección "Archivos".
  2. Navegue hasta el directorio deseado : si creó un subdominio, navegue hasta el directorio correspondiente (por ejemplo, public_html/react ). Si está implementando en el dominio principal, use el directorio public_html .
  3. Cargue la carpeta de compilación :
    • Primero, comprime la carpeta build en tu máquina local en un archivo ZIP.
    • Utilice el botón "Cargar" en el Administrador de archivos para cargar este archivo ZIP en el directorio deseado.
    • Una vez cargado, haga clic derecho en el archivo y seleccione "Extraer" para descomprimir el contenido.

Paso 3: configurar los ajustes del servidor

Después de cargar los archivos de compilación, es posible que deba configurar algunas configuraciones del servidor, especialmente si su aplicación React usa enrutamiento del lado del cliente con React Router.

Configurar .htaccess (opcional)

Si su aplicación utiliza React Router, que se basa en la API de historial HTML5 pushState , su servidor debe estar configurado para manejar las solicitudes correctamente. Esto es particularmente importante si los usuarios pueden navegar directamente a rutas distintas a la página de inicio.

  1. Localice o cree .htaccess :
    • En su directorio public_html o subdominio, verifique si hay un archivo .htaccess .
    • De lo contrario, cree un nuevo archivo llamado .htaccess .
  2. Agregar reglas de enrutamiento :
    • Abra el archivo .htaccess y agregue la siguiente configuración:bashCopiar código Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]
    Esta configuración garantiza que todas las solicitudes se enruten a través del archivo index.html , que es esencial para aplicaciones de una sola página como las creadas con React.

Paso 4: Finalización y prueba

Con todo cargado y configurado, el siguiente paso es finalizar la implementación y garantizar que todo funcione como se esperaba.

Verificar permisos de archivos

Asegúrese de que los archivos y directorios tengan los permisos correctos para que el servidor web pueda acceder a ellos. Generalmente, los directorios deben tener permisos establecidos en 755 y los archivos en 644 .

Pruebe la implementación

Visite su dominio o subdominio (por ejemplo, react.yourdomain.com ) en un navegador web para verificar que su aplicación React esté funcionando sin problemas. Verifique todas las páginas y funciones para asegurarse de que todo funcione correctamente.

Si encuentra algún problema, las herramientas de desarrollo del navegador pueden resultar útiles para diagnosticar problemas. Además, los registros de errores de cPanel pueden proporcionar información sobre problemas del lado del servidor.

Solución de problemas

La implementación de una aplicación React en cPanel ocasionalmente puede generar problemas. A continuación se muestran algunos problemas comunes y sus soluciones:

  • Errores de enrutamiento : si navegar a diferentes páginas de su aplicación genera errores 404, asegúrese de que su archivo .htaccess esté configurado correctamente para manejar el enrutamiento del lado del cliente.
  • Errores de archivo no encontrado : verifique que todos los archivos de la carpeta build se hayan cargado correctamente y que estén en el directorio correcto de su servidor.
  • Permisos de archivos incorrectos : si los archivos no se cargan, verifique que los permisos de archivos estén configurados correctamente ( 755 para directorios y 644 para archivos).
  • Problemas de almacenamiento en caché : a veces, es posible que los cambios no aparezcan inmediatamente debido al almacenamiento en caché. Borre la memoria caché de su navegador o intente acceder al sitio en modo incógnito para ver si el problema persiste.

Conclusión

Implementar una aplicación React.js en un servidor alojado en cPanel puede parecer un desafío al principio, especialmente si está acostumbrado a procesos de implementación más automatizados con servicios como Vercel o Netlify o consulta nuestro artículo: Los 10 mejores proveedores de alojamiento Node.js de 2024 ( Barato y gratuito). Sin embargo, si sigue los pasos descritos en esta guía, podrá poner en funcionamiento con éxito su aplicación React en cPanel.

Este proceso incluye preparar su aplicación React para producción, configurar su entorno cPanel, configurar los ajustes necesarios del servidor y solucionar cualquier problema que surja. Una vez completada, su aplicación React.js estará activa y accesible para el mundo a través de su dominio o subdominio.

A medida que adquiera más experiencia, podrá explorar temas más avanzados, como la integración de servicios backend, la configuración de canales de implementación continua u optimizar aún más el rendimiento. ¡Por ahora, disfruta compartiendo tus proyectos de React con el mundo!