Host Your Laravel Web App on Heroku Directly from Git Commits for Free
By: Thet Hmuu Eain Soe
Tags: Hosting, Laravel, Heroku, Web Development, MVP

Step 1 — Setup and Install

Firstly, we will have to sign up and log in to Heroku. https://signup.heroku.com/login.

After logging in, you’ll see the dashboard.

Then, install Heroku CLI to access Heroku functions via Terminal or Command Prompt. We will perform most of the processes via command line from now on.

Click the link above and install for your Operating System. Mine is Ubuntu. I install it via Snap Store with

sudo snap install --classic heroku

After successful installation, log in to Heroku via Terminal. Type this command and provide your login details.

heroku login

Step 2 — Create App on Heroku and Connect with Local App

We currently have no app created in Heroku. Create one. Go to browser and Click ‘Create New App’ in the Heroku Dashboard.

( We can also create via command line after we installed Heroku CLI. But you will get a randomly generated subdomain link like the one below.

I don’t think this is something you want.)

Type your app name in ‘App name’ and click ‘Create app’. You’ll be redirected to configuration page of the created app.

It’s just like we bought a ticket for a seat in Heroku cinema. We need to bring ourself (the app) to the seat, to see the movie (to host our app). The best example that my head could generate I guess! LOL

In the ‘Deploy’ tab, they provide instructions for deployment.

You’ll see something like

heroku git:remote -a sms-pmz

(your app name in ‘sms-pmz’)

Copy that and paste in your terminal (opened in the directory of your project). Type Enter.

We’re now connected our local app and Heroku app that we created.

Step 3 — Local App Configuration and Upload

Now, open your app in the code editor. Create a new file called ‘Procfile’ (not Profile) in the root directory.

In that file, Type

web: vendor/bin/heroku-php-apache2 public/

You can use ‘nginx’ instead of apache2. But we will use Apache web server for now. ‘public/’ is where the main files of our Laravel app exists.

And then, push the current code state to Heroku. Heroku has their own Github environment for keeping the codes of apps hosted on them.

git add .

git commit -m "...Your commit message..."

git push heroku master

After a couple of seconds…

Now, we’ve pushed our project files to Heroku Github. You can see that it automatically performed ‘composer install’ in the server.

Step 4 — Adding Environment Variables

For the next step, Go to browser and Click ‘Settings’ tab. we’ll add Environment Variables to the Heroku app. This is just like adding .env file in the server, but not entirely, just some lines. You can copy and paste from .env of your local project.

Click ‘Reveal Config Vars’. Then type

‘APP_KEY’ in ‘KEY’ and

the key copied from local .env file in ‘VALUE’. Click Add.

Now click ‘Open App’ from the top.

Yesss! Your app is successfully hosted now.

Then, continue adding other Environment Variables for app details, connecting to database, etc.

The lines we need are -

APP_NAME

APP_ENV (just fill ‘production’)

APP_DEBUG (false if you do not want to reveal error details)

APP_URL (in my case, https://sms-pmz.herokuapp.com/)

Just copy and paste one by one.

Step 5 — Database Setup

We need to setup database in our Heroku App. It can be done by adding a plugin that they provide.

Go to ‘Resources’ tab,

search for ‘Heroku Postgres’ in the Add-ons search bar.

Click on Heroku Postgres.

When the pop-up dialog shows up, just click the Button to submit. We’ll go with ‘Hobby Dev - Free’ plan for now.

Don’t worry! Postgres is just like MySQL in many ways, and this plugin works perfectly with our Laravel database migrations.

When the opened page’s loaded, Go to ‘Settings’ tab. You’ll see all our Database Credentials.

Now let’s fill in the lines below, but with current server credentials.

DATABASE_URL should be automatically filled.

DB_CONNECTION = pgsql (we use postgres)

Fill other 5 fields with credentials from recently opened page.

Fill respectively in

DB_HOST,

DB_DATABASE,

DB_USERNAME,

DB_PORT,

DB_PASSWORD.

Now, we’ve added everything and it looks something like this. Check again if something is missing.

Then, we need to perform database migration on Heroku. Type in the terminal.

heroku run bash

We’ve just walked into the project directory of Heroku app. You can now run anything you can run in your local app.

Type

php artisan migrate

When the migration process is done, just test it out.

Congrats! Your app is now fully working on Heroku server!

Hope this can help you.