How to Setup Automated Deployment For Multiple Apps Under a Single Github Repository In Heroku
Published: 2021-11-28 06:53:44

<!-- wp:paragraph -->
<p>In this tutorial, we will see how to set up automated deployment of multiple applications under a single GitHub repository in Heroku. This will also be helpful if you want to deploy a subdirectory in your GitHub repo to Heroku.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><a href="https://dev.to/new#introduction"></a>Introduction</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Recently, I faced some issues when trying to deploy an application. It was a full-stack app and had a separate folder for all the react stuff and another folder for the Flask API.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The way our app was set up - the flask API had to be deployed and the deployed API's URL was invoked in the React App. In this tutorial, I will talk through my solution.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><a href="https://dev.to/new#what-you-will-learn"></a>What You will Learn?</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li>You will learn how to deploy an app to Heroku if your app is in a sub-directory, i.e it is not in the root directory. Imagine you have a single GitHub Repo with multiple APIs and would like to deploy each one of them individually.</li><li>You will learn how to deploy multiple apps with different buildpacks. In this tutorial I will have a React+Flask App. However, this tutorial should still be helpful if you are using a different tech-stack</li><li>Your Front-End and API will automatically be deployed to Heroku whenever you push to your 'deploy' branch</li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2><a href="https://dev.to/new#my-folder-structure"></a>My Folder Structure</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can find the GitHub repo&nbsp;<a href="https://github.com/rahulbanerjee26/Heroku_Deploy">here</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Below is a screenshot of the folder structure of the app</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--yMIoCtzj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6nip7hv6a52r97a6a31y.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--yMIoCtzj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6nip7hv6a52r97a6a31y.png" alt="Folder Structure of App"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Inside the root folder, there are three files.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>A folder called API. This contains the flask API and will have to deployed as a separate project on Heroku</li><li>A folder called FrontEnd. This folder has another folder called hello-world which is a simple react app created using 'create-react-app'</li><li>A .gitignore file</li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2><a href="https://dev.to/new#deploying-the-react-app"></a>Deploying the React App</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Before moving, ensure all your files are pushed to a GitHub repo. The name of my repo is 'Heroku_Deploy'</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Create a&nbsp;<a href="https://dashboard.heroku.com/new-app">new project on Heroku</a><br><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--pndsYlLY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jk57o0cgjijodv36jar.png"></a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For the Deployment Method choose the second option 'Connect to GitHub'. Search for your repo and click on the 'connect' button</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--pndsYlLY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jk57o0cgjijodv36jar.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--pndsYlLY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jk57o0cgjijodv36jar.png" alt="New App on Heroku"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Chose the branch you want to deploy from and click on 'Enable Automatic Deploy'. Whenever you push any changes to the branch, the React App will be re-deployed.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--qoLh1rjc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y39llt1k4p0o1bg23xct.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qoLh1rjc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y39llt1k4p0o1bg23xct.png" alt="Connect"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now, scroll up and go to Settings. Go to 'BuildPacks' and click on the 'Add Buildpacks' Button. Add the following buildpack</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">https://github.com/timanovsky/subdir-heroku-buildpack</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Once you are done, add the buildpack for your app. In my case, since it is a React App, I will add the NodeJS buildpack.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2LEkwqQl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx0er7vksew27n2xtvxr.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2LEkwqQl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx0er7vksew27n2xtvxr.png" alt="Buildpacks"/></a></figure>
<!-- /wp:image -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Ensure the subdir-heroku-buildpack is on the top of other other buildpacks.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>Now go to the Config Vars settings to add the following Config Variable. The Key is PROJECT_PATH and the value is the path to your app. In my case, the react-app is in a folder 'hello-world' which is in a folder 'FrontEnd'</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">FrontEnd>hello-world>react-app</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>In my case, the config var would look as below</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--f5s5NBoL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5p9yn2cfir2de3lmg4v.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--f5s5NBoL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5p9yn2cfir2de3lmg4v.png" alt="Config Vars"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now, Scroll Up and go to the 'Deploy' section. Click on 'Deploy Branch'.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--bsa0kk5A--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htcbx0lbi3bpaa9n7pyx.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--bsa0kk5A--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htcbx0lbi3bpaa9n7pyx.png" alt="Deploy Branch"/></a></figure>
<!-- /wp:image -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>You are all set. Whenever you push any changes to your branch, heroku will automatically re-deploy your app specified in PROJECT_PATH</p></blockquote>
<!-- /wp:quote -->

<!-- wp:heading -->
<h2><a href="https://dev.to/new#deploying-the-flask-api"></a>Deploying the Flask API</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>It is a similar process as above.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Create a&nbsp;<a href="https://dashboard.heroku.com/new-app">new project on Heroku</a><br><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--pndsYlLY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jk57o0cgjijodv36jar.png"></a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For the Deployment Method choose the second option 'Connect to GitHub'. Search for your repo and click on the 'connect' button</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--pndsYlLY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jk57o0cgjijodv36jar.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--pndsYlLY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jk57o0cgjijodv36jar.png" alt="New App on Heroku"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Chose the branch you want to deploy from and click on 'Enable Automatic Deploy'. Whenever you push any changes to the branch, the Flask API will be re-deployed.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--qoLh1rjc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y39llt1k4p0o1bg23xct.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qoLh1rjc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y39llt1k4p0o1bg23xct.png" alt="Connect"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now, scroll up and go to Settings. Go to 'BuildPacks' and click on the 'Add Buildpacks' Button. Add the following buildpack</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">https://github.com/timanovsky/subdir-heroku-buildpack</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Once you are done, add the buildpack for your app. In my case since it is a Flask API so I will add the Python buildpack</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--a2P-efpq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zlqhsw7tnbxy3lw8x3m.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--a2P-efpq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zlqhsw7tnbxy3lw8x3m.png" alt="Buildpacks"/></a></figure>
<!-- /wp:image -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Ensure the subdir-heroku-buildpack is on the top of other other buildpacks.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>Now go to the Config Vars settings to add the following Config Variable. The Key is PROJECT_PATH and the value is the path to your app. In my case, the Flask app is in a folder called 'API' so my config variable would look like this</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QJqVvUwY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvyld8r02r7clsrbyvhn.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QJqVvUwY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvyld8r02r7clsrbyvhn.png" alt="Config Variable"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now, Scroll Up and go to the 'Deploy' section. Click on 'Deploy Branch'.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--bsa0kk5A--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htcbx0lbi3bpaa9n7pyx.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--bsa0kk5A--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htcbx0lbi3bpaa9n7pyx.png" alt="Deploy Branch"/></a></figure>
<!-- /wp:image -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>You are all set. Whenever you push any changes to your branch, heroku will automatically re-deploy your app specified in PROJECT_PATH</p></blockquote>
<!-- /wp:quote -->

<!-- wp:heading -->
<h2><a href="https://dev.to/new#testing"></a>Testing</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In my case, I had set Heroku to track the master branch in both projects. So whenever I push any changes to the master branch, it will automatically build and re-deploy the React App and the Flask API. I tested it with <a href="https://github.com/rahulbanerjee26/Heroku_Deploy/commit/2713a4981d9b75b25014bfe2bca36d7d367d7251">this commit</a> and it automatically re-deployed the <a href="https://front-end1212.herokuapp.com/">React App</a> and the <a href="https://api1212.herokuapp.com/">Flask API</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><a href="https://dev.to/new#conclusion"></a>Conclusion</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>I hope this article saves you from the few hours I had to spend setting Heroku up to automatically deploy multiple apps in the same repo.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Connect with on&nbsp;<a href="https://www.linkedin.com/in/rahulbanerjee2699/">LinkedIn</a>,&nbsp;<a href="https://twitter.com/rahulbanerjee99">Twitter</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you like my articles and would like to support me, please consider using my&nbsp;<a href="https://rahul1999.medium.com/membership">Referral link</a>&nbsp;to sign up for a Medium Membership. You will be able to access all articles behind the paywall. If you use my referral, I will get a part of your monthly subscription at no extra cost for you.</p>
<!-- /wp:paragraph -->