GSoC Week 1: Setting Up the OWA

Rishav Rakshit
Jun 3, 2019 · 4 min read

The motivation behind these blogs is not only to serve as a log of all the work done during the week, but also be a helpful guide for anyone else who wants to build an OpenMRS OWA using React in the future!

The Project Currently Resides Here! [GitHub Link]

As mentioned in the last blog post (you can read it here) , our target for GSoC is to build an Open Web Application for the Patient Flags Module using ReactJS and Redux.

But First, What is an OWA?

According to the ‘Mozilla Archive of obsolete content’ (😥 err, this ‘obsolescence’ is a bit debatable) an OWA or ‘Open Web Application’ are webpages that are built using standard web tech like HTML, JS etc. but can also be installed on devices and used offline. This criteria requires these webpages to have pseudo cross-platform functionality. And it is exactly this cross-platform-ness that makes React the perfect candidate to build OWAs with!

Setting up the OWA

Image for post
Image for post
For two days, the ghost of Yeoman visited me in my nightmares 😆

Step uno to our multi-step extravaganza is to setup a scaffolding. For this, we shall use the Yeoman Generator.

Run the following commands to install the Yeoman Generator (Yo) and setup a basic project structure:

Once you’re done, you are pretty much good to go. Scaffolding using Yo sets up the basic HTML & CSS code — gives you a pretty header and body style. More importantly it sets up the webpack config and comes with Browsersync that allows live reload and is super duper trooper important during development.

2. Upgrading: The Problem with Yo for OpenMRS

OpenMRS OWA Generator is pretty old. The generator is in version 0.7.1 and was last published over a year ago. This poses a problem — when you setup your scaffolding using Yo, the packages it sets you up with (see package.json file) are pretty old too (heck it comes with Webpack 1.15!) Hence, for your future metal well-being, it is pretty important to upgrade our dependencies.

You can do it the old fashioned way by upgrading each dependency by hand by running —

npm install <package_name> --save/--save-dev

Or you can use ncu. [Checkout this Stack Overflow link to know more]

😄Tip: Whatever you do, stay away from upgrading to Webpack 4. Not only are there drastic changes to plugin support, but it somehow messes everything up. I literally wasted 2 days trying to figure my mess out. Currently I’m running v3.x — I’ll get back around to this later, upgrade to 4.x and report my results.

Image for post
Image for post
This person made me go around in circles too many times. Especially when upgrading to Webpack 4.

3. Avoiding Rookie Mistakes 😞

In the webpack.config.js file you shall find the ‘LOCAL_OWA_FOLDER’ config. Irrespective of operating system, do make sure your path looks similar to this —


4. Project Structure

You can see the project structure evolve here. But I tend to prefer Angular’s modular ‘neat and tidy’ approach as opposed to React’s ‘wild-wild west’ one. Check out this great article by Alexis Mangin to know more about the philosophy behind our future project structure.

Claiming Tickets & Building the Patient Tag Component

Since we are being Agile [check out our Scrum Board], we’ve broken the development into a number of sprints. Each sprint has a duration of 2 weeks.

😄Tip: We are currently undergoing Sprint#1! Check out our progress here.

Currently I’ve claimed tickets — FLAG-45 & FLAG-46. While work on FLAG-45 is complete, we’re 50% through FLAG-46. We’ve successfully setup the project.

We’ve also built the UI for the Tag Component — we’ve written the routes, the modals and ensured data transfer between the component and it’s modal. We’ve used React-Table package and introduced an extremely versatile table generator. We’ve also introduced a new feature — glyphicons to represent various tags along with tag colors. These together are called ‘Indicators’.

TODOs for Week 2 of Sprint#1 —

Here are a few screenshots to demonstrate our progress —

Image for post
Image for post
Current Single Page UI
Image for post
Image for post
Edit Tag Modal (without styling)
Image for post
Image for post
Populated table showing delete Tag functionality & indicators [ hex representation as well as glyphicons]

The Project Currently Resides Here! [GitHub Link]

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store