How to Host React Applications

Introduction

To develop and host 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 using your email.
Active Paid Plan: Ensures dedicated resources and optimized performance for your application. Check our available plans and choose the most suitable for your needs.

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. To create a new React project, use Vite, the recommended toolchain for React apps:

npm create vite@latest my-react-app -- --template react

In the above command, my-react-app is the name of your new project. You can replace it with any desired name. Then install the dependencies:

cd my-react-app
npm install

Vite scaffolds the project automatically, and its production build outputs to the dist/ folder used by the servers below.

Building project

Build your production output before uploading:

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:

server.js

import express from 'express';
import path from 'path';

const app = express();
const distPath = path.join(import.meta.dirname, 'dist');

app.use(express.static(distPath));

// SPA fallback: serve index.html for any route not matched above
app.use((req, res) => {
  res.sendFile(path.join(distPath, 'index.html'));
});

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

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

Serve library

Installing the Serve Library

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

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:

"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.

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

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.

Via dashboard

Access the Upload Page

Access the upload page and upload your project zip file.

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.

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.

Confirm Your App Is Live

Your first deploy usually takes less than a minute. In the dashboard, wait for your application status to show as running and check the logs for any startup errors.
If you deployed a website or API, open https://<your-subdomain>.squareweb.app in your browser — you should see your application responding. If you deployed a bot, send it a command to confirm it is online.

App not starting? See the Troubleshooting guide for the most common causes and fixes.

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.

Configuration file guide

Learn how to create the squarecloud.app configuration file that defines your application’s environment.

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:

Windows
Linux, macOS, and WSL

squarecloud update

curl -fsSL https://cli.squarecloud.app/install | bash

Authenticate

Now, to authenticate and use other CLI commands, you will find your authorization key here by clicking on “Request API Key”. After obtaining your authorization key, run the following command:

squarecloud auth login

Upload Your Project

Finally, to deploy your application to Square Cloud using the CLI, you need to run the following command:

squarecloud upload

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

squarecloud upload --file <path/to/zip>

Confirm Your App Is Live

Your first deploy usually takes less than a minute. Check your application status and logs directly from the terminal:

squarecloud app status
squarecloud app logs

If you deployed a website or API, open https://<your-subdomain>.squareweb.app in your browser — you should see your application responding. If you deployed a bot, send it a command to confirm it is online.

App not starting? See the Troubleshooting guide for the most common causes and fixes.

Troubleshooting

Custom Domain

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.

Minimum RAM Requirements

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.

Could not find this site.

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.

Site took too long to respond…

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.

Additional Resources

For more information about React and its tools, visit the official React documentation. There, you’ll find detailed guides, tutorials, and API documentation to help you make the most of React.

Contact us

If you continue facing technical difficulties, our specialized support team is available to assist you. Contact us and we’ll be happy to help you resolve any issue — support quality is a big part of why developers rate Square Cloud 4.9/5 across 402 reviews on Google and Trustpilot.

Tutorials

Bots

Ready Projects

Databases

APIs

Website

Migration Guides

How to Host React Applications

Introduction

Prerequisites

Creating project

Building project

Choosing a production server

Express library

Serve library

Installing the Serve Library

Configuring the Startup Script

Deploying

Via dashboard

Via CLI

Configuration file guide

Troubleshooting

Custom Domain

Minimum RAM Requirements

Could not find this site.

Site took too long to respond…

Additional Resources

Contact us

​Introduction

​Prerequisites

​Creating project

​Building project

​Choosing a production server

​Express library

​Serve library

​Installing the Serve Library

​Configuring the Startup Script

​Deploying

​Via dashboard

​Via CLI

Configuration file guide

​Troubleshooting

​Custom Domain

​Minimum RAM Requirements

​Could not find this site.

​Site took too long to respond…

​Additional Resources

​Contact us

Introduction

Prerequisites

Creating project

Building project

Choosing a production server

Express library

Serve library

Installing the Serve Library

Configuring the Startup Script

Deploying

Via dashboard

Via CLI

Troubleshooting

Custom Domain

Minimum RAM Requirements

Could not find this site.

Site took too long to respond…

Additional Resources

Contact us