<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Uppernauts</title>
    <description>The latest articles on DEV Community by Uppernauts (@uppernauts).</description>
    <link>https://dev.to/uppernauts</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F369%2F58e75a71-4d87-4e56-a153-633260e6bf76.png</url>
      <title>DEV Community: Uppernauts</title>
      <link>https://dev.to/uppernauts</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/uppernauts"/>
    <language>en</language>
    <item>
      <title>Multiple environments with Heroku and Git</title>
      <dc:creator>Paula Santamaría</dc:creator>
      <pubDate>Thu, 25 Oct 2018 22:14:06 +0000</pubDate>
      <link>https://dev.to/uppernauts/multiple-environments-with-heroku-and-git-c9l</link>
      <guid>https://dev.to/uppernauts/multiple-environments-with-heroku-and-git-c9l</guid>
      <description>&lt;p&gt;I've been using &lt;a href="http://heroku.com"&gt;Heroku&lt;/a&gt; as a dev environment to work with my team for the last few months. It was going great until last week our client asked for a live demo 😱. &lt;br&gt;
We couldn't do a demo on a dev env, mainly because we can't ask our team to stop working during the demo (and we all know dev environments are usually filled with cat pics, "tests" and "lorem ipsums"), so we decided to create a "demo" env.&lt;br&gt;
I went straight to the Heroku docs to figure out how to handle multiple environments. In this post I'll try to cover everything I learned on the subject.&lt;/p&gt;
&lt;h2&gt;
  
  
  Git remote
&lt;/h2&gt;

&lt;p&gt;The first thing we need to understand is &lt;code&gt;git remote&lt;/code&gt;.&lt;br&gt;
Taken from the GitHub docs: &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;A remote URL is Git's fancy way of saying "the place where your code is stored."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;You can run this command to check which remotes you have configured in your project:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git remote &lt;span class="nt"&gt;-v&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In your typical project the output would be something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; origin https://your-git-repo/your-git-project &lt;span class="o"&gt;(&lt;/span&gt;fetch&lt;span class="o"&gt;)&lt;/span&gt;
&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; origin https://your-git-repo/your-git-project &lt;span class="o"&gt;(&lt;/span&gt;push&lt;span class="o"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;👆 In this case &lt;code&gt;your-git-project&lt;/code&gt; only has 1 remote configured and it's called "origin".&lt;/p&gt;

&lt;p&gt;&lt;em&gt;(you can also check your project's remotes under &lt;code&gt;your-git-project/.git/config&lt;/code&gt;)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;In case you want to dig more into it, here's the &lt;a href="https://help.github.com/categories/managing-remotes"&gt;GitHub doc about Managing remotes&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Multiple remotes
&lt;/h2&gt;

&lt;p&gt;So as you may have guessed, your git project can handle multiple remotes, which means you can push your code to any existent remote.&lt;/p&gt;

&lt;p&gt;To add a new remote to your project:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git remote add remote-name https://your-git-repo/your-git-project.git
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And to push your code to a specific remote and branch:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git push remote-name branch-name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  So what about Heroku?
&lt;/h1&gt;

&lt;p&gt;When we create a Heroku app using the Heroku CLI, it automatically adds the remote to our new app for us. In fact, if you check the logs you'll see something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; Git remote heroku added
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Taken from Heroku's documentation:  &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;When you create an application on Heroku, it associates a new Git remote, typically named Heroku, with the local Git repository for your application.  &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;So the Heroku CLI takes care of adding a remote called "heroku" into your git config. My recommendation would be to replace that name for something that reflects the remote's purpose more accurately, especially if you're going to use Heroku to handle more than one environment of your app.&lt;/p&gt;

&lt;h2&gt;
  
  
  Update Heroku's remote name
&lt;/h2&gt;

&lt;p&gt;To set up a better name for your Heroku remote, run this command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git remote rename heroku heroku-dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Specify the remote name when creating a Heroku app
&lt;/h2&gt;

&lt;p&gt;You can also define a better remote name first hand when creating the app, like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;heroku create myAppName &lt;span class="nt"&gt;--remote&lt;/span&gt; heroku-dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Config Vars
&lt;/h2&gt;

&lt;p&gt;There's one more thing. Your app needs to know to which env it's been deployed, and that's when Config Vars come in. Config variables can be accessed from our code and used to figure out which env it's in and, for example, access that particular environment's database (you don't want your dev environment making inserts into your demo database).&lt;/p&gt;

&lt;p&gt;We can easily add a new config var from the Heroku CLI, like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;heroku config:add &lt;span class="nv"&gt;ENV&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"dev"&lt;/span&gt; &lt;span class="nt"&gt;--remote&lt;/span&gt; heroku-dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;E.g: Here's a simplified example of how I manage different connection strings for each environment with Node.js, MongoDB and config vars:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// config.js&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;dev&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="na"&gt;connectionString&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mongodb://my-DEV-db-connection-string&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;demo&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="na"&gt;connectionString&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mongodb://my-DEMO-db-connection-string&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// app.js&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./config&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="kd"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;NODE_ENV&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;mongoose&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;mongoose&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;mongoose&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;connect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;connectionString&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;useMongoClient&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Check out the Heroku docs to learn &lt;a href="https://devcenter.heroku.com/articles/config-vars"&gt;More about Config vars&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Summary
&lt;/h1&gt;

&lt;h3&gt;
  
  
  How to create multiple environments for a new app :
&lt;/h3&gt;

&lt;p&gt;1- Create a Heroku app for every environment you need, and specify a remote name for each one.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;    heroku create myAppName &lt;span class="nt"&gt;--remote&lt;/span&gt; heroku-dev
    heroku create myAppName &lt;span class="nt"&gt;--remote&lt;/span&gt; heroku-demo 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;2-  Setup a config var for each env to let your app know where is running&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;    heroku config:add &lt;span class="nv"&gt;ENV&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"dev"&lt;/span&gt; &lt;span class="nt"&gt;--remote&lt;/span&gt; heroku-dev
    heroku config:add &lt;span class="nv"&gt;ENV&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"demo"&lt;/span&gt; &lt;span class="nt"&gt;--remote&lt;/span&gt; heroku-demo 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  In case you already have your dev environment running in Heroku and want to add new envs:
&lt;/h3&gt;

&lt;p&gt;1- Rename your current Heroku remote (optional):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;    git remote rename heroku heroku-dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;2- Create a Heroku app for the new environment, specifying a new remote name:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;    heroku create myAppName &lt;span class="nt"&gt;--remote&lt;/span&gt; heroku-demo 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;3- Setup a config var for each env to let your app know where is running:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;    heroku config:add &lt;span class="nv"&gt;ENV&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"dev"&lt;/span&gt; &lt;span class="nt"&gt;--remote&lt;/span&gt; heroku-dev
    heroku config:add &lt;span class="nv"&gt;ENV&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"demo"&lt;/span&gt; &lt;span class="nt"&gt;--remote&lt;/span&gt; heroku-demo 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Now push!
&lt;/h2&gt;

&lt;p&gt;Now that our remotes are all setup, we can push our changes to the demo env, like so:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;    git push heroku-demo master
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Heroku will now retrieve any dependencies our project needs and build it for us so we can have our app online almost instantly.&lt;/p&gt;

&lt;h1&gt;
  
  
  That's it!
&lt;/h1&gt;

&lt;p&gt;Hope this helps someone, thanks for reading!&lt;/p&gt;

</description>
      <category>heroku</category>
      <category>deploy</category>
      <category>ci</category>
      <category>git</category>
    </item>
  </channel>
</rss>
