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.

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 GoDaddy, Cloudflare, Bluehost or NameCheap.

• 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.

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.

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.