Creating a New React 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.

With Node.js and npm installed, you can create a new React project using the create-react-app command, which is the official tool for React projects.

Open a terminal and execute the following command to create a new project:

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 for you. It takes care of all the initial setup, such as creating the project directory, installing necessary dependencies, and configuring basic files.

Using TypeScript

If you want to use TypeScript in your React project, you can add TypeScript support when creating the project. Modify the creation command as follows:

npx create-react-app my-react-app --template typescript

This adds TypeScript support to your React project.

Configuring Port 80

Port 80 is the default port for HTTP traffic. To host a React application on Square Cloud, it’s crucial to configure the use of port 80. In React, you can set the set PORT=80 parameter in the startup script to ensure your application runs correctly on this port.

Creating the Configuration File on Square Cloud

Square Cloud requires a specific configuration file to host your application. You can access our step-by-step guide on how to create one: How to create your Square Cloud configuration file

Configuring the START Field

In the Square Cloud configuration file, the START field is essential for customizing 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 start

This command will execute the “build” and “start” 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.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "set PORT=80 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Uploading Your Application to Square Cloud

After following all the steps, place your application files inside the zip file where the configuration file is and upload the site at Upload. Remember not to include files like package-lock.json or node_modules. You can get more information about unnecessary files when hosting at automatic-deletion-files-when-deploying-an-application-to-squarecloud.

Troubleshooting

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.

If you continue to experience any issues, please don’t hesitate to contact our support team.