> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shardcloud.app/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Host Remix Applications

> Learn how to deploy Remix applications on Shard Cloud.

## 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

```bash theme={null}
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`:

```tsx app/routes/_index.tsx theme={null}
export default function Index() {
  return <h1>Hello from Remix!</h1>;
}
```

## Building Your Project

Build the production output:

```bash theme={null}
npm run build
```

## Shard Cloud Configuration

Create a `.shardcloud` file:

```systemd .shardcloud theme={null}
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:

```json package.json theme={null}
{
  "scripts": {
    "build": "remix vite:build",
    "start": "PORT=80 remix-serve build/server/index.js"
  }
}
```

Or configure the port in the start command:

```systemd .shardcloud theme={null}
CUSTOM_COMMAND=npm run build && PORT=80 npx remix-serve build/server/index.js
```

## Deploying

<Steps>
  <Step title="Build Your Application">
    Run `npm run build` to verify the build works.
  </Step>

  <Step title="Prepare Your Files">
    Ensure you have:

    * `app/` folder
    * `package.json`
    * `.shardcloud`
    * `vite.config.ts` or `remix.config.js`
  </Step>

  <Step title="Exclude Unnecessary Files">
    Remove: `node_modules/`, `build/`, `package-lock.json`
  </Step>

  <Step title="Create ZIP Archive">
    Compress your project folder.
  </Step>

  <Step title="Upload to Shard Cloud">
    Go to [Shard Cloud Dashboard](https://shardcloud.app/dash/applications) and upload.
  </Step>
</Steps>

## Additional Resources

Visit the [official Remix documentation](https://remix.run/docs) for more information.

## Troubleshooting

<AccordionGroup>
  <Accordion title="Build fails">
    * Check for TypeScript errors
    * Verify all route files are valid
  </Accordion>

  <Accordion title="Port already in use">
    Ensure you're using port 80 as specified in the configuration.
  </Accordion>
</AccordionGroup>