Modularize JavaScript Code

There is browserify-swap (https://github.com/thlorenz/browserify-swap) that would allow one to swap out config files on bundling main.js. So what one has to do before deploying is rebuilding main.js.

Would this be acceptable as part of your deployment process?

1 Like

Nice. And yes, every command line tool to overwrite ā€˜somehowā€™ the main.js properly is appreciated.

Iā€™m trying to merge some personal java script changes to the latest master without sucess.

Iā€™m on Windows and it seems that I need npm now to do so. Therefore I installed the latest official npm version. npm is totally new for me. Iā€™m trying to re-generate main.js. Therefore I started with running npm run watch as instructed. This is what I get in ā€œnpm-debugā€

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'watch' ]
2 info using npm@3.3.12
3 info using node@v5.3.0
4 verbose run-script [ 'prewatch', 'watch', 'postwatch' ]
5 info lifecycle graphhopper-js-ui@1.0.0~prewatch: graphhopper-js-ui@1.0.0
6 silly lifecycle graphhopper-js-ui@1.0.0~prewatch: no script for prewatch, continuing
7 info lifecycle graphhopper-js-ui@1.0.0~watch: graphhopper-js-ui@1.0.0
8 verbose lifecycle graphhopper-js-ui@1.0.0~watch: unsafe-perm in lifecycle true
9 verbose lifecycle graphhopper-js-ui@1.0.0~watch: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;D:\graphhopperlatestmaster\web\node_modules\.bin;C:\Users\User\AppData\Roaming\npm;C:\Program Files\nodejs\;C:\ProgramData\Oracle\Java\javapath;C:\Program Files\Common Files\Microsoft Shared\Windows Live;C:\Program Files (x86)\Common Files\Microsoft Shared\Windows Live;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\ATI Technologies\ATI.ACE\Core-Static;C:\Program Files (x86)\Windows Live\Shared;C:\Program Files (x86)\Microsoft SQL Server\100\Tools\Binn\;C:\Program Files\Microsoft SQL Server\100\Tools\Binn\;C:\Program Files\Microsoft SQL Server\100\DTS\Binn\;C:\Program Files\TortoiseSVN\bin;C:\Program Files (x86)\QuickTime\QTSystem\;D:\Program Files\TortoiseGit\bin;C:\Program Files\nodejs\;C:\Program Files (x86)\IDM Computer Solutions\UltraEdit\;C:\Users\User\AppData\Roaming\npm
10 verbose lifecycle graphhopper-js-ui@1.0.0~watch: CWD: D:\graphhopperlatestmaster\web
11 silly lifecycle graphhopper-js-ui@1.0.0~watch: Args: [ '/d /s /c',
11 silly lifecycle   'watchify src/main/webapp/js/main-template.js -o src/main/webapp/js/main.js --debug --verbose' ]
12 silly lifecycle graphhopper-js-ui@1.0.0~watch: Returned: code: 1  signal: null
13 info lifecycle graphhopper-js-ui@1.0.0~watch: Failed to exec watch script
14 verbose stack Error: graphhopper-js-ui@1.0.0 watch: `watchify src/main/webapp/js/main-template.js -o src/main/webapp/js/main.js --debug --verbose`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:232:16)
14 verbose stack     at emitTwo (events.js:87:13)
14 verbose stack     at EventEmitter.emit (events.js:172:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
14 verbose stack     at emitTwo (events.js:87:13)
14 verbose stack     at ChildProcess.emit (events.js:172:7)
14 verbose stack     at maybeClose (internal/child_process.js:818:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid graphhopper-js-ui@1.0.0
16 verbose cwd D:\graphhopperlatestmaster\web
17 error Windows_NT 10.0.10586
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "watch"
19 error node v5.3.0
20 error npm  v3.3.12
21 error code ELIFECYCLE
22 error graphhopper-js-ui@1.0.0 watch: `watchify src/main/webapp/js/main-template.js -o src/main/webapp/js/main.js --debug --verbose`
22 error Exit status 1
23 error Failed at the graphhopper-js-ui@1.0.0 watch script 'watchify src/main/webapp/js/main-template.js -o src/main/webapp/js/main.js --debug --verbose'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the graphhopper-js-ui package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     watchify src/main/webapp/js/main-template.js -o src/main/webapp/js/main.js --debug --verbose
23 error You can get their info via:
23 error     npm owner ls graphhopper-js-ui
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

What am I doing wrong?

By the way, Iā€™m a bit confused: why is main.js still checked into git: Shouldnā€™t this be better autmatically get generated. Is this what you meant with maven integration above?

I cannot comment on this as Iā€™m not a windows user and installation of npm went good here. As suggested from @HelgeKrueger I was using nvm and I found something like this for windows: GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go. or which procedure you chose to install npm?

This is a kind of a compromise to avoid installation of npm for people just trying other aspects of GraphHopper

Somehow I managed to re-create a working main.js, although I have little idea what Iā€™m doing.:disappointed_relieved:

Iā€™m using npm from here: https://nodejs.org/download/release/latest/node-v5.3.0-x86.msi

Following installation hints were missing for me:

npm install watchify
npm install browserify
npm install uglifyify
npm install jshint

npm install d3
npm install leaflet-loading
npm install jquery
npm install leaflet

After that running

npm run bundle

created the most similar main.js compared to what is checked in. Therefore I used that. It seems to be working.

Running

npm run watch 

creates a 3.8MB main.js, but the command does not return. I can only stop its run by pressing Control-C. After that the generated main.js contains some readable code at the beginning and a huge sourceMappingURL=data:application/json;charset=utf-8;base64 data block at the end. Is this what I should expect?

I would ask for a better description in ā€˜quickstart-from-sourceā€™ about what the various npm run commands are supposed to do and what the recommended command for code re-generation is for what purpose. Or eventually only some link to npm documentation is missing ?

I believe that automatic code re-creation as part of the Netbeans custom install process is urgently needed now, because this manual execution step is slowing down the test cycles too much. If I had an idea how to do that then I would try it.

Thank you!

There is no need for that. Think about npm that is the ā€˜mavenā€™ for JS and an npm install should do it for you.

The checkin version is npm run bundleUgly

Yes, that is for development - it watches your changes and updates the main.js as fast as possible.

Yes, feel free to link to the necessary npm docs. Documentation is probably what is still lacking: graphhopper/docs/core/quickstart-from-source.md at master Ā· graphhopper/graphhopper Ā· GitHub

For windows one could add an additional link or add a section about JS on the windows specific docs

I believe that automatic code re-creation

What do you mean here? If npm is installed then npm run watch is working and it should work as fast as before. At least that is the case for me.

@ratrun I have updated the docs a bit
@HelgeKrueger I have implemented the config stuff via envify and the options_*.js files - see 611. I was then able to easily deploy the new JS code to GraphHopper Maps

Thank you. I missed the essential information that expect one to open a window and run npm run watch in there. This was working. The commits from #611 destroyed it. The code in options.js does not work on Windows.

This is what I get:

Error: Cannot find module './options_prod.js' from 'D:\graphhopperlatestmaster\web\src\main\webapp\js'

As a work around one can copy the file options_dev.js into options_prod.js, but that does not seem to be intended to be used that way. I tried to figure out why the code for process.env.NODE_ENV does not work, but I have no idea how that could be debugged. Calling set NODE_ENV=development does not change anything and I could not find any documentation to where the console.log output should be printed. It does not get logged to the command window.

Thanks for the feedback.

If the env stuff does not work it should pick the options_dev.js

BTW: For the new stuff to work you need to call npm install once again to fetch the envify module.

I did run `npm installā€™ once again, but this does not help. I also know that per default options_dev.js should be taken in options.js, but it does not work ask reported above.

Hmmh, strange. Thanks for taking the time. Can you log the contents of process.env and process.env.NODE_ENV e.g. before the if clause in options.js?

See inside the browser when loading the main.js e.g. when using firefox or chrome it will be printed to the console, also youā€™ll see there, if there are JS errors.

https://getfirebug.com/logging
https://developer.mozilla.org/en-US/docs/Tools/Web_Console

Thank you for your explanations. But now Iā€™m really confused :confused:. At the time of calling npm run watch I have no browser. I understood that this command is supposed to generate main.js, which could get loaded to a browser afterwards.
I get the error

Error: Cannot find module './options_prod.js' from 'D:\graphhopperlatestmaster\web\src\main\webapp\js'

whenever I store e.g. a new options.js file.

Ah, now I think I understand the problem. This file is indeed currently necessary as I call require in main-template and npm then needs this file. Will look how to make it optional. For now just copying is fine - the system wonā€™t use it unless you specify export NODE_ENV=production

I have now fix this problem and you need update to master, call npm install again and it should work.

To switch to options_prod.js you now do: BROWSERIFYSWAP_ENV='production' npm run [command]

I havenā€™t tested the production mode, but I can confirm that the development mode works now. Thank you for the fast fixing!

1 Like