​
Introduction

  • 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.
  • Next, you will need to create an account on Square Cloud, which can be done through the sign up page. You can use your email to create an account.
  • Finally, you need to have an active paid plan on your account. You can view our plans and purchase one according to your needs here.

​
Creating a React Project

To create a new React project, run the following command: 
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.

​
Configuring the Production Environment with Serve

After having your React project created and configured, it’s time to prepare it for production. For this, we will use a library called serve. This library is a static server that can serve your React project after it has been built.

​
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": "react-scripts start",
  "start:prod": "serve -s build -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 build: The -s option serves the build directory in single-page application mode. This means all not-found requests will be redirected to index.html. The build directory is 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.
Now, when you want to start your project in production mode, you can run the npm run start:prod command. This command first builds your React project and then serves the built files using serve on port 80.

​
Creating the squarecloud config file

Learn about: how to make the configuration file for Square Cloud.

The squarecloud.app file is a configuration file that will be used to configure your application; it will be used to define the name, description, version, main file, among other things.

​
Configuring the START Field

In the Square Cloud configuration file, the START field is essential to customize the startup command. If you want to build and start your application on Square Cloud, configure the START field as follows:
squarecloud.app
START=npm run build && npm run start:prod
This command will execute the “build” and “start:prod” scripts defined in your package.json:
package.json
{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "serve": "^14.2.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "start:prod": "serve -s build -l 80",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

​
Purchasing a Plan Before Uploading Your Project

Before you can upload your project to Square Cloud, it’s important to understand that you need to purchase a plan. The type of plan you choose will depend on the resources required by your application. You can view our plans here.
Are you wondering how much RAM and CPU your plan needs to host a React website? Don’t worry, we’re here to help. React is a JavaScript framework known for its speed and flexibility. It allows developers to build large web applications that can update and render efficiently in response to data changes. It’s also relatively easy to learn, making it accessible for beginners. Our Standard plan offers 4GB of RAM and 4vCPU, which should be sufficient for most React websites. However, if you’re working on a larger project or need more stability, we recommend considering our Pro plan. With additional resources, you can ensure smooth performance even under high demand. To purchase, simply click here.

​
Uploading Project to Square Cloud

After preparing your project files, you can now upload them to Square Cloud and host your project.
Access the Square Cloud Dashboard and upload your project files.

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

​
Troubleshooting

​
Custom Domain

To use a custom domain (e.g., mysite.com) instead of the default URL https://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.

​
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, use more RAM to avoid LACK_OF_RAM error and ensure performance.

​
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.
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. Se você continuar enfrentando dificuldades técnicas, nossa equipe de suporte especializada está disponível para auxiliá-lo. Entre em contato conosco e teremos prazer em ajudá-lo a resolver qualquer questão.