# ¿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:

<div align="left"><figure><img src="https://3368453466-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtxuPnaaHDcmSjTmrlrko%2Fuploads%2FhXLp7bAoLlJsPCIeaNdl%2FReactCpanel01.png?alt=media&#x26;token=4acc7190-4dda-430d-a2e4-b4b2c76d3174" alt=""><figcaption></figcaption></figure></div>

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

2. 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).&#x20;
* 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.

<div align="left"><figure><img src="https://3368453466-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtxuPnaaHDcmSjTmrlrko%2Fuploads%2FWK6FukMGQCkxAs7hl1Vd%2FReactCpanel02.png?alt=media&#x26;token=548540bb-d748-4451-a1fc-8a814b731459" alt=""><figcaption></figcaption></figure></div>

3. 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.**

{% hint style="info" %}
Es importante que subas sólo el contenido del directorio **build** y no el propio directorio o no funcionará el sitio web.&#x20;
{% endhint %}

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

<div align="left"><figure><img src="https://3368453466-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtxuPnaaHDcmSjTmrlrko%2Fuploads%2FYDja8SXhKDeaF0iJqnM4%2FReactCpanel03.png?alt=media&#x26;token=d82e6c47-34bd-4d18-9229-b9cf44f7ad6e" alt=""><figcaption></figcaption></figure></div>

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

<div align="left"><figure><img src="https://3368453466-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtxuPnaaHDcmSjTmrlrko%2Fuploads%2FYmvynUhIc9jwuYo7BS7R%2FReactCpanel04.png?alt=media&#x26;token=b6ecbc6a-7317-4d04-a4fc-adcd3f69e226" alt=""><figcaption></figcaption></figure></div>

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

<div align="left"><figure><img src="https://3368453466-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtxuPnaaHDcmSjTmrlrko%2Fuploads%2F1EPifoN6DGzGLXSsVvcm%2FReactCpanel03.png?alt=media&#x26;token=d3483e8c-ab86-4ebf-9ea6-e3f12a13cfce" alt=""><figcaption></figcaption></figure></div>

4. 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! <a href="#youre-super-done" id="youre-super-done"></a>

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