> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.squarecloud.app/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to host a Preact application

# 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:
```bash
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:
```bash
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.
```