Deploy a Vite site with a custom domain

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 minBeginnerLast verified 2026-10-07vitereact
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.

https://<your-site>.naijacloud.app
Deploy this templateVite + React template

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:

Terminal
$ 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:

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

Terminal
$ 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.

Terminal
$ 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:

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

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 walks through both the apex and www.

Reference

Static sites/docs/deploy/static-sitesInstall the CLI/docs/cli/installDeploy from the CLI/docs/cli/deployCustom domains/docs/domains/custom-domains

Whatever you build it with, it ships here.

Deploy your app for free

Free tier forever · No card