Heroku ruby app - run gulp build process after deploy - ruby

I have a ruby application hosted on Heroku, it's a Ruby Sinatra app and I am using gulp to build my sass and coffee files for the client. I have added a postinstall script to my package.json and I have all my gulp dependencies listed but no npm install happens, probably because the app is a ruby application and npm is not on the deploy radar? Here's what my package.json looks like:
"dependencies": {
"gulp": "^3.9.1",
"gulp-coffee": "^2.3.3",
"gulp-filter": "^4.0.0",
"gulp-plumber": "^1.1.0",
"gulp-sass": "^3.0.0",
"browser-sync": "2.16.0"
},
"devDependencies": {},
"scripts": {
"postinstall": "npm install && gulp build"
}
What am I missing? Is it not possible to run npm and ruby on the same container?

I ended up finding the answer here: https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app
What I needed was to add a nodejs buildpack so that npm install would happen along with the postinstall script. Add a node buildpack using the Heroku CLI like this:
heroku buildpacks:add --index 1 heroku/nodejs
I also removed npm install from my postinstall hook because it happens automatically with the node buildpack.

Related

npm run dev can not install webpack cli

I have a laravel application with the below config:
laravel version 7.30.4
npm version 6.14.6
node version 12.18.3
When I want run npm run dev, this question is asked:
CLI for webpack must be installed.
webpack-cli (https://github.com/webpack/webpack-cli)
Do you want to install 'webpack-cli' (yes/no):
After typing yes, this error is showed:
Error: Cannot find module 'webpack-cli/package.json'
Require stack:
- C:\Users\SibCo\AppData\Roaming\npm-cache\_npx\5852\node_modules\webpack\bin\webpack.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
at Function.resolve (internal/modules/cjs/helpers.js:78:19)
at runCli (C:\Users\SibCo\AppData\Roaming\npm-cache\_npx\5852\node_modules\webpack\bin\webpack.js:50:26)
at C:\Users\SibCo\AppData\Roaming\npm-cache\_npx\5852\node_modules\webpack\bin\webpack.js:139:5
at processTicksAndRejections (internal/process/task_queues.js:97:5) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\SibCo\\AppData\\Roaming\\npm-cache\\_npx\\5852\\node_modules\\webpack\\bin\\webpack.js'
]
}
Try installing webpack globally:
npm install -g webpack webpack-cli
If you're using webpack-cli 4 or webpack 5, change webpack-dev-server to webpack serve.
Example:
"serve": "webpack serve --config config/webpack.dev.js --progress"
You might want also to check this comment on GitHub:
NPM package.json scripts are a convenient and useful means to run locally installed binaries without having to be concerned about their full paths. Simply define a script as such:
For webpack-cli 3.x:
"scripts": { "start:dev": "webpack-dev-server" }
For webpack-cli 4.x:
"scripts": { "start:dev": "webpack serve" }
I updated my npm version to v7.11.2 and delete node_modules and ran :
npm install
again, and it worked for me.

Laravel mix vue-template-compiler must be installed as a peer dependency

i got a fresh laravel installation, everything compile well but when I install vuex or vue router through npm, compiling wont work anymore, i got this error:
Error: [vue-loader] vue-template-compiler must be installed as a peer
dependency, or a compatible compiler implementation must be passed via
options.
The vue and vue-template-compiler module version must be the same in your package.json.
This was my code:
"devDependencies": {
"vue": "^2.5.17",
"vue-loader": "^15.5.1",
"vue-template-compiler": "^2.5.21"
},
I changed the vue version to 2.5.21, then ran npm update to update the base version of VueJS.
npm install vue-loader --save-dev
npm install vue-template-compiler --save-dev

How to see which Vue Version is installed in Laravel and how to update?

In package.json I see the line: "vue": "^2.1.10", but doing npm update I see: vue#2.5.13.
Which Vue version is installed in my Laravel App? Is there another way to see it?
And how would you update Vue to Version 2.5.13 if it is still on 2.1.10?
Go to package.json under dependencies you can find "vue": "^2.1.10" if you wish to change version, just edit to the version you want and run npm update or npm install
Or if you wish to do it through npm then
npm remove vue
npm install vue#2.X.X --save

Grunt not found error when deploying to Heroku

I'm getting the error below:
remote: sh: 1: grunt: not found
when I'm deploying my code to Heroku server.
My install scripts in package.json is like:
"scripts": {
"postinstall": "grunt heroku:production && bower install",
"test": "mocha",
"start": "node app.js"
}
I set heroku config like
heroku config:set NPM_CONFIG_PRODUCTION=false
Also I made
export BUILDPACK_URL=https://github.com/mbuchetics/heroku-buildpack-nodejs-grunt.git
but nothing has changed. I have grunt and grunt-cli in both dependencies and devDependencies.
So where am I wrong?

Heroku node_modules not cached

I have toplevel package.json where I set cacheDirectories as per https://devcenter.heroku.com/articles/nodejs-support#custom-caching
"scripts": {
"start": "npm --prefix frontend start && npm --prefix mockserver start",
},
"dependencies": {
},
"devDependencies": {
},
"cacheDirectories": ["frontend/node_modules", "mockserver/node_modules"],
...
So no dependencies in toplevel, but I have frontend/package.json and mockserver/package.json with a lot of dependencies that get installed in their respective node_modules. This is how the respective package.jsons look like (for example mockserver):
"scripts": {
"start": "npm install && npm run build && node dist/server.js",
},
dependencies...
devdependencies...
This works fine and deploys, but it does not cache the the two node_modules defined to be cached.
Here is the output from heroku build:
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NPM_CONFIG_PRODUCTION=true
NODE_VERBOSE=false
NODE_ENV=demo
NODE_MODULES_CACHE=true
npm scripts will see NODE_ENV=production (not 'demo')
https://docs.npmjs.com/misc/config#production
-----> Installing binaries
engines.node (package.json): 7.10.0
engines.npm (package.json): unspecified (use default)
Downloading and installing node 7.10.0...
Using default npm version: 4.2.0
-----> Restoring cache
Loading 2 from cacheDirectories (package.json):
- frontend/node_modules (not cached - skipping)
- mockserver/node_modules (not cached - skipping)
-----> Building dependencies
Installing node modules (package.json)
-----> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (package.json):
- frontend/node_modules (nothing to cache)
- mockserver/node_modules (nothing to cache)
-----> Build succeeded!
Just to note that the two node_modules were installed in the previous build but it says (not cached - skipping).
Thanks in advance!
I got the answer here: https://github.com/heroku/heroku-buildpack-nodejs/issues/435
In summary, I should have used heroku-postbuild instead of start script to install custom dependencies. And use start only as application starting command.
Top level package.json
"scripts": {
"heroku-postbuild": "npm --prefix frontend run installAndCompile && npm --prefix mockserver run installAndCompile",
"start": "npm --prefix mockserver start"
},
Subproject's package.json
"scripts": {
"installAndCompile": "npm install && npm run compile"
},

Resources