Skip to main content

​
Introduction

This guide covers deploying Remix applications on Shard Cloud. Remix is a full-stack React framework with server-side rendering.

​
Creating Your Project

Ensure you have Node.js (18+) and npm installed.

​
Creating a New Remix Project

npx create-remix@latest my-remix-app
cd my-remix-app
npm install
Select the Node.js server deployment target for Shard Cloud.

​
Basic Route Example

Create a route in app/routes/_index.tsx:
app/routes/_index.tsx
export default function Index() {
  return <h1>Hello from Remix!</h1>;
}

​
Building Your Project

Build the production output: 
npm run build

​
Shard Cloud Configuration

Create a .shardcloud file:
.shardcloud
DISPLAY_NAME=Remix App
DESCRIPTION=Remix Full-Stack Application
LANGUAGE=node
MEMORY=512
VERSION=recommended
SUBDOMAIN=my-remix-app
CUSTOM_COMMAND=npm run build && npm run start
Make sure your package.json has the start script configured for port 80:
package.json
{
  "scripts": {
    "build": "remix vite:build",
    "start": "PORT=80 remix-serve build/server/index.js"
  }
}
Or configure the port in the start command:
.shardcloud
CUSTOM_COMMAND=npm run build && PORT=80 npx remix-serve build/server/index.js

​
Deploying

1

Build Your Application

Run npm run build to verify the build works.
2

Prepare Your Files

Ensure you have:
  • app/ folder
  • package.json
  • .shardcloud
  • vite.config.ts or remix.config.js
3

Exclude Unnecessary Files

Remove: node_modules/, build/, package-lock.json
4

Create ZIP Archive

Compress your project folder.
5

Upload to Shard Cloud

Go to Shard Cloud Dashboard and upload.

​
Additional Resources

Visit the official Remix documentation for more information.

​
Troubleshooting

  • Check for TypeScript errors
  • Verify all route files are valid
Ensure you’re using port 80 as specified in the configuration.