Hosting a Vite Application on Square Cloud

​

Introduction

• Before you begin, make sure you have Node.js and npm installed on your system. If you don’t have them yet, you can download them from the official Node.js website.
• Next, you will need to create an account on Square Cloud, which can be done through the login page. You can use either your email or Discord, or both, to create an account.
• Finally, you need to have an active paid plan on your account. You can view our plans and purchase one according to your needs here.

​

Creating a Vite Project

To create a new Vite project, run the following command:

npm create vite@latest my-vite-app

In the above command, my-vite-app is the name of your new project. Replace it with any desired name for your project. By default, this command sets up a Vite project with JavaScript.

​

Choosing a Specific Template

Vite allows choosing 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 by: react, vue & lit.

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vite-app -- --template [template]

Choose the template that best suits your needs and adjust the project name as needed.

​

Understanding the Difference Between JavaScript and TypeScript

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

​

Configuring Port 80

Port 80 is the default port for HTTP traffic. To host a Vite app on Square Cloud, configure the use of port 80. In Vite, you can set the --port 80 parameter in the startup script to ensure your app runs correctly on this port.

​

Creating the squarecloud config file

​

Configuring the START Field

In the Square Cloud configuration file, the START field is essential to customize the startup command. If you want to build and start your Vite app on Square Cloud, configure the START field as follows:

START=npm run build && npm run serve

This command will execute the “build” and “serve” scripts defined in your package.json:

{
  "name": "my-vite-app",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview --port 80"
  },
  "devDependencies": {
    "vite": "^5.1.4"
  }
}

​

Purchasing a Plan Before Uploading Your Project

Before you can upload your project to Square Cloud, it’s important to understand that you need to purchase a plan. The type of plan you choose will depend on the resources required by your application. You can view our plans here.

​

Uploading Project to Square Cloud

After preparing your project files, you can now upload them to Square Cloud and host your project.

• Dashboard Upload
• CLI Upload

Access the Square Cloud Dashboard and upload your project files.

​

Troubleshooting

Custom Domain

If you want to use a custom domain for your app hosted on Square Cloud, note that by default, the URL will be something like https://mysite.squareweb.app/. The subdomain is determined by the SUBDOMAIN field in the configuration file. However, if you prefer using a custom domain, such as mysite.com, you’ll need to purchase the Standard plan or a higher plan. We detail each step to set up your custom domain in our article: How to set up your custom domain.

Minimum RAM Requirements

The minimum amount of RAM required to host a website or API is 512MB, however, when building your site directly on Square, it’s advisable to use a higher amount, or you may encounter the LACK_OF_RAM error.

Temporarily Denied Access

If you receive the message “Your access has been temporarily denied.” when trying to access the site, wait for some time. If the issue persists, feel free to contact us at https://squarecloud.app/dashboard/support.

Website took too long to respond...

If you receive the message “Website took too long to respond…” make sure you have correctly set port 80 on your website. If the issue persists, feel free to contact us at https://squarecloud.app/dashboard/support.

​

Additional Resources

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

If you continue to experience any issues, please don’t hesitate to contact our support team.