...
Code Block |
---|
|
git clone https://github.com/openmrs/openmrs-esm-patient-chart # or whichever frontend repo you want to work on
cd openmrs-esm-patient-chart
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.
- 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.
...
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 |
---|
|
...