¿Cómo subir una aplicación ReactJS a mi cuenta en Plesk?

Para poder ver, desde tu dominio, una página web hecha en ReactJS seguí estos pasos:

1. Agregá el Homepage a tu archivo package.json

Abrí tu aplicación de React. Luego, abrí el archivo package.json y agregá un atributo "homepage" de la siguiente manera:

El formato debe ser "homepage": "https://midominio.com"

1. Creá el build de tu aplicación

• En el directorio raíz de tu aplicación, ejecutá el comando yarn install para instalar las dependencias actualizadas.

• Una vez que esto haya finalizado, ejecutá el comando yarn build (npm install y npm build también funcionan).

• Notarás que esto crea un nuevo directorio en tu proyecto llamado build. El directorio build es, básicamente, una versión comprimida de tu programa que contiene todo lo que tu navegador necesita para identificar y ejecutar tu aplicación.

1. Subí el contenido del directorio build al directorio principal de sitio web, en cuenta de hosting.

El siguiente paso es subir el contenido del directorio build, que creaste en el paso anterior, al directorio principal de tu sitio web. Usando el Administrador de Archivos del panel de control, o ingresando vía FTP. En el caso de una cuenta cPanel, el directorio sería public_html.

En el caso de una cuenta Plesk, el directorio sería httpdocs.

Es importante que subas sólo el contenido del directorio build y no el propio directorio o no funcionará el sitio web.

Este es un ejemplo de la estructura de directorios de una cuenta en cPanel, donde verás el directorio public_html.

Y este es un ejemplo de la estructura de directorios de una cuenta en Plesk, donde verás el directorio httpdocs.

Este es un ejemplo de los archivos típicos que verás en tu directorio build, que deberás subir al public_html, httpdocs o el directorio principal de tu página web.

1. Creá el archivo .htaccess

Para que las rutas funcionen en tu aplicación de React, necesitarás agregar un archivo .htaccess. Debés crear este archivo en la carpeta public_html, httpdocs o el directorio principal de tu página web, al mismo nivel que el contenido del directorio build que subiste anteriormente. Editá el archivo e inserta la siguiente información básica:

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

Luego, grabá los cambios en el archivo.

¡Eso es todo!

Ahora podrás usar tu dominio en el navegador y deberías ver tu aplicación web completamente funcional.