How to deploy a Laravel/Vue App to Heroku
Tags: laravel, vue, heroku, php
Published: 2020-01-01 08:15:13

In this article, I will be showing you how to deploy a Laravel/Vue application to Heroku; a container-based cloud Platform as a Service (PaaS), which developers use to deploy, manage and scale modern apps.

**Prerequisites:**

•  PHP and Laravel Knowledge 
•  Heroku User Account
•  Heroku CLI (Download <a href="https://devcenter.heroku.com/articles/heroku-cli" target=”_blank”>here</a>)
•  Git (get git <a href="https://git-scm.com/book/en/v2/Getting-Started-Installing-Git" target="_blank">here</a>)

This article assumes that you have an existing Laravel/Vue application on your local server which is ready for deployment

**Step 1: Initialize a git**
Initialize a git repository in your current working project directory  with <code>git init</code> command 

**Step 2: Create a Procfile**
In your project directory create a <b>Procfile</b> without an extension and add this line <code>web: vendor/bin/heroku-php-apache2 public/ </code>. The <b>Procfile</b> can also be created and updated through the terminal, to do this,  run <code>echo "web: vendor/bin/heroku-php-apache2 public/" > Procfile</code> command on your terminal 

**Step 3: Create a new application on Heroku**
In other to create a new application on Heroku where you can push your application to, use the <code>heroku create</code> command. When this is done a random name will be automatically chosen for your application. To change this name use <code>heroku apps:rename newAppName </code> command. Replace “newAppName” with your preferred new name.

**Step 4: Enable node.js** 
You need to enable node.js in other to run commands like npm install and npm production. To do this you need to add <code>heroku/nodejs</code> build pack using <code>heroku buildpacks:add heroku/nodejs</code> command. With this, the node dependencies in your <code>package.json</code> file will be installed on deployment but it won’t install any of your devDependencies. To solve this you need to set an environment variable to tell Heroku to install all dependencies including devDependencies using <code>heroku config:set NPM_CONFIG_PRODUCTION=false</code> command then add <code>postinstall</code> in <code>package.json</code> scripts
<code>"scripts": {
     "postinstall": "npm run prod"
  }
</code>

**Step 5: Setup a Laravel encryption key**
To set up your Laravel encryption key copy the <code>APP_KEY</code> environment value from your <code>.env</code> file and run <code>heroku config:set APP_KEY=”Your app key”</code> or you can generate a new one and set it as your new key using <code>heroku config:set APP_KEY=$(php artisan --no-ansi key:generate --show)</code> command.

**Step 6: Push to Heroku**
Commit the current state of your application with git  and push to Heroku with <code>git push heroku master</code>

**Step 7: Ensure that your application is using the right Heroku buildpacks**
You need to ensure that your application is using the right buildpacks. To do this run the <code>heroku buildpacks</code> command. If you have <code>heroku/php</code> and <code>heroku/nodejs</code> listed you are good to go. 

If you can’t find any, run  <code>heroku buildpacks:add [‘missing build’]</code> command, replace the [‘missing build’] with the buildpack you wish to install and push to Heroku.

**Step 8: Your app should be up and running. To view it,  navigate to the address in your browser**

To set the environment variables for your application you can do that using your terminal with the <code>heroku config:set VAR_NAME=VAR_VALUE</code> command or through your dashboard in the settings tab, click on Reveal config vars to see and set environment variables.

Heroku provides you the option to use postgres sql free. To use this run the command:

<code>heroku addons:create heroku-postgresql:hobby-dev</code> 

Set <code>DB_CONNECTION</code> to pgsql through your dashboard in the settings tab, click on Reveal config vars to see environment variable.

To get DB credentials for your application click on the 
<b>Heroku Postgres  Hobby Dev</b> installed addon on the overview tab on your dashboard, this will open a new browser tab. The DB credentials can be found through the settings tab of the new browser tab.


<b>Note:</b>To run your regular <b>artisan</b> or <b>npm</b> commands on heroku, precede all statements with <code>heroku run</code> e.g. <code>heroku run php artisan storage:link</code> or <code>heroku run npm install</code>