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:

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:

"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:

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.

Updated on: 05/26/2026