Cómo Instalar React.js en cPanel: Guía 2024
Publicado: 2024-09-01- 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:
- 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.
- 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 ”)
- 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.
- Abra Terminal : navegue hasta el directorio de su proyecto React usando su terminal o símbolo del sistema.
- 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 carpetabuild
en el directorio de su proyecto. La carpetabuild
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:
- Instalar Serve globalmente :
npm install -g serve
- Sirve la compilación :
serve -s build
Este comando iniciará un servidor local y entregará tu aplicación desde el directoriobuild
, 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:
- Inicie sesión en cPanel : utilice el portal de inicio de sesión de su proveedor de hosting para acceder a cPanel.
- Navegue a Subdominios : en la sección Dominios, haga clic en "Subdominios".
- 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.
- Acceda al Administrador de archivos : en cPanel, ubique el "Administrador de archivos" en la sección "Archivos".
- 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 directoriopublic_html
. - 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.
- Primero, comprime la carpeta
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.
- 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
.
- En su directorio
- Agregar reglas de enrutamiento :
- Abra el archivo
.htaccess
y agregue la siguiente configuración:bashCopiar códigoOptions -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]
index.html
, que es esencial para aplicaciones de una sola página como las creadas con React. - Abra el archivo
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 y644
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!
Ludjon, cofundador de Codeless, posee una profunda pasión por la tecnología y la web. Con más de una década de experiencia en la construcción de sitios web y el desarrollo de temas de WordPress ampliamente utilizados, Ludjon se ha establecido como un consumado experto en el campo.