En este artículo te mostraremos la manera de subir a tu hosting una aplicación creada en React.js utilizando npm.
Crearemos desde cero una aplicación de pruebas y la subiremos al servidor.
Creación de app de pruebas en tu entorno local (tu PC)
Es necesario que tengas previamente instalado Node.js en tu PC el cual incluye el comando "npm".
- En tu PC de desarrollo, instala "npx" ejecutando el siguiente comando desde una consola (en Windows: CMD o PowerShell, en Linux o Mac: Terminal):
npm install -g npx
- Crea una aplicación de pruebas, ejecutando:
npx create-react-app mi-aplicacion-react
- Cuando termine verás este mensaje:
- Ingresa al directorio de la aplicación:
cd mi-aplicacion-react
- Para probarla en tu PC, puedes ejecutar el siguiente comando que la compilará y creará un servidor local usando Node.js para pruebas:
npm start
- Si todo salió bien, se abrirá tu explorador web en la URL http://localhost:3000 con el siguiente contenido (verifica el puerto en el output del comando anterior):
Deploy en servidor web
Una vez que hayas creado tu aplicación en tu PC y estés listo para subirla al servidor, sigue estos pasos:
- En tu PC local ejecuta el siguiente comando dentro de la carpeta de tu aplicación. Esto compilará la aplicación para luego poder subirla al entorno en producción (tu hosting):
npm run build
Este comando se ejecuta siempre en el entorno de desarrollo local (tu PC) y puede que falle si lo ejecutas directamente en el servidor, ya que es posible que no tenga suficientes recursos tu cuenta para ello. - Cuando termine verás una nueva carpeta llamada "build":
y el contenido se verá algo así: - Ingresa a la carpeta y comprime su contenido en un archivo .ZIP (en este ejemplo llamado "build.zip"):
- Sube el contenido de esta carpeta al directorio web raíz "public_html" de tu hosting. Puedes usar el Administrador de archivos de cPanel.
- Una vez subido, dentro del administrador de archivos haz clic derecho sobre el archivo ZIP subido y haz clic en "Extract" para extraer el contenido:
- Si todo salió bien, verás una estructura similar a la siguiente:
Los archivos XXX.shtml son las páginas de error personalizado que ya vienen en tu hosting por defecto. No debes preocuparte de ellos. - Si utilizas "React Router" es posible que debas crear o editar el archivo ".htaccess" en el directorio web raíz "public_html" de tu cuenta y agregar al principio el siguiente contenido:
<IfModule mod_rewrite.c>
Si tienes una subcarpeta con una aplicación de Node.js u otra subcarpeta ajena a React, deberás crearle un archivo ".htaccess" dentro de ésta con la sentencia "RewriteEngine off" para que sea ignorada por React Router y puedas lograr acceder a dicha subcarpeta correctamente.
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule> - ¡Listo! Ahora ingresa a tu dominio y si todo salió bien, tu aplicación estará lista:
Recuerda que tu dominio debe estar registrado y delegado a tu hosting para que pueda ser accesible vía web.
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.