How to Host React Applications

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

npx create-react-app my-react-app
cd my-react-app

Building Your Project

Build the production output:

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:

npm install serve

Update package.json:

package.json

{
  "scripts": {
    "start": "serve -s build -l 80"
  }
}

Option 2: Using Express

Create a server.js file:

server.js

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:

npm install express

Shard Cloud Configuration

Create a .shardcloud file: Using serve:

.shardcloud

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:

.shardcloud

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

Build Your Application

Run npm run build locally to test.

Prepare Your Files

Ensure you have:

src/ folder
public/ folder
package.json
.shardcloud
server.js (if using Express)

Exclude Unnecessary Files

Remove: node_modules/, build/ (will be rebuilt), 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 React documentation for more information.

Troubleshooting

Blank page after deployment

Check that homepage in package.json is set correctly or removed
Verify the build folder is being served correctly

Routes not working (404 on refresh)

Ensure your server is configured to serve index.html for all routes (SPA routing).

Introduction

Platform Features

Bot Platforms

API Frameworks

Website Frameworks

How to Host React Applications

Introduction

Creating Your Project

Creating a New React Project

Building Your Project

Serving Your React App

Option 1: Using serve

Option 2: Using Express

Shard Cloud Configuration

Deploying

Additional Resources

Troubleshooting

​Introduction

​Creating Your Project

​Creating a New React Project

​Building Your Project

​Serving Your React App

​Option 1: Using serve

​Option 2: Using Express

​Shard Cloud Configuration

​Deploying

​Additional Resources

​Troubleshooting

Introduction

Creating Your Project

Creating a New React Project

Building Your Project

Serving Your React App

Option 1: Using serve

Option 2: Using Express

Shard Cloud Configuration

Deploying

Additional Resources

Troubleshooting