How to deploy a Laravel/Vue App to Heroku

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 here)
• Git (get git here)

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 git init command

Step 2: Create a Procfile
In your project directory create a Procfile without an extension and add this line web: vendor/bin/heroku-php-apache2 public/ . The Procfile can also be created and updated through the terminal, to do this, run echo "web: vendor/bin/heroku-php-apache2 public/" > Procfile 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 heroku create command. When this is done a random name will be automatically chosen for your application. To change this name use heroku apps:rename newAppName 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 heroku/nodejs build pack using heroku buildpacks:add heroku/nodejs command. With this, the node dependencies in your package.json 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 heroku config:set NPM_CONFIG_PRODUCTION=false command then add postinstall in package.json scripts
"scripts": {
"postinstall": "npm run prod"
}


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

Step 6: Push to Heroku
Commit the current state of your application with git and push to Heroku with git push heroku master

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 heroku buildpacks command. If you have heroku/php and heroku/nodejs listed you are good to go.

If you can’t find any, run heroku buildpacks:add [‘missing build’] 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 heroku config:set VAR_NAME=VAR_VALUE 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:

heroku addons:create heroku-postgresql:hobby-dev

Set DB_CONNECTION 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
Heroku Postgres Hobby Dev 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.

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

Comments

[Inspoker]

I did it, and it worked. But why does my vue not work when deployed ???

[Inspoker]

has been resolved! This happened because my laravel asset file was produced as http, the solution was to change to https. This is because heroku uses https, if using http on heroku the browser will block the request😄

[Don Phelix]

Hi, how were you able to change http to https and new in Heroku just help

[James]

In your blade template file where your app.js is imported, change asset() to secure_asset().

[Euphy]

HELLO, I DONT HAVE THE asset() :3 please help me

[Euphy]

please replyyy

[James]

do you have an app.blade.php file in resources/views? look in there for link and script tags.

[Euphy]

okay wait a minute

[Euphy]

i searched it, it has many asset() tho, some are css bootstrap etc

[Euphy]

asset('js/bootstra') }}

is this one your referring to? i cant send the asset. it is hidden

[James]

yes. change them all to secure_asset( ... ).

[Chinedu Ogama]

I am glad you were able to resolve it 😄

[saidichlil]

remote: Skipping 'fsevents' build as platform linux is not supported
remote: npm ERR! Cannot read property 'length' of undefined
remote:

remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /tmp/npmcache.Ta3zs/_logs/2020-06-01T23_28_55_378Z-debug.log

[Muhammad Abdurrozaq]

insert code below to scripts in package.json
"scripts": {
"heroku-prebuild": "npm install -f",
"heroku-postbuild": "npm run build"
}

[Jr Flores]

Still getting the error after adding the scripts. And what npm run build supposed to be doing? Laravel's package.json scripts by default only has dev, watch and prod.

I am not sure if build is an old key for prod. Please correct me if I'm wrong.

[axis80]

I got it working using this:

    "postinstall": "npm run production",
    "heroku-prebuild": "npm install -f",
    "heroku-postbuild": "npm run production"

That rebuilt the assets multiple times, so I trimmed it down to just this and it seems to be all that is needed. At least, it is working for me now:

"heroku-postbuild": "npm run production"

[Buba-Conteh]

Hi, can someone help me with this? I have a similar issue like this and I have tried most of the options in the comment bellow but my page is still not loading any content.
Am I missing something or?
site bmchh-store.herokuapp.com/

[Lime]

Hey there, I know this post is 1 year old but however I can't seem to get Heroku to display something other than a blank page. All I get is "Uncaught SyntaxError: Unexpected token '<'" in the browser console.

I tried changing to secure_asset() & it still shows the same error in the console.

[Benny Cisneros]

Thank you so much!

[Chinedu Ogama]

You are welcome

[Paul Cervov]

It works like a charm! Thanks!

[Chinedu Ogama]

You are welcome, I am glad it was helpful.

[kaied hazem]

How i can fix this problem please !!

Mixed Content: The page at 'managementp.herokuapp.com/' was loaded over HTTPS, but requested an insecure stylesheet 'managementp.herokuapp.com/css/app.css'. This request has been blocked; the content must be served over HTTPS.

[Kessir Adjaho]

You'll have to edit App\Http\Middleware\TrustProxies.php to look like this:

protected $proxies = '**';
protected $headers = Request::HEADER_X_FORWARDED_AWS_ELB;

[Raymart]

I did it, I launch my first Laravel/Vue app. Thank's

[topetope024]

hey can someone help me?

remote: ! ERROR: Application not supported by this buildpack!
remote: !
remote: ! The 'heroku/php' buildpack is set on this application, but was
remote: ! unable to detect a PHP codebase.
remote: !
remote: ! A PHP app on Heroku requires a 'composer.json' at the root of
remote: ! the directory structure, or an 'index.php' for legacy behavior.
remote: !
remote: ! If you are trying to deploy a PHP application, ensure that one
remote: ! of these files is present at the top level directory.
remote: !
remote: ! If you are trying to deploy an application written in another
remote: ! language, you need to change the list of buildpacks set on your
remote: ! Heroku app using the 'heroku buildpacks' command.
remote: !
remote: ! For more information, refer to the following documentation:
remote: ! devcenter.heroku.com/articles/buil...
remote: ! devcenter.heroku.com/articles/php-...

these are the errors but I already have a composer.json on the root file but still can't push it on the heroku

[topetope024]

So based on the documentaries that you have post, you no composer.json so how did you build the dependencies of php or laravel?

[shumonbalok]

When i push to heroku this error. Please help
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'git.heroku.com/herokuexample098.git'

[Chinedu Ogama]

You have to commit your changes before you push to Heroku.

[igudy]

I'm currently experiencing the same error, please how did you solve it

[igudy]

I keep getting this when i try to push

! [remote rejected]
master -> master (pre-receive hook declined)
error: failed to push some refs to 'git.heroku.com/igudyemployeemanage...'

[Maryanne Ezeobidi]

Please, my vue is still returning localhost, after I have changed the API to live one.
The live API is working on my Postman, but not in my vue. I don't know what's wrong.

I need help pleaseeeee!!

[Anurella]

well done

[Chinedu Ogama]

Thanks

[We are flamingoes]

Mad o

[Okegbemi Olatunde]

Thank you, Chinedu.

How do you resolve the "Access forbidden error"?
The server is not reading from the index.php file in public folder as specified in the procfile file.

[Chinedu Ogama]

Make sure that your procfile is in the root directory and ensure that there is no " around web: vendor/bin/heroku-php-apache2 public/ in your procfile.