The Template(opens in a new tab) frontend module can be used as a starting point for creating a new frontend module. To create a new frontend module, you can either fork the Template repository or clone and copy it over to the new repository.
Example: Creating a new frontend module
ℹ️
Note that we're setting this repo up as a polyrepo(opens in a new tab). If you want to create a new frontend module in a monorepo, see the note about monorepos below.
Suppose you want to create a frontend module that provides a UI for displaying the active prescriptions. Our goal is to attempt to recreate the Active Prescriptions(opens in a new tab) tab of the openmrs-esm-dispensing-app(opens in a new tab). The process for doing that would be as follows:
Step 1
Go to the Github repository for the Template(opens in a new tab) seed app and click the Use this template button. Click Create a new repository and follow the instructions to create a new repository. Clone the new repository to your local machine. In this case, we'll name the new repository openmrs-esm-active-prescriptions. Click the Create repository from template button and then clone the new repository to your local machine.
...
Why the esm prefix? Frontend modules have a convention of being prefixed with esm. See the note about frontend modules.
Step 2
You'll want to cd into your project directory and run yarn up openmrs@next @openmrs/esm-framework@next to update the OpenMRS core libraries. Then run yarn to install the project dependencies.
...
To learn more about how openmrs develop works, check out how runDevelop(opens in a new tab).
Step 3
Next, we'll follow the steps in the README to adapt the code to our needs. That'll include the following steps:
...
Now that the route is setup, it can be accessed via http://localhost:8080/openmrs/spa/active-prescriptions, which would show the boilerplate for the template app. The boilerplate has useful resources about key features of the O3 framework that will likely help you in the development of your frontend module. To start changing the template code, you can follow the instructions in the README.md of the template repository(opens in a new tab).
Step 4
Profit! You should now have a custom frontend module that you can use in your OpenMRS application.
Creating a frontend module in a monorepo
The process for creating a new frontend module in a monorepo is nearly identical to the one for creating one in a polyrepo with a few tweaks:
...
To learn more about what's possible with frontend modules, read the Overview guide.
Integrating your frontend module into your application
Once you've created a frontend module, you'll want to integrate it into your application. There are two steps to doing so.
...