When you want to write code within the OpenMRS SPA, you will need to follow these instructions for setting up your development environment.
First, make sure you have the following installed.
- Install git
- Install node, which includes npm. This is for compiling and bundling frontend code (not for writing backend code).
- Consider installing nvm, which can be used to install specific versions of npm and node as needed.
- Trust insecure localhost SSL certificates.
- Run the following commands:
Code Block |
---|
|
git clone https://github.com/openmrs/openmrs-esm-rootpatient-configchart # or whichever frontend repo you want to developwork inon
cd openmrs-esm-rootpatient-configchart
npm install
npm start -- --https --port 8080 # omit the '-- --https' if your OpenMRS server isn't using https (e.g., localhost) |
- Now go to https://openmrs-spa.org/openmrs/spa/login
- Open the browser console
localStorage.setItem('openmrs:devtools', true)
- Refresh the page. You will now see a floating colored rectangle on the screen. Click on it. A panel will open up
- In the Import Map tab, click on the frontend module that you are working on.
- Modify For all repos except for openmrs-esm-root-config, modify the URL to be
8080
. This will make it so the javascript bundle is loaded from https://localhost:8080 instead of the CDN. For esm-root-config, modify it to be the following fully qualified url: https://localhost:8080/openmrs-esm-root-config.defaults.js
- Refresh the page.
- Verify that root-config.js is being downloaded from localhost now. You can do this in the Network tab of the browser dev tools.
- Congrats! You're all set up. Try adding a console.log() statement inside of a file and saving the file. Your web browser will refresh and you should see the console.log inside of the browser console.
https://github.com/uw-fhir/OpenMRS-FHIR-Webinars/blob/master/Webinar-3-MF-FHIR-Dev-Setup/overview-post.md/
If you run into a issue in Chrome where you are unable to proceed with insecure certificates, try running with a separate certificate as follows:
Generate self-signed certificate:
Code Block |
---|
|
openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes |
Use self-signed certificate when starting Node:
Code Block |
---|
|
npm start -- --https --cert cert.pem --key key.pem |
To debug the jest cases, I just used the first option from these instructions: https://jestjs.io/docs/en/troubleshooting
- I added .vscode/launch.json with the following configuration
Code Block |
---|
language | js |
---|
title | launch.json |
---|
|
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229
}
]
} |
- From the command line I just run the following command:
- In VSCode set breakpoints and click Debug
I could not figure out how to automatically launch and attach to a test. These instructions: https://jestjs.io/docs/en/troubleshooting did not work for me.
Related articles
Filter by label (Content by label) |
---|
showLabels | false |
---|
max | 5 |
---|
spaces | projects |
---|
showSpace | false |
---|
sort | modified |
---|
reverse | true |
---|
type | page |
---|
cql | label in ("microfrontends","spa","developer-how-to") and type = "page" and space = "projects" |
---|
labels | spa microfrontends developer-how-to |
---|
|
...