Integrating Netlify Frontend with External Backend Using Custom DNS Configuration.

Hi there 👋, I put this piece together because this was me trying to host a frontend project on Netlify then host the backend on a different platform while using a primary domain for the FE (frontendapp.com) and a subdomain for backend API (backend.frontendapp.com)--Remember I said that backend is hosted on another platform too!

Please read on...😄

When you deploy an app on Netlify, Netlify generates a custom URL that you can use, e.g., gibberish-gibberish.netlify.com... Netlify also allows you to attach a 'real' domain to this custom domain so your frontend app is exposed to a primary domain.

For your attached primary domain to work properly, you will have to point to Netlify DNS in the custom nameservers section of the primary domain account, in my case, Namecheap.

Now, if I do this (point my DNS to Netlify), my subdomain (backend domain) will be affected. I mean, it will not work because my backend is hosted on another hosting platform.

So we have a problem: FE (frontend) URL works but backend doesn't work because using Netlify DNS as a nameserver for my primary domain will also affect the subdomain too.

You want to ask: why not host the backend on Netlify? Netlify only hosts static files and on top of that, my backend is PHP/Laravel. I hope we are getting somewhere 👀? Walk with me.

So how did I tackle this issue? It's simple. I switched to using the basic DNS config for my primary domain.

Let me explain in detail....

Configuring DNS For The Frontend

So in my DNS record settings via the advanced section, I added an ALIAS Record and set the host to @ then pointed the record to Netlify's load balancer which is apex-loadbalancer.netlify.com
Netlify's doc reference

One more thing,
After the domain system for the configuration was properly propagated, I got this error:

Site Not Found. This in itself is good news. You know why? It means that the domain configuration works but it happened that I still had an old Netlify DNS setup. So the solution will be to delete the former DNS entries from my Netlify account so the external DNS configuration can work.

Configuring DNS Record for Backend

For our backend which is a subdomain for the API deployment on another hosting platform, I created some DNS records for that too.
I set the Record type to A record then set host as subdomain name (e.g., backend) let it point to the platform's IP address.

With the following, I was good.

Summary

Now I have my FE hosted on Netlify with some perks like auto deployment, GitHub PR preview URLs, etc., which uses the primary domain (e.g., frontendapp.com) while I conveniently have my API on another platform that uses a subdomain (backend.frontendapp.com). All managed with the DNS configurations mentioned above.

Thanks for reading through. If you do have any questions, do let me know.

Between, I have an open source app I am maintaining with my friends, whatcompanystack.com. Where we are trying to see how we can contribute our quota to the African tech startup ecosystem. whatcompanystack.com lists African startups and their tech stacks. You can use this to get insight into what tech stacks some startups use, etc. It is opensource. You should take a look.