Laravel/Vuejs app does not update after deploying to Heroku

Question

I have a Laravel/Vuejs app that works well on localhost. After deploying to Heroku, I realized that styles added to app.scss does not compile into my public/css file, thus have no effect. Also, modifications to my vuejs components does not update the app after I push to Heroku with git push heroku master.

I have added heroku/nodejs buildpack on my heroku dashboard. Here is my webpack.mix.js file content;

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

mix.browserSync({
    proxy: 'localhost:8000'
});

My package.json file:

"scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "heroku-prebuild": "export NPM_CONFIG_PRODUCTION=false; export NODE_ENV=; NPM_CONFIG_PRODUCTION=false NODE_ENV=development npm install --only=dev --dev",
        "heroku-postbuild": "export NPM_CONFIG_PRODUCTION=true; export NODE_ENV=production"
    },

When i add a postinstall key to scripts like so:

"postinstall": "npm run prod"

I get an error on deploy:

remote:        npm ERR! errno 2
remote:        npm ERR! undefined postinstall: `npm run prod`
remote:        npm ERR! Exit status 2
remote:        npm ERR!
remote:        npm ERR! Failed at the undefined postinstall script.
remote:        npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote:        npm ERR! A complete log of this run can be found in:
remote:        npm ERR!     /tmp/npmcache.a6MDK/_logs/2019-11-28T08_41_39_044Z-debug.log
remote:
remote: -----> Build failed
remote:
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote:        Some possible problems:
remote:
remote:        - Node version not specified in package
remote:          https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
remote:
remote:        Love,
remote:        Heroku
remote:
remote:  !     Push rejected, failed to compile Node.js app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !       Push rejected to blemademo.
remote:
To https://git.heroku.com/blemademo.git
 ! [remote rejected]   master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/blemademo.git'

Ohgodwhy · Accepted Answer · 2019-11-29 08:34:59Z

5

Define a new script in your package.json:

"heroku-postbuild": "npm run prod"

This is how heroku executes the build script in the pipeline. It looks for build, otherwise you can customize it with heroku-postbuild.

answered Nov 29, 2019 at 8:34

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

banky Over a year ago

Thank you so much..that was the missing part!

Collectives™ on Stack Overflow

Laravel/Vuejs app does not update after deploying to Heroku

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related