Deploy a Preact App

Introduction

To develop and host a Preact application 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 plan: Ensures dedicated resources and optimized performance for your application. Check our available plans and choose the most suitable for your needs.

This guide runs on the static runtime or the Node.js runtime. Tested with Preact 10 and Vite 8 on Node.js 24 in September 2026.

Create the project

You need Node.js and npm on your machine. If you don’t have them, download them from the official Node.js website. Create a project with the official initializer, create-preact:

npm init preact

The initializer asks for the project folder and options such as TypeScript, the router and prerendering (SSG). You don’t need to install the older preact-cli. Then enter the project folder and install the dependencies if the initializer did not:

cd <your-project-name>
npm install

Start the development server with npm run dev and edit src/index.jsx (or src/index.tsx) to change the home page.

Build for production

npm run build

create-preact projects build with Vite, which writes the production files to the dist/ folder.

Choose how to serve it

A Preact build is a static site: HTML, CSS and JavaScript files that any web server can deliver. Pick one of these options:

Static runtime (recommended)
Express server
serve package

The static runtime serves the files of your build with a web server managed by Square Cloud. No Node.js process runs, so it is the lightest way to host a site without server-side code.

Build the site

Run npm run build. The output goes to the dist folder.

Keep client-side routes working

If your app changes pages in the browser without a reload (client-side routing), rename dist/index.html to vite.html. The static runtime answers every path that is not a file with vite.html, so refreshing a route such as /about still loads your app. A site with one HTML file per page keeps index.html: unknown paths then return your 404.html. See how the static runtime serves files.

Add the configuration file

Create a squarecloud.app file inside dist. A MAIN that points to an HTML file selects the static runtime:

squarecloud.app

MAIN=vite.html
MEMORY=512
VERSION=recommended
DISPLAY_NAME=My website
SUBDOMAIN=mywebsite

Use MAIN=index.html if you kept index.html. 512 MB is the minimum memory for a website. When you upload through the dashboard, it asks for these values and writes the file for you.

Zip the build output

Zip the contents of dist, not the folder itself, so that squarecloud.app sits at the root of the ZIP. With the CLI, run squarecloud upload from inside dist.

Everything in the ZIP is public on your site. Upload only the build output, never your source code or .env files.

Most build tools empty dist on every build. Keep a copy of squarecloud.app in the folder that your framework copies unchanged into the build (public/ in Vite-based projects), or repeat the last three steps after each build.

This option runs a small Express server on the Node.js runtime. Install Express as a regular dependency, not a devDependency, which Square Cloud does not install:

npm install express

Create a server.mjs file at the root of your project. It serves the build output folder, dist, and returns index.html for any other path so client-side routing keeps working:

server.mjs

import express from 'express';
import path from 'node: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'));
});

// Square Cloud sets PORT=80; 0.0.0.0 accepts connections from outside the container
const port = Number(process.env.PORT) || 80;
app.listen(port, '0.0.0.0', () => console.log(`Server running on port ${port}`));

To try it on your machine, pick a free port: PORT=3000 node server.mjs.Create a squarecloud.app file at the root of your project. Square Cloud starts your site with node server.mjs:

squarecloud.app

MAIN=server.mjs
MEMORY=512
VERSION=recommended
DISPLAY_NAME=My website
SUBDOMAIN=mywebsite

Run npm run build before creating your ZIP. The ZIP needs server.mjs, package.json, squarecloud.app and the dist folder, without node_modules: Square Cloud installs your dependencies on the first start. Build tools are usually devDependencies, which Square Cloud does not install, so the build has to run on your machine.

This option runs the serve package on the Node.js runtime, with no server code to write. Install it as a regular dependency:

npm install serve

Add a start:prod script to the scripts of your package.json, next to the ones you already have:

package.json

"scripts": {
  "start:prod": "serve -s dist"
}

serve -s dist serves the build output folder, dist, in single-page mode: any path that is not a file returns index.html, so client-side routing keeps working. serve listens on all network interfaces, on the port in the PORT environment variable, which Square Cloud sets to 80 (locally, it falls back to 3000).Create a squarecloud.app file at the root of your project:

squarecloud.app

RUNTIME=nodejs
START=npm run start:prod
MEMORY=512
VERSION=recommended
DISPLAY_NAME=My website
SUBDOMAIN=mywebsite

RUNTIME=nodejs selects the Node.js runtime without a MAIN file, and START replaces the default start command.Run npm run build before creating your ZIP. The ZIP needs package.json, squarecloud.app and the dist folder, without node_modules: Square Cloud installs your dependencies on the first start. Build tools are usually devDependencies, which Square Cloud does not install, so the build has to run on your machine.

Deploy and verify

Create the ZIP described in the option you picked, then upload it:

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, your project needs a configuration file named squarecloud.app at its root. It tells Square Cloud how to run your application.

Configuration file guide

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

Install the CLI

Install the Square Cloud CLI. If you already have it, run the same command to update it:

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

npm install -g @squarecloud/cli@latest

Run the command below. It opens your browser: approve the login there and the CLI is ready. There is no API key to copy. For scripts and CI, see CLI authentication.

squarecloud auth login

Upload Your Project

From your project folder, run the command below. The CLI zips the current folder, leaving out what squarecloud.ignore lists, and uploads it:

squarecloud upload

To upload a zip you created yourself, pass it with --file:

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.

Common errors

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 default URL comes from the SUBDOMAIN field in the configuration file. To connect your domain, follow how to set up your own domain.

Minimum RAM Requirements

Minimum: 512MB RAM for websites and APIs, enough for a static build on the static runtime. For apps that render pages on a server (Next.js, Nuxt, Angular SSR and similar), we 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…

Your server must listen on port 80 and host 0.0.0.0. Square Cloud sets the PORT (80) and HOST (0.0.0.0) environment variables in your application: read them in your code instead of hardcoding other values. A server that listens only on localhost or 127.0.0.1 never receives requests.

A refresh on a route returns 404

Your app uses the Preact router and the server does not know the route. On the static runtime, rename index.html to vite.html. The Express and serve options above already return index.html for unknown paths.

Next steps

Environment variables

Keep secrets and settings out of your code and read them at runtime.

Custom domain

Serve your app on your own domain, on the Standard plan and above.

Troubleshooting

Fix an app that does not start or a site that does not respond.

For more about Preact, see the official Preact documentation.

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.

Bots

Websites

APIs and backends

Databases

Self-hosted apps

Guides

Migration guides

Introduction

Prerequisites

Create the project

Build for production

Choose how to serve it

Deploy and verify

Via dashboard

Via CLI

Configuration file guide

Common errors

Custom Domain

Minimum RAM Requirements

Could not find this site.

Site took too long to respond…

A refresh on a route returns 404

Next steps

Environment variables

Custom domain

Troubleshooting

Contact us

​Introduction

​Prerequisites

​Create the project

​Build for production

​Choose how to serve it

​Deploy and verify

​Via dashboard

​Via CLI

Configuration file guide

​Common errors

​Custom Domain

​Minimum RAM Requirements

​Could not find this site.

​Site took too long to respond…

​A refresh on a route returns 404

​Next steps

Environment variables

Custom domain

Troubleshooting

​Contact us

Introduction

Prerequisites

Create the project

Build for production

Choose how to serve it

Deploy and verify

Via dashboard

Via CLI

Common errors

Custom Domain

Minimum RAM Requirements

Could not find this site.

Site took too long to respond…

A refresh on a route returns 404

Next steps

Contact us