# ¿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="/files/By9mvtym3WsQqeyO4MCK" 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="/files/ejoO0L4D0Ayg9eEdcXYS" 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="/files/FKgcWSpVDDgFpDJC278c" 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="/files/mORV2222TMPt5FTZ0Oag" 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="/files/QbTLlNlfXOZBG7OQ4ZzE" 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ayuda.sitioshispanos.com/menu-principal/guias/paneles-de-control/panel-de-control-plesk/instalar-wordpress-y-reactcs/como-subir-mi-aplicacion-reactjs-a-mi-cuenta-de-hosting.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.