# Deployment

Build AdminKit for React into dist/ and deploy the single-page app with a fallback to index.html on Vercel, Netlify or nginx, at the root or a base path.

## Build

```bash
npm run build
```

Vite writes the app to `dist/`: `index.html`, the JavaScript and CSS in `assets/` (with hashed file names) and the files from `public/`. It needs no Node.js server. Check the build locally with `npm run preview` at [http://localhost:4173](http://localhost:4173).

## Static hosting with a fallback

AdminKit for React is a single-page app: `dist/` has one HTML file, and React Router renders the page for the URL in the browser. Links inside the app work on any host, but opening or reloading `/pages-settings` asks the host for a file that does not exist. Configure the host to serve the files that exist and `index.html` for every other path. Paths that are no page of the app then show the app's 404 page.

### Vercel

```json title="vercel.json"
{
  "framework": null,
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
```

Vercel serves the files in `dist/` first and rewrites everything else to `index.html`.

### Netlify

Set the build command to `npm run build` and the publish directory to `dist`, and add a `_redirects` file to `public/`, which Vite copies into `dist/`:

```text title="public/_redirects"
/*  /index.html  200
```

Or in `netlify.toml`:

```toml title="netlify.toml"
[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
```

### nginx

```nginx
server {
  root /var/www/adminkit/dist;

  location / {
    try_files $uri $uri/ /index.html;
  }
}
```

Other hosts (Cloudflare Pages, Apache, an S3 bucket behind a CDN) work the same way: serve `dist/`, and `index.html` for paths without a file.

## Base path

To serve the app from a sub-path such as `https://example.com/admin/`, set `BASE_PATH` when you build:

```bash
BASE_PATH=/admin npm run build
```

Or put `BASE_PATH=/admin` in a `.env` file (see `.env.example`), or in the build settings of your host. The asset URLs, React Router's links (its `basename`) and images written with `asset()` get the prefix. Upload `dist/` to the `/admin/` folder and point the fallback at `/admin/index.html`, for example in nginx:

```nginx
location /admin/ {
  try_files $uri $uri/ /admin/index.html;
}
```

---

Canonical HTML page: https://adminkit.io/react/docs/getting-started/deployment/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io