VSTS webpack build task cannot find CLI - asp.net

I have a .NET (4.7) Web Application inside a project directory called MyWebApp.Web
As part of the build process I run npm install, webpack-cli is a dependency.
But when I run the webpack build task with MyWebApp.Web set as the working directory I get the following error:
Error: Cannot find module 'D:\a\1\s\MyWebApp.Web\node_modules\webpack\bin\webpack.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.Module._load (internal/modules/cjs/loader.js:507:25)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:236:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:560:3)
If I try and run webpack via an NPM script I get webpack's built in interactive "a CLI must be installed" prompt, indicating that the module cannot be found.
Is there anything I'm missing that needs to be in place for webpack to "see" the node modules?

It transpires that in the Variables tab process.env.NODE_ENV was set to production so dev dependencies were not being installed.
Removing this environment variable solved the problem.
I was doing this specifically to invoke webpack's "production" mode (partly because that's how the webpack Visual Studio extension works). This approach always worked on dev environments because the modules were already installed from previous development builds but on the VSTS build agent we were only ever running a production build.
I've now set up separate webpack.common.js, webpack.config.js (for dev), and webpack.prod.js files using webpack-merge, as per the webpack documentation. This targets different configs to different environments rather than relying on environment variables.

try :
npm i webpack webpack-cli -g --save-dev

Related

Deploy a SSR Nuxt 2 application on firebase

I have some troubles deploying a Nuxt 2.4 application on Firebase.
I tried these 2 tutorials but they seem outdated:
https://www.youtube.com/watch?v=ZYUWsjUxxUQ
https://github.com/davidroyer/nuxt2-ssr-firebase
With the first tutorial, I could make my app working on local (after few hours and with a lot of modifications for babel integration) but I never could serve or deploy it. I thought the tutorial was old and manipulations can't be exactly done like the guy did.
With the second tutorial, I cloned the repository to try to deploy the example. I had to change 2 things : install Node 8 instead of Node 10 and upgrading firebase-admin to the last version in prod/server dir. Here is what I got:
npm run setup is ok
npm run dev is ok and the project works fine
npm run build is ok
npm run serve fails.
First I got this error :
The Cloud Functions emulator requires the module "firebase-admin" to be version >7.0.0 so your version is too old. You can probably fix this by running "npm install firebase-admin#latest" in your functions directory.
Indeed, the version configured in package.json is the 5.13. I did the update from the prod/server dir, and I get the 8.0.0.
And then I got a different error about gRPC :
Error: Failed to load gRPC binary module because it was not installed for the current system
Expected directory: node-v57-darwin-x64-unknown
Found: [node-v64-darwin-x64-unknown]
This problem can often be fixed by running "npm rebuild" on the current system
I tried npm rebuild as mentionned, without success.
npm run deploy fails.
I get this trace:
i deploying functions, hosting
i functions: ensuring necessary APIs are enabled...
✔ functions: all necessary APIs are enabled
i functions: preparing prod/server directory for uploading...
Error: Error parsing triggers: Cannot find module 'acorn'
Try running "npm install" in your functions directory before deploying.
Of course, I tried the npm install from prod/server dir, but nothing changed.
Is there somewhere i can find a tutorial that can help me deploy my SSR app to firebase ? Thanks in avdance !
EDIT 1 :
After a few modifications on my package.json
upgrading firebase-functions and express to the latest versions
downgrading firebase-admin to the 7.0.0 version
adding acorn
I can serve and deploy but I get a "504 gateway time-out" webpage when I call the URL....
Have you tried to run npm install grpc inside functions folder?

Why does grunt allow global installations?

I've installed both the grunt-cli and grunt globally using the -g option.
However when I try and run grunt I get this error:
grunt --gruntfile /Users/a/root/config/Gruntfile.js
grunt-cli: The grunt command line interface. (v0.1.13)
Fatal error: Unable to find local grunt.
If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:
http://gruntjs.com/getting-started
This is confusing as it seems to say that you are suppose to do a local install.
It seems contradictory actually. I clearly have a grunt file in place.
Grunt-cli is installed globally so that the grunt command is available to be run from any location on your system. Without the global installation, you would need to rely on somewhat abstract methods of running local grunt installs (npm run-script and friends), which are clunky for this use.
The entire point of the global install is only to load and run a local Gruntfile.js using the locally installed version of Grunt. The error message indicates this:
either a Gruntfile wasn't found or grunt hasn't been installed locally to your project.
In other words, to run Grunt, you need to create a Gruntfile.js and you must have a local copy of Grunt installed to your project alongside the file. The CLI is just there to kick off the process without troublesome fiddling.

Grunt command - unable to find local grunt

I copied an existing Grunt project from git repo and when i run - grunt serve-dev command it tells me the following:
Fatal error: Unable to find local grunt.
If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:
http://gruntjs.com/getting-started
But if i - grunt -version it says:grunt-cli v0.1.13.
What might be the issue?
Be sure to run npm install after cloning the repo. Usually the node_modules, such as grunt aren't included the repo itself by default, but you must install them yourself.

What is the correct option to use Grunt locally and on the production server, --save or --save-dev?

The install page on the Grunt website gives the following suggestion
Grunt and Grunt plugins should be defined as devDependencies in your
project's package.json. This will allow you to install all of your
project's dependencies with a single command: npm install.
I want to use grunt to run some tasks that are specific to local development, e.g.
development: concatenate javascript, but dont minify
production: concatenate and minify javascript
If I install Grunt as a dev dependency, does this mean when I run NPM install on the production server - grunt will not be installed into node modules?
What is the correct option to be able to use Grunt both locally and on the production server?
It doesn't matter if you install Grunt as a dev dependency, it will still be installed when you run npm install.
The scenario where dev dependencies are not installed is when you run npm install <package> because the consensus is you are an end user looking to use (not build/test) the package. However, you can still include the dev dependencies by adding the --dev flag.
You should install grunt with --save-dev. What it does is add a line to your project's package.json. Similar to when you install any other node module with --save-dev. Then, if you run npm install on any machine with the same package.json, all those modules will be downloaded and installed locally, and usable by your project.
As for running different tasks in production and development, I assume you know how to configure grunt to do that.

Ignore "Local NPM module not found" warning in Grunt

I'm using matchdep to read dependencies from my package.json file into grunt.
require('matchdep').filterAll('grunt-*').forEach(grunt.loadNpmTasks);
I have my dependencies split between dependencies (for everyone) and devDependencies (for front-end developers.)
Our back-end devs will run the following to get a build of the static assets without requiring jasmine, phantomJS, etc (things that will be run by front-end devs and the CI server)
$ npm install --production
$ grunt build
However, when using the --production build, grunt.loadNpmTasks() will emit a warning for any missing packages.
>> Local Npm module "grunt-contrib-watch" not found. Is it installed?
Is there a way to supress this warning?
You have to question why your "back-end devs" would have to actually build your package - put otherwise, why do they need grunt but NOT devDependencies. This is kind of backwards (requiring users to build your package is certainly an anti-pattern).
That being said, using matchdep, you can / should use:
require('matchdep').filter inside your "production" target
require('matchdep').filterAll inside your "development" target
Certainly, that would require you to specialize your grunt build (eg: have grunt builddev and grunt buildproduction - or maybe use environment variables) - but again, see above...
You can use CLI flags to pass options into grunt. For consistency, I am using a --production flag, just as I do with npm.
So, from the CLI:
$ grunt build --production
And then in the Gruntfile:
var dependencies;
// test for the production flag
if (grunt.option('production')) {
// scan dependencies but ignore dev
dependencies = require('matchdep').filter('grunt-*');
} else {
// scan all dependencies
dependencies = require('matchdep').filterAll('grunt-*');
}
// load only relevant dependencies
dependencies.forEach(grunt.loadNpmTasks);
This is done at the top of the module before any custom tasks are registered.

Resources