Deploy Your First App for Free in Uganda: A Beginner Guide

Here is a pattern we see constantly with junior developers in Kampala: they build a project, it works on their laptop, and they add "Built a React application" to their CV. When a potential employer asks to see it, they say "I can show you if I open it on my machine." That is the wrong answer.

A deployed project communicates things that a GitHub repository alone does not:

• You can ship. Writing code is one skill. Getting it live on the internet is a separate, equally important skill. Many junior developers can write a React component but cannot configure a deployment. If you can do both, you are already ahead.
• Your work is verifiable. An employer can open your deployed project on their phone during a meeting and see it working. No setup, no "clone this repo and run npm install." They click a link and see your work.
• You understand the full lifecycle. Professional software development does not end when the code compiles. It ends when real users can access it. Deployment teaches you about domains, HTTPS, environment variables, build processes, and production versus development environments.

For Ugandan developers building portfolios, deployed projects are the difference between "I am learning to code" and "I build things that work." Every project in your portfolio should have a live URL.

If your project is a collection of HTML, CSS, and JavaScript files with no backend server, you have a static site. This includes basic websites, landing pages, and simple interactive pages. Static sites are the easiest to deploy.

GitHub Pages (simplest option)

1. Push your project to a GitHub repository (see our Git and GitHub guide).
2. Go to the repository Settings, then Pages.
3. Select your main branch and click Save.
4. Your site is live at yourusername.github.io/repo-name within a minute.

Best for: simple HTML/CSS/JS sites, documentation pages, personal landing pages.

Netlify (drag-and-drop option)

1. Create a free account at netlify.com.
2. Drag your project folder directly onto the Netlify dashboard. That is the entire deployment process.
3. For ongoing updates, connect your GitHub repository. Every push to main automatically redeploys.

Best for: beginners who want the fastest path from files to live URL. Also handles form submissions and serverless functions on the free tier.

Data usage note for Uganda: The initial deployment uploads your project files, which uses minimal data (a basic site is under 1MB). After that, updates only upload changed files. GitHub Pages and Netlify both work well on Ugandan internet connections, including 3G. You do not need fast broadband for deploying static sites.

Modern frontend frameworks (React, Vue, Angular) need a build step before deployment. Your source code (JSX, components, modules) gets compiled into plain HTML, CSS, and JavaScript that browsers understand. The deployment platform handles this build step for you.

Vercel (recommended for React and Next.js)

1. Create a free account at vercel.com using your GitHub login.
2. Click "New Project" and import your GitHub repository.
3. Vercel automatically detects the framework (React, Vue, Next.js, etc.) and configures the build.
4. Click Deploy. Your app is live in about 60 seconds.
5. Every push to your main branch triggers an automatic redeployment. Pull requests get preview deployments.

Why Vercel is the top recommendation: it was built by the creators of Next.js and has the smoothest experience for React and Node.js projects. The free tier includes 100GB bandwidth per month, which is more than enough for portfolio projects. It also handles environment variables, serverless functions, and custom domains on the free plan.

Netlify (also excellent)

1. Connect your GitHub repository to Netlify.
2. Set the build command (usually npm run build) and the publish directory (usually dist or build).
3. Deploy. Automatic redeployments on every push.

Netlify and Vercel are largely interchangeable for frontend projects. Pick one and stick with it. You can always switch later.

Environment variables: If your app uses API keys (for weather APIs, map services, etc.), never put them directly in your code. Both Vercel and Netlify let you set environment variables in their dashboard. Your code references import.meta.env.VITE_API_KEY (for Vite projects) and the platform injects the value at build time. This keeps your secrets out of your GitHub repository.

Full-stack deployment is more complex because you have multiple pieces: a frontend that users see, a backend server that handles logic, and a database that stores data. Each piece can be deployed separately or together.

Railway (recommended free option for full-stack)

• Railway runs Node.js, Python, Go, and other backend servers. It also provides PostgreSQL and MySQL databases.
• The free tier gives you $5 of usage per month, which is enough for a small application with moderate traffic.
• Deploy from GitHub with automatic builds. Set environment variables in the dashboard.
• You can deploy your backend on Railway and your frontend on Vercel, connecting them via API calls.

Supabase (recommended free database and API)

• Supabase gives you a PostgreSQL database with a REST API and real-time subscriptions on the free tier.
• It also includes authentication (user signup/login), file storage, and edge functions.
• For many projects, Supabase replaces the need for a separate backend server entirely. Your React frontend can talk directly to Supabase.
• The free tier includes 500MB database storage and 1GB file storage.

Common full-stack deployment pattern:

1. Frontend (React) deployed on Vercel (free).
2. Database on Supabase (free tier) or Railway's PostgreSQL.
3. Backend API (if needed) on Railway (free tier).
4. Total cost: zero.

This is the stack pattern that many Kampala startups use for their early products. Learning it now means you are practicing with the same tools that employers use.

For portfolio projects, the free URLs from Vercel (your-project.vercel.app) or Netlify (your-project.netlify.app) are perfectly fine. But when you build something for a client or start a serious project, you will want a custom domain.

Where to buy domains in Uganda:

• .co.ug domains: Register through NITA-U accredited registrars. Prices vary but are generally affordable (around UGX 50,000 to UGX 100,000 per year). A .co.ug domain signals that your project serves the Ugandan market.
• .com domains: Register through Namecheap, Google Domains (now Squarespace Domains), or Cloudflare Registrar. Prices are typically $10 to $15 per year (approximately UGX 37,000 to UGX 56,000). Cloudflare Registrar charges at cost with no markup.

Connecting a custom domain: Both Vercel and Netlify make this straightforward. You add the domain in their dashboard and update your DNS records at your registrar. The platforms provide exact instructions. SSL certificates (HTTPS) are free and automatic on both Vercel and Netlify. You do not need to configure or pay for SSL separately.

Do not buy a domain until you have a project worth putting on it. Start with free URLs, build your skills, and invest in a domain when you have a project that deserves its own identity.

If you want to go deeper into deployment workflows, CI/CD pipelines, and production best practices, McTaba's Deployment and Going Live course (approximately UGX 140,000) covers the complete journey from local development to production, including monitoring, error handling, and the common mistakes that break deployments.

"Build failed" on Vercel or Netlify: This usually means your code has errors that appear during the build process but not during local development. Check the build logs in the platform's dashboard. Common causes: missing dependencies (you forgot to commit package.json), import errors (wrong file paths), and environment variables that exist locally but are not set in the platform's dashboard.

Page shows "404 Not Found" after deployment: For single-page React apps, this happens when you refresh on a route other than the homepage. Vercel handles this automatically for most frameworks. On Netlify, create a _redirects file in your public folder with the content: /* /index.html 200. This tells Netlify to serve your app for all routes.

Images or assets not loading: Check your file paths. Local file paths like ./images/photo.jpg must match the exact case and location in your deployed project. File systems on deployment platforms are case-sensitive, so Photo.jpg and photo.jpg are different files.

API calls failing after deployment: If you are calling http://localhost:3000/api/... in your code, that only works on your machine. Replace hardcoded localhost URLs with your actual backend URL or use environment variables. A common pattern: const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000'.

Slow deployment from Uganda: If your internet connection is slow, deployments may time out. Push your code to GitHub first (smaller upload), then let the platform pull from GitHub and build remotely. This is more reliable than uploading directly from your machine on a slow connection.

Deployment errors feel frustrating, but solving them is one of the most valuable learning experiences you can have. Every error teaches you something about how web infrastructure works. Take notes on what went wrong and how you fixed it. You will encounter the same patterns repeatedly throughout your career.