A simple OpenMRS Microfrontend for learning and development purposes
-
src
- Main files for the app -
src/index.ts
- Performs configurations and loads root.component.ts -
src/root.component.ts
- Loads and routes components for the app around a user context -
src/<component name>
-
src/<component name>/<component name>.component.tsx
- Main component file -
src/<component name>/<component name>.component.test.tsx
- Tests for the component -
src/<component name>/<component name>.resource.tsx
- Helpers for component (e.g. API interaction)
-
First, make sure to fork this repo.
Clone the forked repo to your computer and proceed as:
git clone https://github.com/<your github username>/openmrs-esm-helloworld-app.git
cd openmrs-esm-helloworld-app
npm install
npm run start
The core app will be served on localhost:8080
On a separate terminal, serve the local microfrontend module
npm run serve
The module will be served on localhost:8081
Now, on a browser, navigate to localhost:8080
. Your screen should look like this:
- On the core app, click on the bottom right square on the screen to open
dev-tools
- Then, scroll down the list of modules and locate the module
@openmrs/esm-helloworld-app
It should look like this: - Close the
dev-tools
window - Navigate to
localhost:8080/openmrs/spa/hello
, where your screen should look like this:
Note: Whenever you create a module, it is displayed by navigating to an assigned route.
Before making the desired changes, make sure to:
- On
webpack.config.js
, replace all instances ofhelloworld
by the name of your app - On
package.json
, replace all instances of 'helloworld' by the name of your app - On
src/index.ts
, replace@openmrs/esm-helloworld-app
by@openmrs/esm-<appname>-app
on line 17 - On
src/index.ts
, replacefeatureName: 'helloworld'
byfeatureName: '<appname>
on line 20 - On
src/index.ts
, replaceroute: 'hello'
byroute: '<chosen route for app>'
on line 30 This is how you will be able to access your module - On
src/set-public-path.ts
, replace@openmrs/esm-helloworld-app
byopenmrs/esm-<appname>-app
Test the module with the name changed by running
npm run start
And, on another terminal
npm run serve
- Now, navigate to
localhost:8080
and check that the@openmrs/esm-helloworld-app
has been changed to@openmrs/esm-<your appname>-app
ondev-tools
- Lastly, navigate to your chosen route like
localhost:8080/openmrs/spa/<route>
Make desired changes
Create a local build
npm run build
Create a centralized build by pushing to the github repo. Before doing so, check .git/workflows/node.js.yml
for the build jobs and make sure to add the corresponding secrets to your github repo.
Next, you can
git add .
git commit
git push
- helloworld: Main branch with descriptions
- helloworld-translations: Branch to demo translation feature
- helloworld-tests: Branch to demo tests
- helloworld-deploy: Branch to demo the deployment process
- helloworld-ws-patient-data: Branch to demo interaction with the openmrs API