How to Host Vite Applications

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

Build Your Application

Run npm run build to generate the dist folder.

Prepare Your Files

Ensure you have:

Source files
package.json
.shardcloud
vite.config.js

Exclude Unnecessary Files

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

Troubleshooting

Build fails

Check for syntax errors in your code
Verify all imports are correct

Assets not loading

Check your base configuration in vite.config.js if using a subdirectory.

Introduction

Platform Features

Bot Platforms

API Frameworks

Website Frameworks

How to Host Vite Applications

Introduction

Creating Your Project

Creating a New Vite Project

Building Your Project

Serving Your Vite App

Using serve

Using Express

Shard Cloud Configuration

Deploying

Additional Resources

Troubleshooting

​Introduction

​Creating Your Project

​Creating a New Vite Project

​Building Your Project

​Serving Your Vite App

​Using serve

​Using Express

​Shard Cloud Configuration

​Deploying

​Additional Resources

​Troubleshooting

Introduction

Creating Your Project

Creating a New Vite Project

Building Your Project

Serving Your Vite App

Using serve

Using Express

Shard Cloud Configuration

Deploying

Additional Resources

Troubleshooting