Deploying Front-end Modules using OpenMRS Serve Option

Development
, , ,
1

We are currently in the process of migrating to Single Page Applications in #UgandaEMR. As a team, we have chosen to go with the OpenMRS server option(O3 Implementer Documentation: Set Up, Configure & Deploy - Projects - OpenMRS Wiki) as it is in line with the already existing implementation.

The distro.properties file is shown below.

omod.addresshierarchy=${addresshierarchyVersion}
omod.metadatadeploy=${metadatadeployVersion}
omod.reportingrest=${reportingRestVersion}
omod.serialization.xstream.type=omod
omod.serialization.xstream=${serializationxstreamVersion}
omod.registrationapp=${registrationappVersion}
omod.event.groupId=org.openmrs
omod.event=${eventVersion}
omod.uilibrary=${uilibraryVersion}
omod.htmlwidgets=${htmlwidgetsVersion}
omod.dataexchange=${dataexchangeVersion}
name=UgandaEMR
omod.appui=${appuiVersion}
omod.allergyui=${allergyuiVersion}
db.sql=classpath\://new-install.sql
omod.providermanagement=${providermanagementVersion}
omod.formentryapp=${formentryappVersion}
omod.idgen=${idgenVersion}
omod.metadatamapping=${metadatamappingVersion}
omod.htmlformentryui=${htmlformentryuiVersion}
db.h2.supported=false
omod.emrapi=${emrapiVersion}
omod.referenceapplication=${referenceapplicationVersion}
omod.htmlformentry=${htmlformentryVersion}
omod.appframework=${appframeworkVersion}
omod.referencemetadata=${referencemetadataVersion}
omod.coreapps=${coreappsVersion}
omod.reportingcompatibility=${reportingCompatibilityVersion}
omod.reporting=${reportingVersion}
omod.reportingui=${reportingUIVersion}
omod.adminui=${adminuiVersion}
omod.registrationcore=${registrationcoreVersion}
omod.appointmentscheduling=${appointmentschedulingVersion}
omod.appointmentschedulingui=${appointmentschedulinguiVersion}
war.openmrs=${openMRSVersion}
omod.webservices.rest=${webservices.restModuleVersion}
omod.calculation=${calculationVersion}
version=${project.parent.version}
omod.uicommons=${uicommonsVersion}
omod.xforms=${xformsVersion}
omod.uiframework=${uiframeworkVersion}
omod.metadatasharing=${metadatasharingVersion}
omod.dataintegrity=${dataintegrityVersion}
omod.databasebackup=${databaseBackupVersion}
omod.ugandaemr=${project.parent.version}
omod.ugandaemrreports=${ugandaemrReportsVersion}
omod.ugandaemrfingerprint=${ugandaemrfingerprintVersion}
omod.legacyui=${legacyuiVersion}
omod.fhir2=${fhir2Version}
omod.dataentrystatistics=${dataEntryStatisticsVersion}
omod.patientflags=${patientFlagsVersion}
omod.ugandaemrsync=${ugandaemrSyncVersion}
omod.patientqueueing=${patientqueueingVersion}
omod.cohort=${cohortModuleVersion}
omod.queue=${queueModuleVersion}
omod.spa=${spaModuleVersion}

spa.frontendModules.@openmrs/esm-framework=next
spa.frontendModules.@openmrs/esm-devtools-app=3.4.1-pre.112
spa.frontendModules.@openmrs/esm-implementer-tools-app=3.4.1-pre.112
spa.frontendModules.@openmrs/esm-login-app=3.4.1-pre.112
spa.frontendModules.@openmrs/esm-offline-tools-app=3.4.1-pre.112
spa.frontendModules.@openmrs/esm-primary-navigation-app=3.4.1-pre.112
spa.frontendModules.@openmrs/esm-home-app=3.1.1-pre.88
spa.frontendModules.@openmrs/esm-form-entry-app=3.2.1-pre.130
spa.frontendModules.@openmrs/esm-patient-allergies-app=3.2.1-pre.130
spa.frontendModules.@openmrs/esm-patient-appointments-app=3.2.1-pre.130
spa.frontendModules.@openmrs/esm-patient-attachments-app=3.2.1-pre.130
spa.frontendModules.@openmrs/esm-patient-banner-app=3.2.1-pre.130
spa.frontendModules.@openmrs/esm-patient-biometrics-app=3.2.1-pre.130
spa.frontendModules.@openmrs/esm-patient-chart-app=3.2.1-pre.130
spa.frontendModules.@openmrs/esm-patient-conditions-app=3.2.1-pre.130
spa.frontendModules.@openmrs/esm-patient-forms-app=3.2.1-pre.130
spa.frontendModules.@openmrs/esm-patient-immunizations-app=3.2.1-pre.130
spa.frontendModules.@openmrs/esm-patient-medications-app=3.2.1-pre.130
spa.frontendModules.@openmrs/esm-patient-notes-app=3.2.1-pre.130
spa.frontendModules.@openmrs/esm-patient-programs-app=3.2.1-pre.130
spa.frontendModules.@openmrs/esm-patient-test-results-app=3.2.1-pre.130
spa.frontendModules.@openmrs/esm-patient-vitals-app=3.2.1-pre.130
spa.frontendModules.@openmrs/esm-active-visits-app=3.1.1-pre.188
spa.frontendModules.@openmrs/esm-outpatient-app=3.1.1-pre.188
spa.frontendModules.@openmrs/esm-patient-list-app=3.1.1-pre.188
spa.frontendModules.@openmrs/esm-patient-registration-app=3.1.1-pre.188
spa.frontendModules.@openmrs/esm-patient-search-app=3.1.1-pre.188
spa.frontendModules.@ugandaemr/esm-ugandaemr-app=0.1.3


spa.core=3.4.0
spa.spaPath=/openmrs/spa/
spa.apiUrl=/openmrs/
spa.configUrls=
spa.importmap=/openmrs/spa/importmap.json

On loading the server in the browser using http://localhost:8080/openmrs/spa/home the index.html file is not seen even when it is available in the frontend folder.

The terminal displays this log on loading the browser


WARN - SpaServlet.getFile(166) |2022-10-27T12:36:07,604| File with path 'frontend/index.html' doesn't exist
2022-10-27 12:36:07,632 http-bio-8080-exec-4 ERROR Attempted to append to non-started appender MEMORY_APPENDER
WARN - SpaServlet.getFile(166) |2022-10-27T12:36:07,641| File with path 'frontend/index.html' doesn't exist
WARN - SpaServlet.getFile(166) |2022-10-27T12:36:08,667| File with path 'frontend/service-worker.js' doesn't exist
WARN - SpaServlet.getFile(166) |2022-10-27T12:36:08,672| File with path 'frontend/service-worker.js' doesn't exist

Any help to resolve this is highly appreciated.

We are running SPA 1.0.8 is the version of the Single Applications Module. and OpenMRS 2.5.5

@dkayiwa @mmwanje @ibacher @akileng56

2 Likes
2

What are the exact detailed steps that i would need, in order to reproduce this locally?

3

@dkayiwa the steps we followed are listed here O3 Implementer Documentation: Set Up, Configure & Deploy - Projects - OpenMRS Wiki under the Setup and Deployment for OpenMRS 3. X

Specifically Setting up using the OpenMRS Server Option.

4

@solemabrothers did you follow this conversation Best way to specify Configs of OpenMRS 3.x in distro file

I have also added you to a conversation on the OpenMRS slack that might help you

5

Do you have the output of the SDK’s build-distro command? I suppose if you don’t, is there a folder called frontend and does it have an index.html file in it? This should be in the same place as the modules folder. Finally, how are you actually deploying and running the artefacts from this? Is the frontend folder making it to the same place in your deployment?

Sorry for the many questions, but it’s kind of hard to track down what’s going on without knowing what you’ve actually done, especially at step 3.2 of the implementer’s guide.

6

@ibacher The frontend folder is available with the index.html file and it is also in the same location as the modules’ folder.

On the issue of deploying the artifacts, I think that is where we may need support but what we have done is ensure that we point to the frontend directory from the SPA global settings as guided at step 3.2.

The location of the fronted directory is ~/openmrs/servername and we thought that loading http://localhost:8080/openmrs/spa/login would load it automatically.

7

So by default, if you leave the configuration alone, it should be trying to load things from the /frontend sub-directory of the OpenMRS Application Directory, so if you’re using the SDK local setup (which it appears you are), it would be ~/openmrs/servername/frontend/. Does that folder exist and does it have an index.html file in it?

However, if you specified, in a global property, ~/openmrs/servername/frontend/ for example, this will not work. The reason is that the ~ is a character supported by Bash or Zsh, but not by most programs. If you have the GP set to that, OpenMRS will be trying to load a file $HOME/openmrs/servername/~/openmrs/servername/frontend/index.html and that file almost certainly doesn’t exist.

8

@ibacher and @dkayiwa thank you for the guidance, as it turns out, the GP for the frontend directory was set as just frontend instead of /frontend. This meant that the directory couldn’t be rightfully located.

Thank you so much, this has been resolved.