Skip to main content

​
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

1

Build Your Application

Run npm run build locally to test.
2

Prepare Your Files

Ensure you have:
  • src/ folder
  • public/ folder
  • package.json
  • .shardcloud
  • server.js (if using Express)
3

Exclude Unnecessary Files

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

​
Troubleshooting

  • Check that homepage in package.json is set correctly or removed
  • Verify the build folder is being served correctly
Ensure your server is configured to serve index.html for all routes (SPA routing).