Skip to main content

Professional Remix Application Development

  • Before starting, make sure you have Node.js (>= 18.x) and npm installed on your system. If you don’t have them yet, download them from the official Node.js website.
  • Next, you’ll need to create an account on Square Cloud through the sign up page.
  • Finally, ensure your account has an active paid plan. You can view available plans and choose one that fits your project here.

Installing the Remix CLI

To create and manage Remix applications, install the Remix CLI globally:
npm install -g create-remix

Creating a Remix Project

Now create a new Remix project with:
create-remix myapp
Select the preferred deployment target.
For Square Cloud, the Node.js server option is recommended.
After creation, navigate into your project:
cd myapp
Install dependencies:
npm install
Start the development server:
npm run dev
This usually starts your application at http://localhost:5173/.

Basic Route Example

Remix routes are file-based.
Here is a simple example of a route in:
app/routes/_index.tsx
export default function Index() {
  return <h1>Hello World from Remix!</h1>;
}

Configuring the START Field

In the Square Cloud configuration file, the START field is optional and required only if your application demands a custom start command. For Remix applications, the typical start command is:
npm run start
Make sure your package.json contains:
"scripts": {
  "start": "remix-serve build",
  "build": "remix build",
  "dev": "remix dev"
}

Purchasing a Plan Before Uploading the Project

Before uploading your project, ensure you have an active plan with enough CPU and RAM. Remix applications are lightweight and typically run well on the Basic or Standard plan, but heavier applications or APIs may benefit from the Pro plan.
Not sure how much RAM and CPU you need for Remix? Remix is highly optimized and efficient, but resource usage depends on your backend logic and integration with databases or APIs. Standard plan is recommended for most real-world applications.

Additional Resources

For more information about Remix, check the official documentation here. It includes comprehensive guides, tutorials, API references, and best practices.

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.

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.