​
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 sign up page. You can use your email 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.

​
Configuring Host 0.0.0.0

The --host 0.0.0.0 option is used to bind the Vite server to all available network interfaces. This makes your application accessible not only on localhost, but also on external devices within the same network, such as other computers or mobile devices. By default, Vite binds to localhost, which restricts access to the machine where it’s running. Setting the host to 0.0.0.0 allows the server to listen for incoming requests from any IP address.

​
Creating the squarecloud config file

Learn about: how to make 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 the name, description, version, main file, among other things.

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

squarecloud.app
START=npm run build && npm run preview

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

package.json
{
  "name": "my-vite-app",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --host 0.0.0.0 --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.

Are you wondering how much RAM and CPU your plan needs to host a Vite website? Don’t worry, we’re here to help. Vite is a modern front-end build tool that provides a faster and leaner development experience for modern web projects. It’s designed to provide out-of-the-box support for ES modules, enabling instant server start-up and hot module replacement. Our Standard plan offers 4GB of RAM and 4vCPU, which should be sufficient for most Vite websites. However, if you’re working on a larger project or need more stability, we recommend considering our Pro plan. With additional resources, you can ensure smooth performance even under high demand. To purchase, simply click here.

​
Uploading Project to Square Cloud

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

Access the Square Cloud Dashboard and upload your project files.

​
Troubleshooting

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