{"componentChunkName":"component---src-templates-blog-template-js","path":"/docs/deploy-to-heroku","result":{"data":{"markdownRemark":{"html":"<h2>Install Heroku CLI</h2>\n<p>The Heroku Command Line Interface (CLI) makes it easy to create and manage your Heroku apps directly from the terminal. It’s an essential part of using Heroku.</p>\n<h2>macOS</h2>\n<pre><code>brew tap heroku/brew &#x26;&#x26; brew install heroku\n</code></pre>\n<h2>Windows</h2>\n<p>Download the appropriate installer for your Windows installation.</p>\n<ul>\n<li><a href=\"https://cli-assets.heroku.com/heroku-x64.exe\">64-bit installer</a></li>\n<li><a href=\"href=%22https://cli-assets.heroku.com/heroku-x86.exe%22\">32-bit installer</a></li>\n</ul>\n<h2>Ubuntu 16+</h2>\n<p>Run the following from your terminal:</p>\n<pre><code>sudo snap install --classic heroku\n</code></pre>\n<h2>Verifying installation</h2>\n<p>To verify your CLI installation, use the heroku --version command:</p>\n<pre><code>heroku --version\n</code></pre>\n<h2>Getting started</h2>\n<p>After you install the CLI, run the heroku login command. You’ll be prompted to enter any key to go to your web browser to complete login. The CLI will then log you in automatically.</p>\n<pre><code>heroku login\n</code></pre>\n<h2>Troubleshooting</h2>\n<p>If you’re having issues with the CLI, first ensure that you’re using the latest version. If you’re not, try updating with <code>heroku update</code>.</p>\n<h2>Production build</h2>\n<p>Heroku will now enter the client directory and create the production build of the React app for us.</p>\n<p>Deploying is as easy as running the following commands:</p>\n<pre><code>git init\ngit add .\ngit commit -m \"Initial commit\"\nheroku create\ngit push heroku master\n</code></pre>\n<p>Heroku is smart enough to detect that we are also running a node server, it will create it automatically.</p>\n<h2>Confirm Installation</h2>\n<pre><code>heroku status\n</code></pre>\n<h2>Managing config vars</h2>\n<p>Make sure that you add your ENV variables inside Heroku.</p>\n<p>The <code>heroku config</code> commands of the Heroku CLI makes it easy to manage your app’s config vars.</p>\n<p>You can also edit/add config vars from your app’s Settings tab in the Heroku <a href=\"https://dashboard.heroku.com/apps\">Dashboard</a>.</p>\n<h2>Add custom domain</h2>\n<p>You probably want to have a custom domain for your store. If that's the case, you can <a href=\"https://devcenter.heroku.com/articles/custom-domains#add-a-custom-root-domain\">add a domain</a> from Heroku dashboard.</p>\n<h2>Settup SSL in Heroku</h2>\n<p>And with a couple of clicks, you can also add <a href=\"https://devcenter.heroku.com/articles/ssl\">SSL certificate</a>.</p>\n<h2>Heroku Error</h2>\n<p>You might get this error when deploying to Heroku: <code>Invalid Host header</code>. If that's the case, there's several ways to approach this:</p>\n<p>Resource:</p>\n<ul>\n<li><a href=\"https://github.com/sehailey/proxytest\">https://github.com/sehailey/proxytest</a></li>\n<li><a href=\"https://github.com/facebook/create-react-app/issues/2271#issuecomment-302818385\">https://github.com/facebook/create-react-app/issues/2271#issuecomment-302818385</a></li>\n<li><a href=\"https://github.com/sehailey/proxytest\">https://github.com/sehailey/proxytest</a></li>\n<li><a href=\"https://stackoverflow.com/questions/49665162/heroku-production-app-invalid-host-header-with-express-server-and-proxy\">https://stackoverflow.com/questions/49665162/heroku-production-app-invalid-host-header-with-express-server-and-proxy</a></li>\n</ul>","frontmatter":{"path":"/docs/deploy-to-heroku","date":"2020-01-09T17:12:33.962Z","header":"Launching Your Store","title":"Deploying To Heroku 🚀"}}},"pageContext":{"pages":[{"path":"/docs/changelog","title":"Changelog & To Do's 📝","header":"Beluga Next Steps","date":"2020-01-11T17:12:33.962Z"},{"path":"/docs/seo-social","title":"SEO and Social Media 💻","header":"Launching Your Store","date":"2020-01-10T17:12:33.962Z"},{"path":"/docs/deploy-to-heroku","title":"Deploying To Heroku 🚀","header":"Launching Your Store","date":"2020-01-09T17:12:33.962Z"},{"path":"/docs/gmail-oauth","title":"Setting up Gmail Oauth2 📬","header":"Managing Orders","date":"2020-01-07T19:12:33.962Z"},{"path":"/docs/email-templates","title":"Email Templates 🧾","header":"Managing Orders","date":"2020-01-07T18:12:33.962Z"},{"path":"/docs/managing-orders","title":"Order Admin 📦","header":"Managing Orders","date":"2020-01-07T16:12:33.962Z"},{"path":"/docs/custom-products","title":"Advanced: Custom Product Data 💫","header":"Store Configuration","date":"2020-01-06T22:12:33.962Z"},{"path":"/docs/shipping","title":"Checkout & Shipping 🛒","header":"Store Configuration","date":"2020-01-06T21:12:33.962Z"},{"path":"/docs/additional-pages","title":"Adding Pages 📄","header":"Store Configuration","date":"2020-01-06T20:12:33.962Z"},{"path":"/docs/adding-collections","title":"Adding Collections 📂","header":"Store Configuration","date":"2020-01-06T19:12:33.962Z"},{"path":"/docs/adding-products","title":"Adding Products 🎁","header":"Store Configuration","date":"2020-01-06T18:12:33.962Z"},{"path":"/docs/theming-design","title":"Theming & Design 🎨","header":"Store Configuration","date":"2020-01-06T17:12:33.962Z"},{"path":"/docs/store-config","title":"Store Settings 🛠","header":"Store Configuration","date":"2020-01-05T16:12:33.962Z"},{"path":"/docs/stripe","title":"Setting up Stripe 💵","header":"Introduction","date":"2020-01-04T17:12:33.962Z"},{"path":"/docs/new-store","title":"Creating a New Store 🛍","header":"Introduction","date":"2020-01-03T17:12:33.962Z"},{"path":"/docs/dev-environment","title":"Setting up the Dev Environment 🧪","header":"Introduction","date":"2020-01-02T17:12:33.962Z"},{"path":"/docs/project-structure","title":"Overview of Project Structure 🏗","header":"Introduction","date":"2020-01-01T17:12:33.962Z"}]}},"staticQueryHashes":["45326706"]}