> ## 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 an Angular application

# How to Host Angular Applications on Square Cloud

Unlike a Discord bot, Angular does not "run" on its own; it needs a web server to deliver files to the user's browser. On Square Cloud, the most efficient strategy is to compile the project and serve it using the **serve** library.

---

## 1. The Fundamental Step: Production Build

The first step is to transform your TypeScript code and components into files that any browser can understand. Run the build command on your local machine:

```bash
ng build --configuration production
```

This will create a folder named **`dist/`** at the root of your project. Inside it, there will be another folder named after your project containing the `index.html` and the JavaScript bundles.

---

## 2. Preparing the Web Server

To let Square Cloud know how to deliver these files, we will use the **`serve`** library, which is lightweight and ideal for SPAs.

### Adding the Dependency
In your `package.json` file, add `serve` to your dependencies:

```json
"dependencies": {
  "serve": "^14.0.0"
}
```

---

## 3. Configuring the Port and Start Command

Square Cloud makes **port 80** available for your application to use and receive requests. `serve` makes this easy with simple parameters.

### The Start Command
Your initialization command (defined in the Dashboard or in the configuration file) should be:

```bash
npx serve -s dist -p 80
```

*   **`-s` (Single Page Application):** Redirects all routes to `index.html`. This is vital for Angular routing (e.g., `/dashboard`, `/login`) to work without throwing a 404 error when refreshing the page.
*   **`dist`:** The exact path where your compiled files are located.
*   **`-p 80`:** Sets the mandatory port for Square Cloud.

---

## 4. What to Include in the ZIP File?

For a clean deployment, your `.zip` file must contain:
1.  The complete **`dist/`** folder.
2.  The **`package.json`** file.

**Note:** Do not upload the `node_modules` or `src` folders. The server only needs the compiled files and installation instructions.

---

## 5. Tips for Routes and Performance

*   **Routing:** The `-s` parameter in the `serve` command is what ensures that Angular routing doesn't break. Without it, if a user accesses an internal URL directly, the server will try to find a physical file that does not exist.
*   **Environment Variables:** If your Angular application consumes an API, remember to configure the URLs in the `environment.prod.ts` files before building, or use runtime variable injection solutions.