Web Application Deployment

Introduction

Modern web app development typically involves three core phases:

• Code development and version control
• Application hosting and deployment
• Domain name registration and DNS configuration

Code Development and Version Control

The foundation of any application is its code.

• Developers typically begin by setting up a local development environment using tools like Visual Studio Code.
• This local setup allows them to write code, run the application on their own machine and preview its appearance and functionality in real time.
• At this stage, core logic, such as behaviours written in JavaScript is built and tested.
• Even before optimizing the app for performance, scalability or reliability, developers invest significant time in writing and refining the codebase.

As the application grows, managing code changes becomes increasingly critical.

• Introducing new features or fixing bugs can sometimes unintentionally affect existing functionality.
• This is where version control systems (VCS) like Git become indispensable.

Git enables developers to save "snapshots" (commits) of their code at various points in time.

• This creates a detailed history that makes it easy to track changes, revert to previous stable versions and understand how updates affect the project.
• For collaborative development, cloud-based platforms like GitHub or Bitbucket are used to host Git repositories. These services allow multiple team members to work simultaneously on the same codebase using branches - isolated lines of development - without interfering with the main or stable version (often called the main or master branch).

NOTE: Before an app is released to the public, it typically undergoes multiple rounds of development, testing and deployment.

Application Hosting and Deployment

To make a web app publicly accessible, it must be hosted on a cloud-based server.

• For simple websites built using only client-side technologies like HTML, CSS and JavaScript, static site hosting platforms such as GitHub Pages, Netlify and Vercel are ideal choices.
• For more dynamic applications that require backend services or complex logic, Platform as a Service (Paas) providers like Heroku, AWS Elastic Beanstalk and Firebase Hosting are popular choices. They manage the underlying infrastructure (servers, operating systems and networking), allowing developers to focus solely on writing and deploying their code.

Platforms like Vercel and Netlify began by simplifying static site deployment - primarily serving HTML, CSS and JavaScript - but have since evolved into powerful full-stack platforms.

• This evolution is driven by the integration of serverless functions and support for decoupled backends like Firebase, Supabase, or custom APIs.
• Vercel, in particular, is deeply optimized for Next.js (a React-based framework developed by the Vercel team), offering first-class support for modern rendering strategies including Static Site Generation (SSG), Server-Side Rendering (SSR), Incremental Static Regeneration (ISR) and API routes.
• Cloudflare Pages, while newer, is quickly gaining traction thanks to its global CDN, support for static and dynamic rendering via Cloudflare Workers and tight integration with Cloudflare’s edge network. It is especially appealing for developers who want fast, secure and scalable deployment close to the user, with built-in features like KV storage, Durable Objects and D1 database.
• In contrast, GitHub Pages only supports static content and lacks support for serverless functions or dynamic rendering. It also requires public repositories in its free plan, making it unsuitable for private or sensitive projects.
• All these platforms, however, offer streamlined Git-based deployment workflows, enabling automatic builds and deploys directly from repositories on GitHub or other version control platforms.
• Most modern platforms (like Vercel, Netlify, Cloudflare, Firebase) also automatically provide and renew free SSL/TLS certificates (e.g., via Let's Encrypt) as a key part of modern, secure deployment.

Firebase App Hosting is a strong choice for apps that are tightly integrated with the Firebase ecosystem, including Firestore, Authentication, Cloud Functions and Cloud Storage.

• While Netlify, Vercel and Cloudflare Pages can support similar full-stack use cases, Firebase App Hosting offers deeper integration out of the box, especially for real-time data and mobile-focused development.
• Hosting the frontend on Firebase also simplifies operations: unified billing, a single dashboard, lower latency from co-located services and streamlined security management through Google’s IAM (Identity and Access Management) system.

When choosing a platform, it is also important to compare free tier limits.

• Netlify includes 300 build minutes per month across all sites.
• Vercel offers 100 GB of bandwidth and 1 million serverless function invocations per month.
• Cloudflare Pages offers unlimited bandwidth and requests for static assets, with generous free-tier support for Workers (100,000 requests/day) and access to edge functions.
• Firebase App Hosting provides 10 GB of bandwidth and 5 GB of storage monthly.

Code can be deployed either:

• Manually by uploading files to the hosting server or
• Automatically via CI/CD pipelines (Continuous Integration and Continuous Deployment), often integrated with Git repositories using tools like GitHub Actions.
• These pipelines streamline the process by automatically building, testing and deploying your application whenever new changes are pushed to the repository.

Doman Name Registration and DNS Configuration

When a website is first deployed to the cloud, it becomes publicly accessible through a default URL provided by the hosting service.

• While functional, these URLs are usually long, generic and hard to remember.
• From a cost-saving perspective, it might seem unnecessary to purchase a custom domain.
• However, it is often the free things that cost the most.

Using the default domain is perfectly acceptable if the website is simply a personal portfolio project.

• However, for businesses or individuals aiming to establish credibility, brand recognition and user trust, securing a unique and memorable domain name (e.g., https://www.your-awesome-app.com) is essential.
• Moreover, a custom domain can boost your site’s search engine ranking (SEO).

The first step is to purchase a unique custom domain through a domain registrar, such as Cloudflare, Porkbun, NameCheap, Squarespace Domains, GoDaddy or Domain.com.

• Domain extensions (like .com, .org, .net) come with different pricing models.
• Some registrars offer discounted prices for initial registration but higher renewal rates later.
• Always compare both upfront and long-term costs when selecting a domain.
• Other important priorities to consider include security (e.g., domain locking, DNSSEC support, two-factor authentication on the registrar account, identity verification for ownership changes and a robust domain recovery process), DNS integration and performance, WHOIS protection (domain privacy), user interface, customer support and registrar reputation.
• Although GoDaddy is one of the most widely used domain registrars, users should be cautious when signing up. The platform has been frequently criticized for its aggressive upselling of add-ons and for offering deep first-year discounts that often lead to higher renewal fees in subsequent years. Domain.com is another registrar where users should proceed carefully.

At a technical level, the internet functions by browsers sending requests to web servers using IP addresses (IPv4 or IPv6), which act like digital contact numbers for each server.

• To connect your custom domain to your web app, you must configure DNS (Domain Name System) records through your domain registrar.
• DNS acts like the internet’s phonebook, translating human-readable domain names into numerical IP addresses.

Key DNS records include

• A Record maps your root domain to a specific IP address (e.g. your server or hosting provider). IP addresses can be identified using DNS Lookup Tools.
• CNAME Record points a subdomain (like www.) to another domain name. This is often used when a hosting provider gives you a specific subdomain.
• Moreover, some hosting providers (e.g. Firebase) will ask you to add a specific TXT record to domain registrars to verify your domain ownership.

Finally, you must also configure the settings within your hosting provider's dashboard to accept and route traffic from your new domain.

Once your custom domain is properly set up, it is important to ensure all visitors land on a consistent version of your site.

• Users should typically configure a redirect from the non-www version of their domain to the www version (or vice-versa), depending on their preferred format.
• For example, redirecting all traffic from your-awesome-app.com to www.your-awesome-app.com ensures that search engines treat both versions as the same site.
• This improves SEO by avoiding duplicate content issues and helps maintain consistent branding and analytics tracking.

NOTE: DNS propagation may take 24-48 hours, so give it time for the domain to take full effect across the internet.

Summary

Together, these three stages - code development, application deployment and domain configuration - transform a local project into a fully accessible, professional and reliable web application that is ready for the world.

Once you have decided on the branding for your service or product, it is a smart investment to secure a custom domain early.

• This helps prevent others from registering it later, potentially forcing you to pay a premium or losing access to your ideal domain entirely.
• Even if you are not ready to launch a full website, you can still use the domain to redirect visitors to your online store, social media profiles, portfolio or a simple landing page.
• Owning the domain also allows you to set up a professional email address (e.g. you@yourbrand.com), which enhances trust and credibility.
• The annual cost is relatively low, especially considering the long-term value for brand protection, flexibility and search visibility.
• As domain names continue to become more competitive, securing one early is a proactive step toward building a strong and consistent online presence.