> ## Documentation Index
> Fetch the complete documentation index at: https://docs.deployhub.cloud/llms.txt
> Use this file to discover all available pages before exploring further.

# Deploy Static Sites

> Deploy React, Vue, Angular, and other static sites to DeployHub

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

<Note>
  When creating a deployment, you must set `projectType: "static"` for static sites.
</Note>

## 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:**

<CodeGroup>
  ```json Vite (React/Vue) theme={null}
  {
    "buildCommand": "npm run build"
  }
  ```

  ```json Create React App theme={null}
  {
    "buildCommand": "npm run build"
  }
  ```

  ```json Angular theme={null}
  {
    "buildCommand": "npm run build"
  }
  ```

  ```json Custom Build theme={null}
  {
    "buildCommand": "npm install && npm run build:prod"
  }
  ```
</CodeGroup>

### Publish Directory

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

**Common examples:**

<CodeGroup>
  ```json Vite theme={null}
  {
    "publishDir": "dist"
  }
  ```

  ```json Create React App theme={null}
  {
    "publishDir": "build"
  }
  ```

  ```json Angular theme={null}
  {
    "publishDir": "dist/my-app"
  }
  ```

  ```json Next.js Static Export theme={null}
  {
    "publishDir": "out"
  }
  ```
</CodeGroup>

## Deployment API Request

<Steps>
  <Step title="Prepare your deployment configuration">
    Create a deployment request with all required fields:

    ```json theme={null}
    {
      "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
    }
    ```
  </Step>

  <Step title="Send POST request to create deployment">
    ```bash theme={null}
    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
      }'
    ```
  </Step>

  <Step title="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
  </Step>
</Steps>

## Environment Variables

Add environment variables for build-time configuration:

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

<Note>
  Environment variables are written to a `.env` file during the build process and are available during build time.
</Note>

## 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:

```dockerfile theme={null}
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)

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

### Create React App

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

### Angular

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

### Vue CLI

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

## Validation Rules

DeployHub validates your configuration:

<Warning>
  **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
</Warning>

From the validation schema:

```javascript theme={null}
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:

```bash theme={null}
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

<CardGroup cols={2}>
  <Card title="Deploy Node.js Apps" icon="node-js" href="/deployment/nodejs-apps">
    Learn how to deploy backend applications
  </Card>

  <Card title="Monorepo Support" icon="folder-tree" href="/deployment/monorepo-support">
    Deploy from specific folders in monorepos
  </Card>

  <Card title="Branch Management" icon="code-branch" href="/deployment/branch-management">
    Configure branch and commit tracking
  </Card>
</CardGroup>