How to Host Vue Applications

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

Build Your Application

Run npm run build locally to test.

Prepare Your Files

Ensure you have:

src/ folder
public/ folder
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 Vue documentation for more information.

Troubleshooting

Build errors

Check for TypeScript or ESLint errors
Verify all dependencies are installed

Routes not working

Configure Vue Router to use history mode and ensure server serves index.html for all routes.

Introduction

Platform Features

Bot Platforms

API Frameworks

Website Frameworks

How to Host Vue Applications

Introduction

Creating Your Project

Creating a New Vue Project

Building Your Project

Serving Your Vue App

Using serve

Using Express

Shard Cloud Configuration

Deploying

Additional Resources

Troubleshooting

​Introduction

​Creating Your Project

​Creating a New Vue Project

​Building Your Project

​Serving Your Vue App

​Using serve

​Using Express

​Shard Cloud Configuration

​Deploying

​Additional Resources

​Troubleshooting

Introduction

Creating Your Project

Creating a New Vue Project

Building Your Project

Serving Your Vue App

Using serve

Using Express

Shard Cloud Configuration

Deploying

Additional Resources

Troubleshooting