How to Host Preact Applications on Square Cloud

Preact delivers maximum performance with a minimum footprint. To get your Preact project live on Square Cloud (whether it was created using the Vite ecosystem or via Preact CLI), we compile the application into static files and serve them using the serve library on the platform's default port.

1. Generating the Production Build

Before deploying your project to the cloud, you must transform it into optimized and minified files ready for the browser.

In your local project's terminal, run the compilation command:

npm run build

• If you use Vite (Current standard): The command will generate the dist/ folder at the root of your project.
• If you use the classic Preact CLI: The command will generate the build/ folder.

For this guide, we will assume the use of Vite's default dist/ folder.

2. Configuring the Start Command and Port 80

Square Cloud uses port 80 to route traffic. You must configure your initialization command (either in the Dashboard or in your squarecloud.app file) to open the web server pointing to the correct folder.

Start Command:

npx serve -s dist -p 80

• -s (Single Page Application): This parameter is crucial. It ensures that if you use preact-router or any other routing system, all internal requests (such as /dashboard or /profile) are rewritten to index.html, avoiding the dreaded 404 error when refreshing the page.
• dist: Indicates the folder containing the output of your build.
• -p 80: Sets the network port required by Square Cloud.

3. Structure of the Deployment File (.zip)

To upload your project, create a compressed .zip file containing only the ecosystem necessary for execution.

• What to INCLUDE: The dist/ (or build/) folder, the package.json file, and the package-lock.json (or yarn.lock) file.
• What to EXCLUDE: The node_modules/ folder and the src/ folder. Square Cloud will take care of fetching and installing all dependencies cleanly directly on the server.

4. Optimization Tips

• Environment Variables: If your Preact frontend consumes an external API, make sure to configure the URLs in the environment variables. If you are using Vite, remember that variables that need to be exposed to the browser must start with the VITE_ prefix (e.g., VITE_API_URL).
• React Aliasing: If you are using libraries from the traditional React ecosystem in your Preact project (via preact/compat), ensure that the aliasing is properly configured in your vite.config.js file before running the build command for deployment.

```

Updated on: 05/25/2026