Order Entry OWA & Cohort Builder OWA: setting up dev environments

Hello all–

I’m looking to (finally) get myself involved in OWA applications, and to explore React in particular, so I decided to try to set up a development environment for the Order Entry and Cohort Builder OWAs by following the README information on both those projects, but have run into issues. Is the README information up-to-date?

If it’s relevant, I’m running on Ubuntu 14.04.

Order Entry OWA:

I did the “npm install” and set up my webpack.config.js file, but when I try to run any of the “npm run” commands I’m getting the following error:

ERROR in ./app/js/openmrs-owa-orderentry.jsx
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/home/mgoodrich/openmrs/owa/orderentry/app/js"

Looks like I’m missing some sort of dependency?

Cohort Builder OWA:

I’ve had more luck here… I can build the application and deploy manually via the OpenMRS OWA module, but I’ve not gotten the “hot” deploy or “watch” to work. The instructions were a little unclear, but I think you need to set the “LOCAL_OWA_FOLDER” path to the owa directory for the OpenMRS instance you want to install it on (I’ve got OpenMRS running via the SDK, not as the standalone)? I’ve got mine configured as follows, and when I do a “npm run build:deploy” everything appears to run but none of my changes have been picked up:

{code} config = { ‘LOCAL_OWA_FOLDER’: ‘/home/mgoodrich/openmrs/haiti/owa’, ‘APP_ENTRY_POINT’: ‘http://localhost:8080/openmrs/owa/openmrs-owa-orderentry/index.html’ }; {code}

In the above example “/home/mgoodrich/openmrs/haiti” is the top-level directory for the OpenMRS SDK server instance I’m trying to run it on.

Does anyone have any thoughts/experiences? What OS have others been developing on? I see a reference to the “appdata” directory in the README which made me think some people have been developing on Windows?

Take care, Mark

fyi cc @darius @dkayiwa @flavia @larrystone @fred @zeze @geofrocker @betty

(sorry, not quite sure who the proper person is to flag here, so I stole the cc list from Betty’s post… :slight_smile:

Oh, @mogoodrich, I’m sorry you are having this issue, please change es2015 to env in your webpack file. that should fix it

And speaking of hot reloading, I realised that you might need to manually do a hard reload (perhaps clear cache) to make your changes reflect even after setting the right configs in your webpack.config.js file

Thanks @larrystone! That got me further… is this a change we should make to the webpack file so that others don’t run into the same issue.

Now I’m running into a syntax error:

 @ ./app/js/components/orderEntry/OrderEntryPage.jsx 13:24-54

ERROR in ./app/js/components/orderEntry/SearchAndAddOrder.jsx
Module build failed: SyntaxError: Missing class properties transform.

As for the caching issue, I was doing a CTRL-reload and it still didn’t seem to be picking up the changes, but I will continue to explore further… I’m setting up a new OWA from scratch right now to get a better sense of how things work.

Take care, Mark

Okay, this has to do with the webpack configuration file, please update as below,

You may be required to install the babel-plugin-transform-class-properties and the babel-plugin-transform-spread packages via npm install

To get the changes to reflect I had to open up the developer console (chrome), right click the browser reload button near the url address bar then click hard reload, I hope that works for you

Yes, this change has been updated in the example webpack config file, it will soon be available on the github repo. I’m so sorry for the inconveniences this may have caused

If the Hard Reload option does not work, you could select the third option which is Empty Cache and hard Reload @mogoodrich

Thanks @fred and @larrystone, I figured out what my issue was… I needed to include the trailing slash in the “LOCAL_OWA_FOLDER”. I will see if there’s a way to make a fix so that it adds the last slash if necessary.

Take care, Mark

Alright, I have a dev environment for the Cohort Builder OWA set up! There were two main issues I ran into:

  1. The “LOCAL_OWA_FOLDER” needs to have a trailing slash in it

  2. I think we should be able to directly commit the “webpack.config.js” file to the project and not force the developer to manually copy “webpack.config.sample.js” to “webpack.config.js”. Customizing the “LOCAL_OWA_FOLDER” and “APP_ENTRY_POINT” configuration parameters can be done by changing/adding a “config.json” file (which would be different for each developer and not committed to source control).

I’ve made a change to fix these two issues in a branch and have opened a pull request:

Not sure who the proper person to review this is. If it get approved, I can make the same changes in the Order Entry module.

fyi cc @darius @dkayiwa @flavia @larrystone @fred @zeze @geofrocker @betty

Thanks!

Take care, Mark

1 Like

Glad to hear the issue is resolved. Your contribution is highly welcome.

Well done, but we seem to have an issue with a failing test caused by the removal of the deploy.sh file

Thanks @larrystone, I will check it out!

I believe I have the test fixed now, thanks @larrystone!

1 Like

I’m interested in working on getting the Cohort Builder and the Order Entry OWAs both using a common header component that features all the configurability of the old header provided by appui.

I just started by issuing a pull request against the Cohort Builder header to resolve an issue I found:

A few questions:

  • Is there anyone in particular I should be working on this with?
  • Recommendations on starting with the Order Entry or Cohort Builder header as a starting point? I was assuming they would be more or less copies of each other, but I’ve discovered that they are significiantly different from either other… is the Order Entry one considered an evolutionary improvement over the header in Cohort Builder?

Thanks & take care! Mark