ScanSkill
Sign up for daily dose of tech articles at your inbox.
Loading

Add a Custom Domain to Free Heroku App Using Cloudflare

Add a Custom Domain to Free Heroku App Using Cloudflare
Add a Custom Domain to Free Heroku App Using Cloudflare

Are you looking for how to add a custom domain to free Heroku app ?? for free ??

Heroku is one of the most popular cloud hosting services. It provides a free tier to host your websites which is also quite capable, you can deploy up to 5 applications, hosted in their *.herokuapp.com domain. But to move the app to a custom domain you have to pay. In this tutorial, you’ll learn to add a custom domain to free Heroku app using Cloudflare workers.

Let’s dive into the tutorial!

Prerequisites:

  • Cloudflare Account (free)
  • Cloudflare Workers enabled (free)
  • Application hosted on Heroku

Add a Custom Domain to Free Heroku App Using Cloudflare

Create Cloudflare Worker

Cloudflare’s worker is a W3C standard API for scripts that run in the background in a web browser and intercept HTTP requests. It runs on Cloudflare’s servers, not in a browser. Using this feature, you can run any JavaScript code, Intercept and modify any HTTP request and response URLs, status, headers, and body content. Know more about Cloudflare Worker here.

Login to your Cloudflare account and go to Workers from the sidebar menu:

  • Click on Create a Service. Then select HTTP handler as a starter and click on Create Service.
Workers Service
Create a Worker Service
  • On the next page you can create your own environment for this tutorial I have used the default environment (production).
Resources
  • Click on Quick edit button. This is our most important part where you’ll define the worker.
Edit worker script
  • Now replace Hello world code with the following code. Here, the code below will redirect the URLs from *.yourdomain.com.np/* (or *.yourdomain.com/*) to yourapp.herokuapp.com/*
// keep track of all our blog endpoints here
const myBlog = {
  hostname: "yourapp.herokuapp.com",
//   targetSubdirectory: "/",
//   assetsPathnames: ["/", ""]
}

async function handleRequest(request) {
  // returns an empty string or a path if one exists
  const formatPath = (url) => {
    const pruned = url.pathname.split("/").filter(part => part)
    return pruned && pruned.length > 1 ? `${pruned.join("/")}` : ""
  }

  const parsedUrl = new URL(request.url)
  const requestMatches = match => new RegExp(match).test(parsedUrl.pathname)

  // if its blog html, get it
  if (requestMatches(myBlog.hostname)) {
    console.log("this is a request for a blog document", parsedUrl.pathname)
    const targetPath = formatPath(parsedUrl).substr(myBlog.hostname.length)
    return fetch(`https://${myBlog.hostname}/`)
  }

  // if its blog assets, get them
  if ([myBlog.assetsPathnames].some(requestMatches)) {
    console.log("this is a request for blog assets", parsedUrl.pathname)
    const assetUrl = request.url.replace(parsedUrl.hostname, myBlog.hostname);

    return fetch(assetUrl)
  }

  console.log("this is a request to my root domain", parsedUrl.host, parsedUrl.pathname);
  // if its not a request blog related stuff, do nothing
  return fetch(request)
}

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})

To know more click here.

  • After replacing the script, click on Save and Deploy button.
Worker script to redirect domain URLs

You have successfully deployed your worker to an auto-generated endpoint. Check the link shown to you in the confirmation pop-up window.

Worker pop-up confirmation window

Add Routing

Go to Triggers, click on Add route.

  • Edit route with your domain name or where you’d like to display the content hosted on Heroku.
Add route
  • Select zone as your zone. Click on Add route.
Worker trigger

Conclusion

Here you go, you’ve used Cloudflare’s worker to add a custom domain to free Heroku app.
Similar articles:

Sign up for daily dose of tech articles at your inbox.
Loading