# Deploy a Vite site with a custom domain

Source: https://naijacloud.com/guides/vite-static-site

This guide deploys a Vite + React single-page app to Naijacloud as a static site, from your terminal. At the end you’ll have the site live over HTTPS at your own naijacloud.app address, with React Router pages that still load when someone refreshes or shares a deep link, and a one-command redeploy for every change. The stack is Vite 8, React 19 and React Router, deployed with the naijacloud CLI. Static sites are free and don’t count against the free tier’s one app.

_10 min · Beginner · Last verified 2026-10-07 · Stack: vite, react_

**What you'll have at the end:** A Vite + React app on your own naijacloud.app address, where /about loads directly and on refresh, not only when you click to it.

## Before you start

- Node.js 20 or newer.
- A Naijacloud account and a project to put the site in. A new project has a `dev` environment; this guide uses a project called `shop`.

## Create the app

Skip this if you already have a Vite app. Otherwise create one and add React Router:

```sh
$ npm create vite@latest my-site -- --template react-ts
$ cd my-site
$ npm install
$ npm install react-router
```

Give it two routes, so you can see deep links work once it’s deployed:

```tsx title="src/main.tsx"
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Link, Route, Routes } from "react-router";

function Home() {
  return <p>Home. Built with Vite, served by Naijacloud.</p>;
}

function About() {
  return <p>About. Refresh this page: it still loads.</p>;
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  </StrictMode>,
);
```

## Install the CLI and sign in

```sh
$ npm install -g @naijacloud/cli
$ naijacloud login
```

`login` asks for your email and password. In CI, use `naijacloud login --token "$NAIJACLOUD_API_KEY"` with a key from **Settings → API keys** instead.

## Deploy

From the app’s folder, build and upload in one command. `--spa` serves `index.html` for paths that aren’t files, which is what lets a client-side router handle `/about` on a refresh. `--env` takes `project/environment`.

```sh
$ naijacloud deploy --name my-site --output dist --spa --env shop/dev
✓ built in 68ms
Packaged 4 files, 266 KB → 83 KB compressed
Uploading 83 KB
Created site my-site in the target environment
  BUILDING
  DEPLOYING
  RUNNING
https://my-site.naijacloud.app
Wrote naijacloud.json
```

The build runs on your machine, so variables your build reads (`VITE_…`) come from your shell or your `.env` file. Your `.env` files themselves are never uploaded.

Open `https://my-site.naijacloud.app/about` directly. It loads, because unknown paths fall back to `index.html` and React Router takes it from there.

## Commit naijacloud.json and redeploy

`deploy` wrote `naijacloud.json`, which links the folder to the site. Commit it. From now on, a change is one command, and each run replaces the live version once the new one is ready:

```sh
$ git add naijacloud.json
$ git commit -m "Link to Naijacloud"
$ naijacloud deploy
```

> **Warning: If a deploy fails, the old version keeps serving**
>
> A failed deploy ends with `The previous version, if any, is still serving.` Read why with `naijacloud deployments logs <id>`, fix it, and run `naijacloud deploy` again.

## Add your domain

In the dashboard, open the site, then **Domains** → **Add domain**. Enter `www.example.com` (or your apex, `example.com`) and add the record the table shows at your DNS provider. The status reads **Waiting for DNS…** until the record resolves, then **Verified · HTTPS ready**: the certificate is issued and renewed for you. [Connect a custom domain with SSL](https://naijacloud.com/guides/custom-domain-apex.md) walks through both the apex and `www`.

## Reference

- [Static sites](https://naijacloud.com/docs/deploy/static-sites.md)
- [Install the CLI](https://naijacloud.com/docs/cli/install.md)
- [Deploy from the CLI](https://naijacloud.com/docs/cli/deploy.md)
- [Custom domains](https://naijacloud.com/docs/domains/custom-domains.md)

All guides: https://naijacloud.com/guides · Index for agents: https://naijacloud.com/llms.txt