Creating a Frontend Module o3

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;

yarn install;

yarn serve;

All I get is a directory listing in my browser.

log: [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] 517 modules webpack 5.88.1 compiled successfully in 14200 ms Issues checking in progress… No issues found.
yarn start

works perfectly fine for me.

Unlike 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:

  1. 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://localhost:8080/ and http://192.168.0.105:8080/. Make sure you are using one of these URLs to access the app.

  2. 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.

  3. Check the Entry Point: Ensure that the entry point for your application is correctly set in your webpack configuration. The entry point is the JavaScript file where your application starts. It should be specified in your webpack configuration and should point to the main file of your app.

  4. Check Dependencies: Make sure that you have all the required dependencies installed. Run yarn again to ensure that all the necessary packages are installed.

  5. 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.

  6. Network Issues: Sometimes, network issues can cause problems like this. Kindly ensure you are having a stable internet.

  7. 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.

  8. Browser Cache: Clear your browser cache and try reloading the page. Cached assets may sometimes cause unexpected behavior.

  9. Check the Code: Examine your code for any issues, such as incorrect import paths, missing components or other JavaScript errors.

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.

2 Likes

cool @ibacher

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

Where: https://iu.zoom.us/j/86514204199

Full openmrs calendar here: Events & Meetings (OpenMRS Calendar) - Resources - OpenMRS Wiki (It should automatically default to your timezone)