Deploy github project to Heroku with custom domain

This tutorial will show you how to create a github project and then how to deploy the project to Heroku with a custom domain name. Today, I wanted to point one of my domains to a Heroku app I’ve been working on. This is how I did it.

Adding an existing project to GitHub using the cli

Create a new repository on GitHub. To avoid errors, do not initialize the new repository with README, license, or gitignore files. You can add these files after your project has been pushed to GitHub.
Open Terminal and choose the local directory
Git clone the repository, from this point you will see just the Read.me and .git folder
Create a composer.json file you can leave it blank, or you can use to add packages if you want
Add the files in your new local repository. This stages them for the first commit. Use git add .
Commit the files that you’ve staged in your local repository. git commit -m “Initial check in”
Push the changes in your local repository to GitHub. git push origin master

Deploy github project to Heroku with custom domain

Login to Heroku Dashboard
New Create new App
Add a name to your app all letters should be lowercase. or App Name (optional) Leave blank and heroku will give a random name to your app
Choose your run time selection Europe or United States and Create App
Navigate to deploy tab, choose the deployment method to github, authenticate and search for the github repo and then connect
Enable Automatic deploys so each time you will push changes to your github master branch Heroku will deploy your project automatically
Finally, Deploy Branch

🙂 Congratulations, for your first deployment!

If you have follow the above above steps you should see a VIEW button.

Now the tricky part :S

↓

Pointing a Domain to Heroku

Login to heroku, select your app and navigate to the settings tab
Go to the section Domains and certificates
Click Add Domain
You can then add each subdomain individually, or add a wildcard in for example
- www.domain.com
- blog.domain.com
- *.domain.com

Heroku recommends against mapping apex domains (ie. panayiotisgeorgiou.net) to your app for a number of reasons. We’ll get around that by redirecting our apex domain to the www subdomain. This way if any users hit that url directly, they will still be able to hit the app.

For each subdomain you want to setup, configure your DNS with a CNAME record pointing the subdomain to the applicable Heroku hostname. Head to your hosting provider Web Panel, then Manage Domains > [your domain] > DNS. On the new page, you’ll want to “Add a custom DNS record.” Set it up as follows for the www subdomain:

Subdomain Name: www
Type: CNAME
Value: [your app name].herokuapp.com

You should now be able to hit www.[your domain].com and it should bring up your Heroku app. If not, you may need to refresh your DNS, as it may be cached.

But what if a user hits your site without the www subdomain? Here’s where the redirect comes in.

React Paris 2024

Hacktoberfest 2023

Countdown to Shift Conference 2023

To redirect our apex domain, we’ll head back to web panel.

Under Manage Domains, edit your domain.

You’ll see a section called redirect.

Under there, set your root domain, [your domain].com, to redirect to http://www.[your domain].com.Now users going to either can use your sweet new app.

Voila!