Deploying A Web App To Your Own Domain - What You Might Wanna Know
Tags: beginners, webdev
Published: 2024-07-16 16:14:29

Salam and hello everyone!

Again, it has been a very long time back then when I wrote the last article. This time, just a simple and basic thing, I want to write a basic topic, on what you should know when deploying a web app (can be frontend, backend, or some sort) to your own domain.

However, before diving into the stuff that you need to know, you have to learn few terms and how is it related to the deployment.

If you see any mistake throughout my article, please, comment down below, so others can learn together as well.

So, let's dive right in!

---

## TL;DR

Identify what kind of deployment are you using, and the identifier to your deployed app. It can be IP address or another domain.

Buy a domain, use DNS records to map it to your deployed app, and you are done!

---

## Basic Terminology

1. **IP Address**
 This is a unique identifier assigned to device on a network. You can say, it is like an address to your home, that is unique to the whole network. So, internet knows where to route you to the right destination. E.g. `74.132.0.3`. It is further divided into IPv4 and IPv6, but let's keep it simple this time.

2. **Domain Name**
A human-readable name, which helps user to navigate to an address easily instead of IP address. For example, `google.com`.

3. **DNS (Domain Name System)**
DNS is responsible to translate domain name to the IP address. For example, when you enter `www.example.com`, DNS will help to translate that into the IP address, which is `93.184.215.14`. You can check out [how it happens behind the scene](https://www.nslookup.io/domains/www.example.com/webservers/).

4. **HTTP (HyperText Transfer Protocol)**
HTTP is a protocol to transfer data between a client and a server. Of course, there are a lot of protocols in the network, but HTTP is usually used for web servers.

5. **HTTPS**
A secured version of HTTP, where it requires SSL or TLS to establish connections for the protocol.

6. **SSL/TLS**
A tool that helps to establish secure communication on the internet.

Yu can google these terms and check them out what they do in depth, but let's focus on the deployment for now.

---

## Building Your Application

There are tons of ways available to build your application. With the emergence of AI, building a simple application should be accessible for all developers from different backgrounds. Whether it is for a website, a server, or a service, developers have a lot of options to choose from.

Different languages such as Golang, Rust, Javascript, PHP, Python, Ruby, or different libraries or frameworks such as Express, Wordpress, Feather.js, React, Vue and others, might impact on how the system will be deployed.

For example, PHP system might be relying on Apache server to run the code, that has different strategy on how a Node.js server works that either requires Node.js environment, or just build it and run on PM2. You might also know about containerisation or virtualisation, which also another part of the deployment you might want to explore as well.

To put it simply, there is no "one rule fits all" when it comes to deployment, but you can Google on how each of these languages and libraries are deployed, and see what are the use cases when a deployment strategies is being used.

However, there is a common thing that you can look out when it comes to deployment. As you deploy your app/server/service, there will be an identifier to it, whether it is IP address, or a service domain. You might want to learn on how to get the IP address of the service. Make sure that it is a static address.

---

## How User Opens The Web

There are lot of things happen when user opens a website. But I will try to put it as simple as possible, so you will know what to do next after you deploy your own web app. Here are simple chronology of how it works:

1. User tap in `www.example.com` into the address bar
When this happens, the browser will go to the internet to find the domain registrars (some sort of librarian, you ask them about book, then they will search it for you), to find the records of the domain.

2. Look up for the records
After finding the domain registrar, it will look up for the records inside the DNS of the domain. For example, after finding `example.com`, it will do a look up for the record of `www` and where it points to. In our case, `www` record points to `93.184.215.14`. A single domain could store a lot of records, which will be explained later.

3. Returns the destination address
It can be an IP address, it can be another domain, depends on the record kept in the DNS of the domain.

4. Redirect to the given address
After getting the destination address, it will try to communicate with the address.

5. Establishing connection through protocol
Here is where HTTP/HTTPS comes in. For sure, there are a lot of protocols in play as well, such as TCP/IP, so that user can communicate to the server.

6. Returns the content
After establishing connection, the server will response with the needed resource (or as simply, content) to the user, and ready to be consumed.

---

## Acquiring a Domain

For a certain services, such as Vercel, Cloudflare, or Netlify, after deploying the web app, the domain is assigned to them, but usually has "provider domain". For example, when you deploy on Vercel, your deployed app will get a domain like `kena-lol.vercel.app`. While it is okay to have the domain straight away, you might think "hmmm, it will be cooler to have my own domain name instead". This is where the custom domain comes in, but to do that, you need to require a domain name first.

To acquire a domain name, you have to buy it from the domain registrars. Depends on your needs, you can google all the domain registrar, but the commons such as Namecheap, Porkbun, IONOS, Hostinger, DreamHost, AWS Route 53, Cloudflare or others, or private ones to acquire exclusive domain extensions such as `.my` through MYNIC.

To buy a domain, I would suggest that you pick up any domain registrars and look up to their documentations, since each of them might have different processes. The pricing depends on the algorithm sets by each registrars, so you might want to compare the pricing and the services.

After buying the domain, you are ready to map it to your app.

---

## Mapping to Your Deployed App

After registering your domain, you should have access to the dashboard of the registrar, where you can configure the settings of your domain.

I would like you to focus on the DNS first, you can explore the rest of them after mapping your domain.

You might want to look out for "DNS Records" on the registrar picked by you.

You might see that, there will be 2 records already assigned to a resource, that is `@` and `www`.

`@` is just an indication of the root of your domain. This is equivalent to user entering `example.com` without anythings comes before `example.com`. While `www` is actually what we call as subdomain, which is a domain under a domain, so this is equivalent to `www.example.com`.

You can add your own subdomain later on, such as `test`, so it will have `test.example.com` and map it to another resource.

### Records

Record is a way you want to map a subdomain to a resource. There are a lot of record types, such as:

- **A**: Usually called `A record`, where we use the IPv4 address as a resource. This will be useful when you have full access to the resource and assign the IP straight to it.
- **AAAA**: Usually called `AAAA record`, is just like `A record` but for IPv6.
- **CNAME**: Usually called `cname record`, where we use the domain name given by the deployment provider to establish resource assignment. Usually, this requires the other party to validate the domain ownership, to make sure that you really own the domain.

And there are other record types as well, such as `MX record` for email service, `NS record` to point to different DNS, `SRV record` for specific port assignment, and so on. You can explore them more later on.

Here is where you want to map your domain to its resources based on record type.

For example, assuming that you have 3 services. 2 services that you have access to its IPv4, and 1 service that you deployed on Vercel.

For the first one, you want to deploy it on your root domain. Let's say, the IPv4 of your server is `199.59.243.226`. On the record, you should select `A record`, put `@` or your own domain `example.com` as the name, and the IP address in the content part. You might want to also have it as `www` as well, so you can create another `A record`, put `www` as the name, and the exact same IP address as the content. With this, user can access the same app when they enter `example.com` or `www.example.com`.

(This depends on the your DNS manager, might have slight difference in naming)

For the second one, let's say you want to create a different subdomain, let's pick it `core`. So, your deployed service's IPv4 is `142.250.191.46`. Same process, you put `core` as the name, pick `A record` and put `142.250.191.46` as the content. User can see the site when they enter `core.example.com`.

For the third one, you don't have the IP, but instead Vercel assigned you to a domain - `tricky.vercel.app`. Vercel has its own dashboard if you want to map it, and they have its own way mapping the domain. Just go to Vercel dashbord, go to settings, go to domains sections, and enter your desired address. For example `tricky.example.com`. Vercel will tell you step by step on how to add it to your DNS records, and they will handle the rest.

Of course it depends on the provider, as different provider has different approaches.

### DNS Propagation

After adding the records, the whole internet needs to know how to go to that resource. For this, DNS propagation will happen, and it might take some time, and it can be as quick as 1 minute, or as long as 24 hours.

So, how does this happens? Just imagine, that after saving the records, the DNS has to tell every main router on the internet that there is a new cool kid on the block. Every router need to save this info on their so-called router table, so it will know where to go to. Remember when user enter a domain, it will find the registrar? Yup, there is where this DNS propagation comes in.

After the DNS propagation done, you should be able to open your deployed app using your desired domain name.

And boom, it is done!

---

## How Much Does It Cost

Well, it depends on your deployment strategy. If you are using local deployment on your own machine, or if you are using deployment service such as Vercel, or Cloudflare, or Netlify, or Render.io, or Fly.io, there should be a free ones that you can use. So, your deployment cost could be zero! If you add your own custom domain, the only cost you pay is the domain acquisition!

If you are using something like shared hosting, you might have to pay for the hosting, but you might have limited stuff that you can do.

If you are using VPS, it depends on the size of VPS that you are using, whether it is from AWS, or GCP, it can vary based on the variant you pick.

As I say, it all depends on what language/library/framework and your deployment strategy.

So, it doesn't have fix price, it all depends on your deployment strategy and the need of your own domain.

---

## Extra Stuff

Usually, the cheapest domain will be `.xyz` (or probably something else, I don't know) or else, if you have extra money, you can go to `.ai` or any extensions that you see fit.

For example, mine is `atifaiman.dev`, using `.dev` as the extension. I also map it to `alserembani.com` if you are curious.

---

## Conclusion

So, that is what you might wanna know when you want to deploy to your own domain. For sure, there are tons of thing you need to know, but this article should serve a simple way for you to have your own domain to your web app.

So, that's it for today, and peace be upon ya!