Skip to main content
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"
}

​
Publish Directory

The directory where your build output is located. This directory is served by NGINX. Common examples: 
{
  "publishDir": "dist"
}

​
Deployment API Request

1

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
}
2

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
  }'
3

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:
  1. Clones your repository from the specified branch
  2. Installs dependencies using npm ci
  3. Creates .env file with your environment variables
  4. Runs build command (or defaults to npm run build if not specified)
  5. Builds Docker image using multi-stage build:
    • Stage 1: Node.js 20 for building
    • Stage 2: NGINX Alpine for serving
  6. Copies build output from publishDir to /usr/share/nginx/html
  7. 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