DEV Community

How to deploy a Laravel/Vue App to Heroku

Chinedu Ogama on January 01, 2020

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), whi...
Collapse
 
inspoker profile image
Inspoker

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

Collapse
 
inspoker profile image
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😄

Collapse
 
donphelix profile image
Don Phelix

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

Thread Thread
 
jamesroyston profile image
James

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

Thread Thread
 
amilissa profile image
Euphy

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

Thread Thread
 
amilissa profile image
Euphy

please replyyy

Thread Thread
 
jamesroyston profile image
James • Edited

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

Thread Thread
 
amilissa profile image
Euphy

okay wait a minute

Thread Thread
 
amilissa profile image
Euphy

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

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
amilissa profile image
Euphy • Edited

asset('js/bootstra') }}

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

Thread Thread
 
jamesroyston profile image
James

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

Collapse
 
eduvin profile image
Chinedu Ogama • Edited

I am glad you were able to resolve it 😄

Collapse
 
saidichlil profile image
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

Collapse
 
abduroza profile image
Muhammad Abdurrozaq

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

Collapse
 
smplyjr profile image
Jr Flores • Edited

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.

Thread Thread
 
axis80 profile image
axis80 • Edited

I got it working using this:

    "postinstall": "npm run production",
    "heroku-prebuild": "npm install -f",
    "heroku-postbuild": "npm run production"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode
Collapse
 
bubaconteh profile image
Buba-Conteh • Edited

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/

Collapse
 
lime_rind profile image
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.

Collapse
 
bcisneros97 profile image
Benny Cisneros

Thank you so much!

Collapse
 
eduvin profile image
Chinedu Ogama

You are welcome

Collapse
 
paulcervov profile image
Paul Cervov

It works like a charm! Thanks!

Collapse
 
eduvin profile image
Chinedu Ogama • Edited

You are welcome, I am glad it was helpful.

Collapse
 
hazemkaied profile image
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.

Collapse
 
kessir profile image
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;
Collapse
 
raymart65191357 profile image
Raymart

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

Collapse
 
topetope024 profile image
topetope024 • Edited

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

Collapse
 
topetope024 profile image
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?

Collapse
 
shumonbalok profile image
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'

Collapse
 
eduvin profile image
Chinedu Ogama

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

Collapse
 
igudy profile image
igudy

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

Collapse
 
igudy profile image
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...'

Collapse
 
lanna_code00 profile image
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!!

Collapse
 
anurella profile image
Anurella

well done

Collapse
 
eduvin profile image
Chinedu Ogama

Thanks

Collapse
 
eliezerajah profile image
We are flamingoes

Mad o

Collapse
 
lystun profile image
Okegbemi Olatunde • Edited

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.

Collapse
 
eduvin profile image
Chinedu Ogama • Edited

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.

Collapse
 
darmalkhan profile image
darmal gulabzoi

i use laravel jetstream in my project when I upload on Cpanel it work currect but when I want to change something it's not working i think it's not compiled. can someone help me?

Collapse
 
abdelmomenelshatory profile image
Abdelmomen • Edited

I have a problem when the page is reloaded

Not Found
The requested URL was not found on this server.