Deploy Static Sites

DeployHub supports deploying static sites built with popular frameworks like React, Vue, Angular, and more. Static sites are built during deployment and served via NGINX.

Supported Frameworks

React (Create React App, Vite)
Vue (Vue CLI, Vite)
Angular
Svelte
Next.js (static export)
Any framework that produces static HTML/CSS/JS

Project Type Configuration

When creating a deployment, you must set projectType: "static" for static sites.

Required Configuration

Static sites require two mandatory fields:

Build Command

The command to build your project. This is executed during the build phase. Common examples:

{
  "buildCommand": "npm run build"
}

{
  "buildCommand": "npm run build"
}

{
  "buildCommand": "npm run build"
}

{
  "buildCommand": "npm install && npm run build:prod"
}

Publish Directory

The directory where your build output is located. This directory is served by NGINX. Common examples:

{
  "publishDir": "dist"
}

{
  "publishDir": "build"
}

{
  "publishDir": "dist/my-app"
}

{
  "publishDir": "out"
}

Deployment API Request

Prepare your deployment configuration

Create a deployment request with all required fields:

{
  "projectId": "507f1f77bcf86cd799439011",
  "name": "my-react-app",
  "codeLink": "https://github.com/username/my-react-app.git",
  "projectType": "static",
  "buildCommand": "npm run build",
  "publishDir": "dist",
  "branchname": "main",
  "isFolder": false
}

Send POST request to create deployment

curl -X POST https://api.deployhub.cloud/api/deployment/create \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -d '{
    "projectId": "507f1f77bcf86cd799439011",
    "name": "my-react-app",
    "codeLink": "https://github.com/username/my-react-app",
    "projectType": "static",
    "buildCommand": "npm run build",
    "publishDir": "dist",
    "branchname": "main",
    "isFolder": false
  }'

Monitor build status

The build worker will:

Clone your repository
Run npm ci to install dependencies
Execute your build command
Create a Docker image with NGINX
Deploy the container

Environment Variables

Add environment variables for build-time configuration:

{
  "env": {
    "VITE_API_URL": "https://api.example.com",
    "VITE_APP_TITLE": "My App",
    "REACT_APP_API_KEY": "your-key"
  }
}

Environment variables are written to a .env file during the build process and are available during build time.

Build Process Details

When you deploy a static site, DeployHub:

Clones your repository from the specified branch
Installs dependencies using npm ci
Creates .env file with your environment variables
Runs build command (or defaults to npm run build if not specified)
Builds Docker image using multi-stage build:
- Stage 1: Node.js 20 for building
- Stage 2: NGINX Alpine for serving
Copies build output from publishDir to /usr/share/nginx/html
Deploys container on port 80 with NGINX

Dockerfile Template

DeployHub uses this Dockerfile for static deployments:

FROM node:20.19.5 AS build

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .

ARG BUILD_CMD
ARG BUILD_DIR=build
ARG VITE_ENV_CONTENT

RUN echo "$VITE_ENV_CONTENT" > .env

RUN if [ -n "$BUILD_CMD" ]; then sh -c "$BUILD_CMD"; else npm run build; fi

FROM nginx:alpine

RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d/default.conf

ARG BUILD_DIR=build
COPY --from=build /app/${BUILD_DIR} /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Framework-Specific Examples

Vite (React/Vue)

{
  "projectType": "static",
  "buildCommand": "npm run build",
  "publishDir": "dist",
  "env": {
    "VITE_API_URL": "https://api.example.com"
  }
}

Create React App

{
  "projectType": "static",
  "buildCommand": "npm run build",
  "publishDir": "build",
  "env": {
    "REACT_APP_API_URL": "https://api.example.com"
  }
}

Angular

{
  "projectType": "static",
  "buildCommand": "npm run build",
  "publishDir": "dist/my-angular-app",
  "env": {
    "NG_APP_API_URL": "https://api.example.com"
  }
}

Vue CLI

{
  "projectType": "static",
  "buildCommand": "npm run build",
  "publishDir": "dist",
  "env": {
    "VUE_APP_API_URL": "https://api.example.com"
  }
}

Validation Rules

DeployHub validates your configuration:

Required for static projects:

projectType must be "static"
buildCommand is required and cannot be empty
publishDir is required and cannot be empty
branchname is required
isFolder must be a boolean

From the validation schema:

body("buildCommand")
  .if(body("projectType").equals("static"))
  .notEmpty()
  .withMessage("Build command is required for static project")

body("publishDir")
  .if(body("projectType").equals("static"))
  .notEmpty()
  .withMessage("Publish directory is required for static project")

Updating Build Settings

You can update build settings after deployment:

curl -X PATCH https://api.deployhub.cloud/api/projects/:id/settings/build \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -d '{
    "buildCommand": "npm run build:prod",
    "publishDir": "dist"
  }'

Troubleshooting

Build Fails

Verify your buildCommand is correct
Check that all dependencies are in package.json
Ensure environment variables are properly set

Wrong Files Served

Verify publishDir matches your build output directory
Check your framework’s build configuration

Environment Variables Not Working

Ensure you’re using the correct prefix for your framework:
- Vite: VITE_
- Create React App: REACT_APP_
- Next.js: NEXT_PUBLIC_
Environment variables are only available at build time for static sites

Next Steps

Deploy Node.js Apps

Learn how to deploy backend applications

Monorepo Support

Deploy from specific folders in monorepos

Branch Management

Configure branch and commit tracking

Get Started

Core Features

Deployment Guide

Project Management

Subscription & Billing

Deploy Static Sites

Supported Frameworks

Project Type Configuration

Required Configuration

Build Command

Publish Directory

Deployment API Request

Environment Variables

Build Process Details

Dockerfile Template

Framework-Specific Examples

Vite (React/Vue)

Create React App

Angular

Vue CLI

Validation Rules

Updating Build Settings

Troubleshooting

Build Fails

Wrong Files Served

Environment Variables Not Working

Next Steps

Deploy Node.js Apps

Monorepo Support

Branch Management

​Supported Frameworks

​Project Type Configuration

​Required Configuration

​Build Command

​Publish Directory

​Deployment API Request

​Environment Variables

​Build Process Details

​Dockerfile Template

​Framework-Specific Examples

​Vite (React/Vue)

​Create React App

​Angular

​Vue CLI

​Validation Rules

​Updating Build Settings

​Troubleshooting

​Build Fails

​Wrong Files Served

​Environment Variables Not Working

​Next Steps

Deploy Node.js Apps

Monorepo Support

Branch Management

Supported Frameworks

Project Type Configuration

Required Configuration

Build Command

Publish Directory

Deployment API Request

Environment Variables

Build Process Details

Dockerfile Template

Framework-Specific Examples

Vite (React/Vue)

Create React App

Angular

Vue CLI

Validation Rules

Updating Build Settings

Troubleshooting

Build Fails

Wrong Files Served

Environment Variables Not Working

Next Steps