Unable to Start My First O3 Frontend Module

Development
1

Hi everyone, I’m developing my first O3 frontend module, but I’m not able to start it. Can someone please help me figure out what’s wrong with my code?

route.json
https://pastebin.com/VHJVnrFm

index.tx
https://pastebin.com/FX9zfjeK

package.json
https://pastebin.com/Bzxb9JPQ

importmap.json
https://pastebin.com/dqMCHEzS

Here is what I did:

  1. I built the module using yarn build.
  2. I copied the contents of the dist folder to /openmrs/servero3/frontend.
  3. I added this line to the importmap.json file:

json

"@openmrs/esm-template-app": "http://localhost:8080/openmrs/spa/openmrs-esm-template-app.js"
  1. I restarted the OpenMRS SDK using mvn openmrs-sdk:run.

Then, I tried to access http://localhost:8080/openmrs/spa/custom-home, but nothing shows up.

Can anyone help me figure out what I’m missing or doing wrong? @dkayiwa

Thanks in advance!

1 Like
2

Two things:

  1. Your app is called (in package.json) @openmrs/esm-custom-home-app, but in the import map, you’re referencing it as @openmrs/esm-template-app.
  2. If you’re trying to add it to an existing install, you need to also modify the routes.registry.json file to include the routes.json definition from your app. Normally, the openmrs CLI tool would do this for you.

O3 doesn’t load anything from the import map until it hits a point where the routes.registry.json tells it needs to.

An easier way to do the above is to run the yarn start command in the directory where your code lives. That’s usually the way we recommend developing O3 frontend modules.

2 Likes
3

Thank for the reply. i have added this code to routes.registry.json file.

“@openmrs/esm-custom-home-app”: { “$schema”: “``https://json.openmrs.org/routes.schema.json”``, “backendDependencies”: { “fhir2”: “>=1.2”, “webservices.rest”: “^2.24.0” }, “pages”: [ { “component”: “root”, “route”: “hello-world”, “online”: true, “offline”: true } ], “version”: “1.0.0” } }

and i changed the importmap.json too. “@openmrs/esm-custom-home-app”: “/openmrs/spa/esm-custom-home-app/openmrs-esm-template-app.js”

but still module not loading.

4

How are you serving the template app code? Again, I’d strongly recommend using the yarn start command as you mostly don’t need to worry about these kinds of details and this can take you very far down a rabbit hole.

5

with yarn start it is working. but i trying to deploy it in to sdk. i build the module with yarn build. then copy paste build folder in to frontend folder in sdk. then i rename it into esm-custom-home-app. then restart sdk. but module not loading.

6

To actually deploy it, generally, you should publish the module to an NPM registry. But you can also run npm pack to produce a .tgz bundle and then modify the distribution’s distro.properties to include something like spa.frontendModule.@openmrs/esm-custom-home-app: <path/to/tgz/bundle>.

2 Likes
7

Thanks for the assistance. I am also considering making the first 03 module soon.