How to Host Remix Applications

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

Build Your Application

Run npm run build to verify the build works.

Prepare Your Files

Ensure you have:

app/ folder
package.json
.shardcloud
vite.config.ts or remix.config.js

Exclude Unnecessary Files

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

Create ZIP Archive

Compress your project folder.

Upload to Shard Cloud

Go to Shard Cloud Dashboard and upload.

Additional Resources

Visit the official Remix documentation for more information.

Troubleshooting

Build fails

Check for TypeScript errors
Verify all route files are valid

Port already in use

Ensure you’re using port 80 as specified in the configuration.

Introduction

Platform Features

Bot Platforms

API Frameworks

Website Frameworks

How to Host Remix Applications

Introduction

Creating Your Project

Creating a New Remix Project

Basic Route Example

Building Your Project

Shard Cloud Configuration

Deploying

Additional Resources

Troubleshooting

​Introduction

​Creating Your Project

​Creating a New Remix Project

​Basic Route Example

​Building Your Project

​Shard Cloud Configuration

​Deploying

​Additional Resources

​Troubleshooting

Introduction

Creating Your Project

Creating a New Remix Project

Basic Route Example

Building Your Project

Shard Cloud Configuration

Deploying

Additional Resources

Troubleshooting