Skip to main content

​
Introduction

To develop and host 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: Hosting platform for your application. Register through the signup page using your email.
  • Active Paid Plan: Ensures dedicated resources and optimized performance for your application. Check our available plans and choose the most suitable for your needs.
Wondering how much RAM and CPU your plan needs to host Vite Applications?
Don't worry, we're here to help. Our Standard plan offers 4GB of RAM and 4vCPU, which should be sufficient for most Vite Applications. However, if you are working on a larger project and seeking extra stability, we recommend considering our Pro plan. With additional resources, you can maintain stability even during demand spikes. To purchase, simply click here.

​
Creating the project

Before you begin, make sure you have Node.js and npm installed on your system. If you don’t have them, you can download them from the official Node.js website. To create a new Vite project, run the following command: 
npm create vite@latest my-vite-app
In the command above, my-vite-app is the name of your new project. Replace it with any name you want for your project. By default, this command sets up a Vite project with JavaScript.

​
Choosing a Specific Template

Vite allows you to choose different templates for your project. When creating a new project, you can specify the desired template using the --template option. Here are some examples: Select a template such as: react, vue, and lit. 
npm create vite@latest my-vite-app --template [template]
Choose the template that best fits your needs and adjust the project name as necessary.

​
Understanding the Difference between JavaScript and TypeScript

When you choose JavaScript, Vite configures the project with default JavaScript settings. On the other hand, when you choose TypeScript, Vite configures the project with TypeScript settings, including the generation of a tsconfig.json file.

​
Building the project

Before uploading to production, generate the production artifacts using the Vite build: 
npm run build
To serve the production version locally (useful for testing in the deployment environment), we recommend using the vite preview command, exposing the application on all interfaces and port 80: 
npx vite preview --host 0.0.0.0 --port 80
You can also add a script to your package.json to simplify: 
{
	"scripts": {
		"build": "vite build",
		"preview": "vite preview --host 0.0.0.0 --port 80"
	}
}
Note: On some systems, port 80 requires special privileges. If there is a restriction, use another port (e.g., 8080) and map it on the host/service.

​
Choosing a Production Server

For production you have basically two options:
  • With our static HTML/CSS runtime, simply rename index.html to vite.html.
  • Use vite preview itself (useful for testing production behavior or in containers running the Node process directly).

​
HTML/CSS Runtime

If you choose the static runtime, generate the build (npm run build) and copy the contents of dist/ to the compressed zip file to be sent to Square Cloud. Remember to rename index.html to vite.html so that the runtime recognizes the initial file correctly as a Vite application and performs proper asset handling.

​
Using vite preview in production (or in containers)

vite preview serves the files generated by vite build with behavior similar to a production static server. To expose the application to the network (for example, within a container on Square Cloud) use: 
npx vite preview --host 0.0.0.0 --port 80
This makes the process listen on all interfaces (0.0.0.0) and port 80.

​
Example of vite.config.js with preview options

import { defineConfig } from 'vite'

export default defineConfig({
	preview: {
		host: '0.0.0.0',
		port: 80,
		strictPort: true
	}
})

​
Deploying

After preparing your project files, you can send them to Square Cloud and host your project. To do this, create a ZIP file containing all your project files.
What port should I use for my server?
You should use port 80 for your server. Port 80 is the default port for HTTP traffic, which is handled by Square Cloud to route it to 443, HTTPS, for a secure connection.
Make sure to configure it before compressing and uploading your project.

​
Via dashboard

1

Access the Upload Page

Access the upload page and upload your project zip file.
2

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.
3

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.

​
Via CLI

To use this method, you need to create a config file named squarecloud.app in the root directory of your project. This file will contain the necessary configuration for your project.

Learn more about: how to create the configuration file for Square Cloud.

The squarecloud.app file is a configuration file that will be used to configure your application; it will be used to define your environment.
1

Install the CLI

First, you need to have the CLI installed in your environment. If you don't have it yet, run the following command in your terminal:
npm install -g @squarecloud/cli
If you already have it, we recommend updating it. To do this, run the following command in your terminal:
squarecloud update
2

Authenticate

Now, to authenticate and use other CLI commands, you will find your authorization key here by clicking on "Request API Key". After obtaining your authorization key, run the following command:
squarecloud auth login
3

Upload Your Project

Finally, to deploy your application to Square Cloud using the CLI, you need to run the following command:
squarecloud upload
Or if you created the zip manually, you can use:
squarecloud upload --file <path/to/zip>

​
Additional Resources

For more information about Vite and its tools, visit the official Vite documentation. There you will find detailed guides, tutorials, and API documentation to help you get the most out of Vite.

​
Troubleshooting

​
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 subdomain is defined by the SUBDOMAIN field in the configuration file. See: How to set up your custom domain.

​
Minimum RAM Requirements

Minimum: 512MB RAM for simple websites/APIs. For sites with frameworks (Next.JS, React, Vue, Angular, etc.), we always recommend at least 1GB RAM. For larger applications, use more RAM to avoid LACK_OF_RAM error and ensure performance.

​
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...

Check if you correctly configured port 80 and host 0.0.0.0 in the application. We recommend using Square's forced environment variables: PORT and HOST from the .env file.

​
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.