Skip to main content

​
Professional Qwik Application Development

  • Before starting, make sure you have Node.js (>=16.x) and npm installed on your system. If you don’t have them yet, download them from the official Node.js website.
  • Qwik focuses on resumability and minimal hydration. Choose a starter (Qwik City recommended for full web apps) when initializing your project.
  • Create an account on Square Cloud via the signup page and ensure you have an active paid plan if needed here.

​
Qwik Configuration

Initialize a new Qwik project using the official initializer: 
npm create qwik@latest
Follow the prompts to choose Qwik City (full application) or Qwik App (static) and any integrations you need. After creation, go into the project and install dependencies: 
cd my-qwik-app
npm install
If you selected Qwik City, your project will include server entry points and adapters for Node, Cloudflare, etc.

​
Creating a Qwik Project

Start the development server: 
npm run dev
The dev server typically runs at http://localhost:5173 (Vite default) or as displayed in the initializer output. Create a simple page in src/routes/index.tsx (Qwik City) or src/components/ for components: 
export default function Index() {
  return <h1>Hello from Qwik!</h1>;
}

​
Creating the Square Cloud Configuration File

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

The squarecloud.app file defines your application’s name, description, version, entry point, and other essential settings.

​
Purchasing a Plan Before Uploading the Project

Before deploying your Qwik project to Square Cloud, ensure you have an active plan that meets your application’s resource needs. Static Qwik sites are very efficient and often work well on Basic or Standard plans. If you use a server adapter or expect high concurrency, choose Standard or Pro depending on traffic.
Not sure how much RAM and CPU a Qwik app needs? Static/resumable Qwik sites require minimal resources; server‑rendered Qwik City apps depend on your server-side logic and concurrency. Start with Standard for dynamic apps.

​
Building Qwik for Production

Build your production output before uploading: 
npm run build
If you use Qwik City with an adapter (for example @builder.io/qwik-city/middleware/node), your production start command will point to the built server entry, commonly something like: 
node build/index.mjs
For purely static sites, you can use a server.

​
Express libraary

To serve your static project on Square Cloud, ensure your server correctly delivers static files. To use Node.js with Express, a common setup is:
server.js
import express from 'express';
import path from 'path';

const app = express();

app.use(express.static({'dist/'}));

app.get('*', (req, res) => {
  res.sendFile('dist/index.html');
});

app.listen(80, () => console.log('Server running on port 80'));
Adjust dist paths parameters to your project build folder. If it is in a folder inside build or dist, use it path instead.

​
Serve library

​
Installing the Serve Library

To install the serve library, navigate to your project directory in the terminal and run the following command: 
npm install [email protected]
This command installs version 14.2.3 of the serve library. If you want to install the latest version, you can omit the @14.2.3.

​
Configuring the Startup Script

After installing the serve library, you need to configure your project's startup script to use serve. To do this, open your project's package.json file and add a new script called start:prod: 
"scripts": {
  "start:prod": "serve -s dist -l 80",
  ...
}
In the start:prod script, serve -s build -l 80 does the following:
  • serve: This is the command to start the serve server.
  • -s dist: The -s option serves the dist directory in single-page application mode. This means all not-found requests will be redirected to index.html. The dist directory is commonly created when you run npm run build.
  • -l 80: The -l option followed by 80 tells serve to listen on port 80. Port 80 is the default port for HTTP traffic.
Adjust dist parameter to your project build folder. If it is in a folder inside build or dist, use it path instead.

​
Uploading the Project to Square Cloud

After preparing your project, you can upload it to Square Cloud using the dashboard or the CLI.
  • Upload via Dashboard
  • Upload via CLI
Access the Square Cloud Dashboard and upload your project files.

​
Additional Resources

For more information about Qwik, visit the official documentation here.

​
Troubleshooting

​
Custom Domain

To use a custom domain (e.g., mysite.com) instead of the default URL https://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.
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.