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.
Unlike yarn serve , IMO: there could be difference in configuration of the two commands in the template app especially in dependency conflict resolution.
@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://localhost:8080/ and 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 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.
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.
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.
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.