# How to upload a ReactJS application to my account in Plesk?

#### To be able to view a webpage made in ReactJS from your domain, follow these steps:

1. Add the **`Homepage`** to your **package.json** file

Open your React application. Then, open the **package.json** file and add a "homepage" attribute as follows:

<div align="left"><figure><img src="/files/By9mvtym3WsQqeyO4MCK" alt=""><figcaption></figcaption></figure></div>

The format should be `"homepage": "https://yourdomain.com"`

2. Create the **build** of your application

* In the root directory of your application, run the command **`yarn install`** to install the updated dependencies.
* Once this is completed, run the command **`yarn build`** (**`npm install`** and **`npm build`** also work).
* You will notice that this creates a new directory in your project called **build**. The **build** directory is essentially a compressed version of your program that contains everything your browser needs to identify and run your application.

<div align="left"><figure><img src="/files/ejoO0L4D0Ayg9eEdcXYS" alt=""><figcaption></figcaption></figure></div>

3. Upload the contents of the **build** directory to the main website directory on your hosting account.

The next step is to upload the contents of the **build** directory, which you created in the previous step, to the main directory of your website. You can do this using the File Manager in the control panel or by accessing via FTP.\
\
For a **cPanel** account, the directory would be **public\_html**.

For a **Plesk** account, the directory would be **httpdocs**.

{% hint style="info" %}
It's important to upload only the contents of the **build** directory and not the directory itself, or the website will not function properly.
{% endhint %}

Here is an example of the directory structure in a cPanel account, where you will see the **public\_html** directory.

<div align="left"><figure><img src="/files/FKgcWSpVDDgFpDJC278c" alt=""><figcaption></figcaption></figure></div>

And this is an example of the directory structure in a **Plesk** account, where you will see the **httpdocs** directory.

<div align="left"><figure><img src="/files/mORV2222TMPt5FTZ0Oag" alt=""><figcaption></figcaption></figure></div>

This is an example of the typical files you will see in your **build** directory, which you should upload to **public\_html**, **httpdocs**, or the main directory of your website.

<div align="left"><figure><img src="/files/QbTLlNlfXOZBG7OQ4ZzE" alt=""><figcaption></figcaption></figure></div>

4. Create the **.htaccess** file

To make the routes work in your React application, you will need to add an **.htaccess** file.\
You should create this file in the **public\_html**, **httpdocs**, or the main directory of your website, at the same level as the contents of the **build** directory you uploaded earlier.\
\
Edit the file and insert the following basic information:

```
<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>
```

Then, save the changes to the file.

### That's it! <a href="#youre-super-done" id="youre-super-done"></a>

Now you should be able to use your domain in the browser and see your web application fully functional.


---

# 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://help.sitioshispanos.com/menu-principal/guias/web-hosting/instalacion-de-wordpress-y-cms/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.
