Deploying A Web App To Your Own Domain - What You Might Wanna Know

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.

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!

SSL Setup

So, what is SSL (Secure Socket Layers)? You can treat this as another layer of security before a user gets the page from the internet. When user tries to establish a connection through HTTPS (by adding the protocol of https at the end of the URL - e.g. https://kena.lol), it will try to check if there is a certificate that acknowledge the authenticity of the page, and will only establish connection if it is present, and user will be able to see the page. Most browsers nowadays are enforcing the HTTPS protocol for more secure browsing.

These certificates need to be renewed in intervals. Previously, it can be as long as 5 years, but as more security concerns are addressed, the maximum lifespan for a certificate is 1 year, so you have to renew it at most every year (more accurate - 398 days, extra few days to allow mitigation). You can choose to shorten the lifespan, however you have to remember to keep renewing it, manually or automatically.

Often that some providers like Cloudflare already has SSL/TLS in place if you are using their services. But in case that you are deploying on your own, you can use services like Let's Encrypt (often used with other services such as NGINX) or auto-renewal such as Caddy (Let's Encrypt also has auto-renewal feature as well).

Shout out to @koas for pinging about SSL 🎉

---

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!