I am trying to run openmrs-esm-template-app from GitHub - openmrs/openmrs-esm-template-app: A "Hello World" app you can use as a template for creating new microfrontends as a sample reference with the following commands;
All I get is a directory listing in my browser.
[webpack-dev-server] Project is running at:
[webpack-dev-server] Loopback: http://localhost:8080/
[webpack-dev-server] On Your Network (IPv4): http://192.168.0.105:8080/
[webpack-dev-server] Content not from webpack is served from ‘~/openmrs-esm-template-app/dist’ directory
assets by path *.js 7.85 MiB
assets by status 7.45 MiB [big]
assets by chunk 6.93 MiB (id hint: vendors)
asset vendors-node_modules_carbon_react_es_index_js-node_modules_css-loader_dist_runtime_api_js-nod-96edda.js 5.56 MiB [emitted] [big] (id hint: vendors) 1 related asset
asset vendors-node_modules_openmrs_esm-framework_src_internal_ts.js 1.38 MiB [emitted] [big] (id hint: vendors) 1 related asset
asset main.js 268 KiB [emitted] [big] (name: main) 1 related asset
asset openmrs-esm-template-app.js 261 KiB [emitted] [big] (name: @openmrs/esm-template-app) 1 related asset
- 14 assets
assets by path *.json 10.4 KiB
asset openmrs-esm-template-app.js.buildmanifest.json 9.99 KiB [emitted]
asset routes.json 384 bytes [emitted] [from: src/routes.json] [copied]
webpack 5.88.1 compiled successfully in 14200 ms
Issues checking in progress…
No issues found.
works perfectly fine for me.
yarn serve , IMO: there could be difference in configuration of the two commands in the template app especially in dependency conflict resolution.
cc: @dennis @vasharma05 @ibacher @bistenes
@ben.seep sorry for the error!
Kindly it looks like you are running a webpack development server for the openmrs-esm-template-app, but you are getting a directory listing in your browser instead of the expected application. This can happen for a few reasons and I’ll provide some troubleshooting steps to help you resolve this issue:
Check the URL: Ensure that you are accessing the correct URL in your browser. Based on the log you provided, the development server is running at
http://192.168.0.105:8080/. Make sure you are using one of these URLs to access the app.
Check Configuration: Verify that your webpack configuration is set up correctly. It’s possible that there is a misconfiguration in your webpack configuration files that is causing this issue.
Check Dependencies: Make sure that you have all the required dependencies installed. Run
yarn again to ensure that all the necessary packages are installed.
Check the Console: Open the developer console in your browser and check for any error messages. These messages can provide valuable information about what might be going wrong.
Network Issues: Sometimes, network issues can cause problems like this. Kindly ensure you are having a stable internet.
Proxy Configuration: If your app is making API requests to a backend server, check if you have configured a proxy correctly in your webpack configuration. If the proxy is not correctly set up, it can result in issues when trying to fetch data from the backend.
Browser Cache: Clear your browser cache and try reloading the page. Cached assets may sometimes cause unexpected behavior.
This is quite intentional.
yarn start—which is the command mentioned in the template-app README—provides a way to work on a microfrontend within the context of a full app.
yarn serve, on the other hand, simple starts the Webpack dev server. This command is useful in some advanced workflows, but you probably don’t want to worry about that.
Please read the README; it’s there to explain how to work with the project and it’s very short.
Cleared pagecache, dentries, and inodes.
yarn start --backend “http://localhost:8080/” --port 8081
Can’t really say what happened earlier . However I still find myself in an infinite loop with the documentation. All I wanted was to connect the frontend to my local server without getting my hands dirty.
@ben.seep I’m just seeing this didn’t get resolved. Did you try joining the O3 Dev Office Hours for live-time peer support with O3?
These dev office hours for O3 support are every Monday-to-Thursday:
Coffee Break (O3 Troubleshooting for Frontend Developers)
When:5:00 pm IST | 2:30 pm Nairobi | 1:30 pm Cape Town | 11:30 pm UTC | 6:30am Boston | 3:30am Seattle
Full openmrs calendar here: Events & Meetings (OpenMRS Calendar) - Resources - OpenMRS Wiki (It should automatically default to your timezone)