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

> Learn how to deploy React applications on Shard Cloud.

## Introduction

This guide covers deploying React single-page applications (SPAs) on Shard Cloud.

## Creating Your Project

Ensure you have **Node.js** and **npm** installed.

### Creating a New React Project

```bash theme={null}
npx create-react-app my-react-app
cd my-react-app
```

## Building Your Project

Build the production output:

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

This creates a `build/` folder with optimized static files.

## Serving Your React App

React apps are static files that need a server. You can use the `serve` package:

### Option 1: Using serve

Install serve:

```bash theme={null}
npm install serve
```

Update `package.json`:

```json package.json theme={null}
{
  "scripts": {
    "start": "serve -s build -l 80"
  }
}
```

### Option 2: Using Express

Create a `server.js` file:

```javascript server.js theme={null}
const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(80, () => {
  console.log('Server running on port 80');
});
```

Add express to dependencies:

```bash theme={null}
npm install express
```

## Shard Cloud Configuration

Create a `.shardcloud` file:

**Using serve:**

```systemd .shardcloud theme={null}
DISPLAY_NAME=React App
DESCRIPTION=React Single Page Application
LANGUAGE=node
MEMORY=512
VERSION=recommended
SUBDOMAIN=my-react-app
CUSTOM_COMMAND=npm run build && npx serve -s build -l 80
```

**Using Express:**

```systemd .shardcloud theme={null}
DISPLAY_NAME=React App
DESCRIPTION=React Single Page Application
MAIN=server.js
MEMORY=512
VERSION=recommended
SUBDOMAIN=my-react-app
CUSTOM_COMMAND=npm run build && node server.js
```

## Deploying

<Steps>
  <Step title="Build Your Application">
    Run `npm run build` locally to test.
  </Step>

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

    * `src/` folder
    * `public/` folder
    * `package.json`
    * `.shardcloud`
    * `server.js` (if using Express)
  </Step>

  <Step title="Exclude Unnecessary Files">
    Remove: `node_modules/`, `build/` (will be rebuilt), `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 React documentation](https://react.dev/) for more information.

## Troubleshooting

<AccordionGroup>
  <Accordion title="Blank page after deployment">
    * Check that `homepage` in `package.json` is set correctly or removed
    * Verify the build folder is being served correctly
  </Accordion>

  <Accordion title="Routes not working (404 on refresh)">
    Ensure your server is configured to serve `index.html` for all routes (SPA routing).
  </Accordion>
</AccordionGroup>