Skip to main content

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.

Introduction

This guide covers deploying Vue.js applications on Shard Cloud.

Creating Your Project

Ensure you have Node.js and npm installed.

Creating a New Vue Project

npm create vue@latest
cd my-vue-app
npm install

Building Your Project

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

Serving Your Vue App

Vue apps are static files that need a server:

Using serve

Update package.json:
package.json
{
  "scripts": {
    "build": "vite build",
    "serve": "serve -s dist -l 80"
  },
  "dependencies": {
    "serve": "^14.0.0"
  }
}

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=Vue App
DESCRIPTION=Vue.js Application
LANGUAGE=node
MEMORY=512
VERSION=recommended
SUBDOMAIN=my-vue-app
CUSTOM_COMMAND=npm run build && npx serve -s dist -l 80

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
  • 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 Vue documentation for more information.

Troubleshooting

  • Check for TypeScript or ESLint errors
  • Verify all dependencies are installed
Configure Vue Router to use history mode and ensure server serves index.html for all routes.