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 work­ing on. This is how I did it.

Deploy github project to Heroku with custom domain

Adding an existing project to GitHub using the cli

  1. 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.
  2. Open Terminal and choose the local directory
  3. Git clone the repository, from this point you will see just the Read.me and .git folder
  4. Create a composer.json file you can leave it blank, or you can use to add packages if you want
  5. Add the files in your new local repository. This stages them for the first commit. Use git add .
  6. Commit the files that you’ve staged in your local repository. git commit -m “Initial check in”
  7. Push the changes in your local repository to GitHub. git push origin master 

Deploy github project to Heroku with custom domain

  1. Login to Heroku Dashboard
  2. New Create new App
  3. 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
  4. Choose your run time selection Europe or United States and Create App
  5. Navigate to deploy tab, choose the deployment method to github, authenticate and search for the github repo and then connect
  6. Enable Automatic deploys so each time you will push changes to your github master branch Heroku will deploy your project automatically
  7. 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

  1. Login to heroku, select your app and navigate to the settings tab
  2. Go to the section Domains and certificates
  3. Click Add Domain
  4. You can then add each sub­do­main indi­vid­u­ally, or add a wild­card in for example
    • www.domain.com
    • blog.domain.com
    • *.domain.com

Heroku rec­om­mends against map­ping apex domains (ie. panayiotisgeorgiou.net) to your app for a num­ber of rea­sons. We’ll get around that by redi­rect­ing our apex domain to the www sub­do­main. This way if any users hit that url directly, they will still be able to hit the app.

For each sub­do­main you want to setup, con­fig­ure your DNS with a CNAME record point­ing the sub­do­main to the applic­a­ble Heroku host­name. Head to your hosting provider Web Panel, then Man­age Domains > [your domain] > DNS. On the new page, you’ll want to “Add a cus­tom DNS record.” Set it up as fol­lows for the www subdomain:

  1. Sub­do­main Name: www
  2. Type: CNAME
  3. 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 with­out the www sub­do­main? Here’s where the redi­rect comes in.

To redi­rect our apex domain, we’ll head back to web panel.

Under Man­age Domains, edit your domain.

You’ll see a sec­tion called redi­rect.

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

Voila!

Follow me on Instagram

instagram

I hope you enjoyed the tutorial if you have any problems please use the comment box below.

Happy coding 🙂

Check out More Tutorials

SET UP GIT ON CODA 2

HOW TO INSTALL LINUX, APACHE, MYSQL, PHP (LAMP) STACK ON UBUNTU

PARSE IS SHUTTING DOWN-WHAT TO DO NEXT?

SYMFONY2: APP_DEV.PHP ALLOW ACCESS ONLY TO IP ADDRESS

youtube-subscribe-button