Best approach for hot reloading an OWA

Development
,
1

Hi all,

So I have been following this wiki article ‘Open Web App Development Workflow’.

First of all, it’s amazing, great job from all those who are behind this! It was really easy to get everything up & running and have a sample OWA app popping on my browser. This is all very slick.

However I would like to know what people do when developing OWAs in terms of hot reloading? I have tried Browsersync with

npm run watch

And there are two issues with this

  1. There is a bit of a slowdown each time a file is touched/saved and things get stuck for a while on “80% optimize chunk assets”. A few seconds (~5 sec) each time.
    I only tried the scaffolded Angular app though.
  2. More importantly this runs the OWA app independently from the OpenMRS instance, as a standalone app. And in many debugging/troubleshooting cases, this is not going to be the most useful setup, even though it is clearly useful as well for decoupling the app from its backend.

(Q.) How can I simply link the content of my OWA app to the source code? I just tried

ln -s ~/repos/openmrs-owa-sample/app ~/openmrs/platform-2-1/owa/sampleowa

That just gives me a blank page…
This works:

ln -s ~/repos/openmrs-owa-sample/dist ~/openmrs/platform-2-1/owa/sampleowa

But then I’m out of sync again obviously. Thoughts/tips?

Cc: @pascal @darius @raff @tmarzeion @gutkowski @mjsanish

2

After playing around for a while here are my conclusions. What I would like to achieve with Webpack is:

  1. To not bundle everything, but keep some files out of the bundling so that they can still be debugged at runtime (with the Chrome dev tools).
  2. Watch those files (only), so that symlinking to the dist/ folder could work.

Is this possible, could anyone provide some pointers? Is that even possible with Webpack or will it require to switch to Grunt (and Grunt watch) or equivalent?

3

For improving the build performance, we could try to use autodll-webpack-plugin (see Webpack DllPlugin docs).

What problems are you running into with the OWA running independently?

4

Hey @mksd,

You can try using the extract text plugin for webpack. Though for webpack v2+ you’ll need to check out the webpack migration guide for the correct syntax for the webpack config modifications since the npm docs seem to be outdated.

5

Thanks @pascal and @nagadya.

Probably biased by doing Bahmni Apps development, I am used to have the ability to plug the Angular web app to an actual running OpenMRS dev instance. Thereby enjoying real world REST interactions with it. Is this possible with an OWA?

@nagadya, thanks for your pointers, I will look into them tomorrow. But still I am wondering, how do OWA developers manage to debug their Angular or React web apps at runtime with - say - Chrome DevTools?
Surely to enable this there must be a way to generate a zip that does not bundle/uglify the JavaScript code, at least the code coming from ./app/js?

6

Ok so obviously

npm run build:dev

does what is necessary to enable in-browser debugging.

It sets the content of the ./dist folder to what it should be, and it’s just a matter of symlinking the OWA to the content of the dist folder to enable debugging:

ln -s ~/repos/openmrs-owa-sample/dist ~/openmrs/platform-2-1/owa/sampleowa

The sample OWA can be accessed via the SDK instance: at http://localhost:8080/openmrs/owa/sampleowa/index.html#/

For info the sources are here (under webpack://):

image

7

@pascal however I could not make the hot reloading (’npm run watch’) work for .js files, but it works for .html files though. Is this a known limitation, or is something to setup in the webpack config somewhere?

8

@raff, I wonder if you had a chance to skim through this thread?

9

@mksd, .js files should be reloaded as well. Just make sure that caching is disabled in your browser, see e.g. https://stackoverflow.com/a/7000899

10

For build performance (and runtime caching) you typically separate your app code from dependencies, see e.g. https://webpack.js.org/plugins/commons-chunk-plugin/#explicit-vendor-chunk

Having the vendor bundle will prevent webpack from bundling dependencies again if you only change your app’s code.

11

Isn’t this already the case?

plugins.push(new CommonsChunkPlugin({
    name: 'vendor', 
    filename: vendorOutputFile
}));
12

Ok that indeed solved the issue for .js files that weren’t refreshed. Here for anyone interested:

image

But so there is no way out of using the watch mode to have some sort of “direct” reflection of the state of the source code from within the app when using - say - the SDK?

In your opinion, would there be a way to tweak app/index.html so that symlinking to the ./app folder (rather than the ./dist folder) would just work?