All posts

How to Deploy a Vite React App in Nigeria (Paid in Naira)

Introduction

Most Nigerian developers eventually hit the same wall: you build something with Vite and React, you try to deploy it, and you discover the hosting platform invoices in US dollars. Your card gets declined, or you burn through a painful conversion rate, or your bank flags the transaction entirely. Even when payment goes through, each monthly renewal is a gamble against the naira-dollar exchange rate that day.

OneBit is built to solve this directly. It is a cloud deployment platform that bills in naira, accepts local payment methods, and is designed for the Nigerian market. This tutorial walks you through deploying a production Vite React application on OneBit, from connecting your GitHub repository to attaching your own custom domain.


Prerequisites

Before you start, make sure you have:

  • A Vite React project that builds successfully locally (npm run build produces a dist/ folder with no errors)
  • The project pushed to a GitHub repository — public or private both work
  • An OneBit account at deploy.onebit.ng
  • Your domain registrar login ready if you plan to attach a custom domain

Step 1 — Connect GitHub

Once you are signed in to the OneBit console, press Add app on Apps and open the GitHub account tab. OneBit uses a GitHub App for this integration rather than storing your GitHub credentials.

Press Connect GitHub to install the OneBit GitHub App. GitHub will open and ask you which account or organisation to install it on. On the permissions screen, choose Only select repositories rather than all repositories. Select only the repos you actually intend to deploy. The OneBit GitHub App can be scoped to only the repos you choose, and access can be revoked from GitHub at any time from your GitHub settings under Installed GitHub Apps.

One important thing to understand about this permission model: revoking GitHub access stops new deploys, but apps already deployed keep running. You will not cause a production outage by removing the integration.

After installation, GitHub redirects you back to Add app. You should see your selected repositories listed and ready to use.


Step 2 — Select Your Repository and Branch

From the repository list, click the repo that holds your Vite React project. OneBit will inspect the repository contents — your package.json, build scripts, and project structure — and identify the stack automatically.

Because this is a Vite project, OneBit detects your Vite stack and writes an optimised Dockerfile for you — no build configuration to write. This zero-config detection means you do not need to author a Dockerfile, a Dockerfile.prod, or any custom build script. OneBit handles the multi-stage build, static asset serving, and container configuration on your behalf.

Next, select the branch you want to deploy under Branch and press Import. Most teams use main or production for their live environment. You can deploy other branches separately for staging — each branch gets its own isolated deployment.

Review what OneBit says it found. For a standard Vite React project the defaults should be correct. If your project builds differently, change the build command under Build settings before continuing; a non-standard output directory goes in Output folder, in the app's Settings → Build settings → Edit build settings.


Step 3 — Set Environment Variables and Secrets

If your Vite app reads environment variables at build time (anything prefixed with VITE_), add them on the app's Environment tab, under Add variable. The tab is there once the app exists, so if the first build in Step 4 runs before they are in, add them then.

For each variable:

  1. Enter the Name exactly as it appears in your code, for example VITE_API_BASE_URL.
  2. Enter the Value.
  3. Press Add.

Every value is masked after saving, and a restart is triggered automatically when one changes. This means you do not need to manually redeploy after updating a secret — OneBit handles that for you. However, if the variable is a VITE_ build-time variable, a full rebuild is required for the new value to be embedded in the static output, so after adding or changing one press Redeploy at the top of the app page to build again.


Step 4 — Trigger Your First Deploy

With the repository and branch chosen, press Deploy. OneBit queues a build, pulls your source code, and runs the Dockerfile it generated for your project.

The app page shows each step, and its Logs tab streams the build log under Build. Watch for:

  • Dependency installation (npm install or equivalent)
  • The Vite production build (vite build)
  • The container image being packaged and pushed
  • A health check confirming the container started

A successful deploy ends with the status Live and a URL where your app is accessible.

From this point forward, every push to the selected branch triggers a new deploy automatically. You do not need to return to the console for routine updates — push your code and OneBit handles the rest.


Step 5 — Attach a Custom Domain

To serve your app from your own domain rather than the default deployment URL, open your app's Domains tab, type the domain under Add domain and press Add.

Any external domain can be connected — OneBit provides the CNAME record for you to update at your own registrar. The app's Domains tab shows something similar to:

Type:  CNAME
Name:  www   (or @ for root, depending on your registrar)
Value: <target shown on the app's Domains tab>

Log in to your domain registrar — Qserver, WhoGoHost, Namecheap, or whichever you use — and add or update the CNAME record with the value OneBit gives you. DNS propagation typically takes between a few minutes and 48 hours depending on your registrar and your previous TTL settings.

Once the record propagates, OneBit detects it and provisions an SSL certificate automatically. For more detail on the domain connection process, see the domain connection help page.


Rolling Back a Bad Deploy

Deployments can introduce bugs. If a push to your branch breaks something in production, you do not need to revert your Git history and push again.

To undo a bad deploy, put any earlier commit back online. Open your app's Deployments tab, find the commit you want to restore — identified by its date and short commit hash — and press Rebuild on it. OneBit rebuilds the container from that exact commit without touching your Git repository. (To step back just one version, Roll back on the same tab does it in one press.)

This means your recovery workflow is:

  1. Open your apps in the OneBit console.
  2. Open your app's Deployments tab.
  3. Locate the last known good commit.
  4. Press Rebuild on that commit.

The rollback deploy goes through the same build pipeline and health checks as any other deploy, so you know it is working before traffic shifts to it.


Next Steps

Your Vite React app is now live, billed in naira, and set up for continuous deployment.

If you want to understand what each plan includes before scaling up, visit the OneBit pricing page to compare options.

If your next project uses Next.js rather than Vite, the process is similar but has a few differences around server-side rendering configuration. The Next.js deployment tutorial covers those steps in the same format as this guide.

For anything not covered here, the OneBit support page is the right place to start.


Ready to ship? Follow the quickstart or read another post.