> ## Documentation Index
> Fetch the complete documentation index at: https://docs.squarecloud.app/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Host React Applications

> Learn how to deploy your React application on Square Cloud.

export const PortNote = ({lang}) => {
  if (lang == 'pt-br') {
    return <Note>
            <b>Qual porta devo usar para o meu servidor?</b><br />
            Você deve usar a porta <b>80</b> para o seu servidor. A porta 80 é a porta padrão para tráfego HTTP; a Square Cloud a encaminha para 443 (HTTPS) para estabelecer uma conexão segura.<br />
            Certifique-se de configurá-la antes de compactar e enviar seu projeto.
        </Note>;
  }
  return <Note>
            <b>What port should I use for my server?</b><br />
            You should use port <b>80</b> for your server. Port 80 is the default port for HTTP traffic, which is handled by Square Cloud to route it to 443, HTTPS, for a secure connection.<br />
            Make sure to configure it before compressing and uploading your project.
        </Note>;
};

export const RecommendedPlan = ({lang, plan, tier, cpu, appType}) => {
  const url = `https://squarecloud.app/${lang}/pay?plan=${plan.toLowerCase()}&tier=${tier}`;
  if (lang == 'en') {
    return <Note>
        <b>Wondering how much RAM and CPU your plan needs to host {appType}?</b><br />
        Don't worry, we're here to help.
        Our <a href={url}>{plan}</a> plan offers <b>{tier}GB</b> of RAM and <b>{cpu}vCPU</b>, which should be sufficient for most {appType}. 
        However, if you are working on a larger project and seeking extra stability, we recommend considering our <b>Pro</b> plan. With additional resources, you can maintain stability even during demand spikes. 
        To purchase, simply click <a href="https://squarecloud.app/en/pay?plan=pro">here</a>.
      </Note>;
  } else {
    return <Note>
          <b>Está se perguntando quanta RAM e CPU seu plano precisa para hospedar {appType}?</b><br />
          Não se preocupe, estamos aqui para ajudar.
          Nosso plano <a href={url}>{plan}</a> oferece <b>{tier}GB</b> de RAM e <b>{cpu}vCPU</b>, o que deve ser suficiente para a maioria dos {appType}.
          No entanto, se você estiver trabalhando em um projeto maior e precisar de mais estabilidade, recomendamos considerar nosso plano <b>Pro</b>.
          Com recursos adicionais, você pode manter a estabilidade mesmo durante picos de demanda.
          Para comprar, basta clicar <a href={`https://squarecloud.app/${lang}/pay?plan=pro`}>aqui</a>.
        </Note>;
  }
};

export const appType_0 = "a React application"

## Introduction

To develop and host {appType_0} on Square Cloud, it's essential to follow a structured sequence of configurations and prerequisites. This technical guide will cover the entire process, from initial setup to production deployment.

### Prerequisites

* **Square Cloud Account**: Register through the [signup page](https://squarecloud.app/en/signup) using your email.
* **Active Paid Plan**: Ensures dedicated resources and optimized performance for your application. Check our [available plans](https://squarecloud.app/en/pricing) and choose the most suitable for your needs.

<RecommendedPlan appType="React applications" plan="Standard" tier="4" cpu="4" lang="en" />

## Creating project

Before you begin, make sure you have Node.js and npm installed on your system. If you don't have them yet, you can download them from the [official Node.js website](https://nodejs.org/).

To create a new React project, run the following command:

```bash theme={null}
npx create-react-app my-react-app
```

In the above command, `my-react-app` is the name of your new project. You can replace `my-react-app` with any desired name for your project.

`create-react-app` is a package available in the npm registry that sets up a new React project automatically. It takes care of all the initial setup, such as creating the project directory, installing necessary dependencies, and configuring basic files.

## Building project

Build your production output before uploading:

```bash theme={null}
npm run build
```

## Choosing a production server

To serve your React in production you need a server. You can create your own or use existing ones.

### Express library

To serve your static project on Square Cloud, ensure your server correctly delivers static files. To use Node.js with Express, a common setup is:

```javascript server.js theme={null}
import express from 'express';
import path from 'path';

const app = express();

app.use(express.static({'dist/'}));

app.get('*', (req, res) => {
  res.sendFile('dist/index.html');
});

app.listen(80, () => console.log('Server running on port 80'));
```

<Note>Adjust `dist` paths parameters to your project build folder. If it is in a folder inside `build` or `dist`, use it path instead.</Note>

### Serve library

#### Installing the Serve Library

To install the `serve` library, navigate to your project directory in the terminal and run the following command:

```bash theme={null}
npm install serve@14.2.3
```

This command installs version `14.2.3` of the `serve` library. If you want to install the latest version, you can omit the `@14.2.3`.

#### Configuring the Startup Script

After installing the `serve` library, you need to configure your project's startup script to use `serve`. To do this, open your project's `package.json` file and add a new script called `start:prod`:

```json theme={null}
"scripts": {
  "start:prod": "serve -s dist -l 80",
  ...
}
```

In the `start:prod` script, `serve -s build -l 80` does the following:

* `serve`: This is the command to start the `serve` server.
* `-s dist`: The `-s` option serves the `dist` directory in single-page application mode. This means all not-found requests will be redirected to `index.html`. The `dist` directory is commonly created when you run `npm run build`.
* `-l 80`: The `-l` option followed by `80` tells `serve` to listen on port 80. Port 80 is the default port for HTTP traffic.

<Note>Adjust `dist` parameter to your project build folder. If it is in a folder inside `build` or `dist`, use it path instead.</Note>

## Deploying

After preparing your project files, you can now upload them to Square Cloud and host your project.
To do so, create a ZIP file containing all your project files.

<PortNote lang="en" />

### Via dashboard

<Steps>
  <Step title="Access the Upload Page">
    Access the [upload page](https://squarecloud.app/en/dashboard/new) and upload your project zip file.
  </Step>

  <Step title="Configure Your Environment">
    After uploading your zip, you will need to configure the name, main file or runtime environment and other settings for your project.\
    If you are uploading a web project, make sure to select "Web Publication" and set a subdomain to your project.
  </Step>

  <Step title="Deploy Your Project">
    Finally, click on the "Deploy" button to host your project on Square Cloud.\
    After deployment, you can monitor your project's status and logs from the dashboard.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/dashboard/uploading.gif" alt="Uploading application to Square Cloud" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Step>
</Steps>

### Via CLI

To use this method, you need to create a config file named `squarecloud.app` in the root directory of your project. This file will contain the necessary configuration for your project.

<Card title="Learn more about: how to create the configuration file for Square Cloud." icon="link" href="/en/getting-started/config-file">
  The squarecloud.app file is a configuration file that will be used to configure your application; it will be used to define your environment.
</Card>

<Steps>
  <Step title="Install the CLI">
    First, you need to have the CLI installed in your environment. If you don't have it yet, run the following command in your terminal:

    ```
    npm install -g @squarecloud/cli
    ```

    If you already have it, we recommend updating it. To do this, run the following command in your terminal:

    <Tabs>
      <Tab title="Windows">
        ```bash theme={null}
        squarecloud update
        ```
      </Tab>

      <Tab title="Linux, macOS, and WSL">
        ```bash theme={null}
        curl -fsSL https://cli.squarecloud.app/install | bash
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Authenticate">
    Now, to authenticate and use other CLI commands, you will find your authorization key [here](https://squarecloud.app/en/account/security) by clicking on "Request API Key". After obtaining your authorization key, run the following command:

    ```bash theme={null}
    squarecloud auth login
    ```
  </Step>

  <Step title="Upload Your Project">
    Finally, to deploy your application to Square Cloud using the CLI, you need to run the following command:

    ```bash theme={null}
    squarecloud upload 
    ```

    Or if you created the zip manually, you can use:

    ```bash theme={null}
    squarecloud upload --file <path/to/zip> 
    ```
  </Step>
</Steps>

## Additional Resources

For more information about React and its tools, visit the [official React documentation](https://react.dev/learn). There, you'll find detailed guides, tutorials, and API documentation to help you make the most of React.

## Troubleshooting

<CardGroup cols={1}>
  ### Custom Domain

  <Card horizontal>
    To use a custom domain (e.g., `mysite.com`) instead of the default URL `mysite.squareweb.app`, you need the **Standard plan or higher**. The subdomain is defined by the **SUBDOMAIN** field in the configuration file. See: [How to set up your custom domain](https://docs.squarecloud.app/en/tutorials/platform/custom-domain).
  </Card>

  ### Minimum RAM Requirements

  <Card horizontal>
    **Minimum: 512MB RAM** for simple websites/APIs. For sites with frameworks (Next.JS, React, Vue, Angular, etc.), we always recommend **at least 1GB RAM**. For larger applications, allocate more RAM to prevent the application from running out of memory and crashing.
  </Card>

  ### Could not find this site.

  <Card horizontal>
    Check if the **subdomain/domain** matches what's configured in the **SUBDOMAIN** field or in the **custom domain settings**. If you just uploaded the site, wait up to **60 seconds** for Square to enable **first access**.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/cloudflare/en/unauthorized.webp" alt="Cloudflare site not found error" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Card>

  ### Site took too long to respond...

  <Card horizontal>
    Check if you correctly configured **port 80** and **host 0.0.0.0** in the application. We recommend using Square's forced environment variables: **PORT** and **HOST** from the `.env` file.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/cloudflare/en/timeout.webp" alt="Cloudflare request timeout error" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Card>
</CardGroup>

## Contact us

If you continue facing **technical difficulties**, our **specialized support team** is available to assist you. [**Contact us**](https://squarecloud.app/en/support) and we'll be happy to help you resolve any issue.