Boilerplate-React-Owa

An front-end React OpenMRS admin OWA app boilerplate for development.

Features

• React OpenMRS Admin OWA App scaffold
• OpenMRS Admin OWA UI layout styling
• React components testing with Jest framework
• Support I18N
• Js code formatted with Prettier code formatter

Preview Scaffold OWA App

https://boilerplate-owa.herokuapp.com

Developer Guide

This OWA uses yarn as a package manager and for its build tasks.

Local dev setup

1. After cloning the project, move into the /boilerplate-react-owa directory:

cd boilerplate-react-owa/

2. Install the yarn dependencies:

$ yarn install

3. Compile the code and build the artifacts:

For development 'watching mode'

$ yarn webpack

This command also triggers the watch mode for debugging. This means that any changes will trigger an update to the main app.js in order to hot-deploy changes while developing.

For production

$ yarn buuild

This command minified bundles for production.

The output of the build should be in

• owa/app/build/app.js
• owa/app/build/vendor.js

4. Deployment for runtime debugging:

Start by accessing the OWA settings admin page at /openmrs/module/owa/settings.form on your runtime instance of OpenMRS.

Note that the Open Web Apps module must be installed, see here for more information.

The key setting is the 'App Folder Path' owa apps.Typically the location for all OWAs of your OpenMRS instance should be in /opt/openmrs/owa, the idea would be to symlink the content of the OWA app to your code repo:

ln -s /path/to/../boilerplate-react-owa/app /opt/openmrs/owa/boilerplate

This is assuming that Tomcat is able to serve symlinked content. If that is not an option, then you will have to copy (instead of symlinking) the content of the app folder of your local repository to /opt/openmrs/owa/boilerplate each time you want to observe a change that you have made.

5. Running tests

This OWA uses Jest as a test framework.

$ yarn test

If you want to run specific test only

$ yarn test <regex>

Where 'regex' can be used to point to certain targetted test files.

This OWA uses snapshot testing.

When it is clear that UI changes are as wanted, the Jest snapshots should be regenerated to be part of the next commit:

$ yarn test --u

6. Running Code formatter

This use prettier code formatter. Before pushing any code, you should run code formatter.

$ yarn code:format

Reference Links

• yarn
• ReactJs
• react-router
• Jest
• Jest-Doc
• enzyme
• snapshot testing
• prettier-code-formater

Implemented

• openmrs-module-bedmanagement