Skip to main content

​
Introduction

This guide covers deploying Vite-powered applications on Shard Cloud. Vite is a fast build tool that supports React, Vue, Svelte, and vanilla JavaScript.

​
Creating Your Project

Ensure you have Node.js and npm installed.

​
Creating a New Vite Project

npm create vite@latest my-vite-app
cd my-vite-app
npm install
Choose your preferred template: vanilla, vue, react, svelte, etc.

​
Building Your Project

Build the production output: 
npm run build
This creates a dist/ folder with optimized static files.

​
Serving Your Vite App

Vite outputs static files that need a server:

​
Using serve

npm install serve
Update package.json:
package.json
{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview",
    "serve": "serve -s dist -l 80"
  }
}

​
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, 'dist')));

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

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

​
Shard Cloud Configuration

Create a .shardcloud file:
.shardcloud
DISPLAY_NAME=Vite App
DESCRIPTION=Vite-powered Application
LANGUAGE=node
MEMORY=512
VERSION=recommended
SUBDOMAIN=my-vite-app
CUSTOM_COMMAND=npm run build && npx serve -s dist -l 80

​
Deploying

1

Build Your Application

Run npm run build to generate the dist folder.
2

Prepare Your Files

Ensure you have:
  • Source files
  • package.json
  • .shardcloud
  • vite.config.js
3

Exclude Unnecessary Files

Remove: node_modules/, dist/, 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 Vite documentation for more information.

​
Troubleshooting

  • Check for syntax errors in your code
  • Verify all imports are correct
Check your base configuration in vite.config.js if using a subdirectory.