# How static resources are resolved within a module

**URL:** <https://talk.openmrs.org/t/how-static-resources-are-resolved-within-a-module/11406>\
**Category:** Development\
**Created:** [May 9, 2017, 3:52pm UTC](https://talk.openmrs.org/t/how-static-resources-are-resolved-within-a-module/11406 "2017-05-09T15:52:14Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![jtabot](https://talk.openmrs.org/letter_avatar/jtabot/32/5_5575768a8748004e209b776fc1b2916d.png) [@jtabot](https://talk.openmrs.org/u/jtabot)\
**Post date:** [May 9, 2017, 3:52pm UTC](https://talk.openmrs.org/t/how-static-resources-are-resolved-within-a-module/11406/1 "2017-05-09T15:52:14Z")

</div>

Hi all

I am creating a module and I want to use js and css files inside my jsp files. I noticed that in some modules when they have jsp views inside the webapp folder like hello.jsp. Inside controllers the view is resolved as “/module/moduleId/hello” where openmrs will definitely add the .jsp at the end.

Now I have the following files webapp/hello.jsp and webapp/resources/hello.js. I tried using \<script src="…/resources/hello.js"/\> inside the jsp file to include the hello.js but I get 404

---

<div class="post-metadata">

**Author:** ![dkayiwa](https://talk.openmrs.org/user_avatar/talk.openmrs.org/dkayiwa/32/179_2.png) [@dkayiwa](https://talk.openmrs.org/u/dkayiwa)\
**Post date:** [May 9, 2017, 8:16pm UTC](https://talk.openmrs.org/t/how-static-resources-are-resolved-within-a-module/11406/2 "2017-05-09T20:16:06Z")

</div>

Use something like this: [https://github.com/openmrs/openmrs-module-xforms/blob/master/omod/src/main/webapp/xformDesigner.jsp#L15](https://github.com/openmrs/openmrs-module-xforms/blob/master/omod/src/main/webapp/xformDesigner.jsp#L15)

---

<div class="post-metadata">

**Author:** ![jtabot](https://talk.openmrs.org/letter_avatar/jtabot/32/5_5575768a8748004e209b776fc1b2916d.png) [@jtabot](https://talk.openmrs.org/u/jtabot)\
**Post date:** [May 9, 2017, 9:07pm UTC](https://talk.openmrs.org/t/how-static-resources-are-resolved-within-a-module/11406/3 "2017-05-09T21:07:09Z")

</div>

> [@dkayiwa](#):
>
> [OpenMRS XForms Designer](https://github.com/openmrs/openmrs-module-xforms/blob/master/omod/src/main/webapp/xformDesigner.jsp#L15)

@dkayiwa thanks. Please help me understand how this is resolved file="/moduleResources/xforms/formdesigner/FormDesigner.nocache.js. I mean if I have .js file inside moduleName/omod/src/main/webapp/js/hello.js how would I my html include code look like?

---

<div class="post-metadata">

**Author:** ![dkayiwa](https://talk.openmrs.org/user_avatar/talk.openmrs.org/dkayiwa/32/179_2.png) [@dkayiwa](https://talk.openmrs.org/u/dkayiwa)\
**Post date:** [May 9, 2017, 9:22pm UTC](https://talk.openmrs.org/t/how-static-resources-are-resolved-within-a-module/11406/4 "2017-05-09T21:22:20Z")

</div>

Put it under resources in a path like …/webapp/resources/js/hello.js

Then you would use:

```
<openmrs:htmlInclude file="/moduleResources/moduleName/js/hello.js"/>
```

---

<div class="post-metadata">

**Author:** ![jtabot](https://talk.openmrs.org/letter_avatar/jtabot/32/5_5575768a8748004e209b776fc1b2916d.png) [@jtabot](https://talk.openmrs.org/u/jtabot)\
**Post date:** [May 16, 2017, 5:20pm UTC](https://talk.openmrs.org/t/how-static-resources-are-resolved-within-a-module/11406/5 "2017-05-16T17:20:25Z")

</div>

@dkayiwa the above was indeed helpful. I was able include javascript files into my jsp page using that.

Now can’t seem to figure this one out;

I have a jsp file in webapp/views/hello.jsp

and a javascript file in webapp/resources/js/sw.js

I want to [register](https://developer.mozilla.org/en/docs/Web/API/ServiceWorkerContainer/register) a [Service Worker](https://developer.mozilla.org/en/docs/Web/API/Service_Worker_API) from the hello.jsp page. I have placed this code inside the hello.jsp

```
<script>
    if ("serviceWorker" in navigator) {
        console.log("Service Worker Available!!!");
        navigator.serviceWorker.register("../resources/js/sw.js").then(function(registration) {
            console.log("Yay!");
        }).catch(function(error) {
            console.log("error!", error);
        });
    }
</script>

```

When I deploy and test the application, I get this output. Looks like the sw.js file is not been found

> Service Worker Available!!! helloWorldForm.form:1484 error! TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

---

<div class="post-metadata">

**Author:** ![dkayiwa](https://talk.openmrs.org/user_avatar/talk.openmrs.org/dkayiwa/32/179_2.png) [@dkayiwa](https://talk.openmrs.org/u/dkayiwa)\
**Post date:** [May 16, 2017, 8:59pm UTC](https://talk.openmrs.org/t/how-static-resources-are-resolved-within-a-module/11406/6 "2017-05-16T20:59:51Z")

</div>

Did you try this? `navigator.serviceWorker.register("<openmrs:htmlInclude file='/moduleResources/moduleName/js/sw.js'/>").then(function(registration) {`

---

<div class="post-metadata">

**Author:** ![dkayiwa](https://talk.openmrs.org/user_avatar/talk.openmrs.org/dkayiwa/32/179_2.png) [@dkayiwa](https://talk.openmrs.org/u/dkayiwa)\
**Post date:** [May 16, 2017, 9:19pm UTC](https://talk.openmrs.org/t/how-static-resources-are-resolved-within-a-module/11406/7 "2017-05-16T21:19:33Z")

</div>

I just realised the above would not work because it just creates a script tag. Did you try this? `navigator.serviceWorker.register("../moduleResources/moduleName/js/sw.js").then(function(registration) {`

---

<div class="post-metadata">

**Author:** ![jtabot](https://talk.openmrs.org/letter_avatar/jtabot/32/5_5575768a8748004e209b776fc1b2916d.png) [@jtabot](https://talk.openmrs.org/u/jtabot)\
**Post date:** [May 17, 2017, 9:55am UTC](https://talk.openmrs.org/t/how-static-resources-are-resolved-within-a-module/11406/8 "2017-05-17T09:55:44Z")

</div>

@dkayiwa thanks. But that didn’t work either. This is a huge blocker for us. Do you think platform will need some enhancements to have this working?

---

<div class="post-metadata">

**Author:** ![raff](https://talk.openmrs.org/user_avatar/talk.openmrs.org/raff/32/11894_2.png) [@raff](https://talk.openmrs.org/u/raff)\
**Post date:** [May 17, 2017, 10:02am UTC](https://talk.openmrs.org/t/how-static-resources-are-resolved-within-a-module/11406/9 "2017-05-17T10:02:49Z")

</div>

@jtabot, see e.g. [https://github.com/openmrs/openmrs-module-dhisreport/blob/d6a2a00b098e6379e1c364e430173a7dfa6cd3c5/omod/src/main/webapp/resources/js/js\_css.jsp#L25](https://github.com/openmrs/openmrs-module-dhisreport/blob/d6a2a00b098e6379e1c364e430173a7dfa6cd3c5/omod/src/main/webapp/resources/js/js_css.jsp#L25) how you can construct js url…

---

<div class="post-metadata">

**Author:** ![jtabot](https://talk.openmrs.org/letter_avatar/jtabot/32/5_5575768a8748004e209b776fc1b2916d.png) [@jtabot](https://talk.openmrs.org/u/jtabot)\
**Post date:** [May 17, 2017, 10:27am UTC](https://talk.openmrs.org/t/how-static-resources-are-resolved-within-a-module/11406/10 "2017-05-17T10:27:24Z")

</div>

@raff thanks. That worked like a charm 🙂

---

<div class="post-metadata">

**Author:** ![jtabot](https://talk.openmrs.org/letter_avatar/jtabot/32/5_5575768a8748004e209b776fc1b2916d.png) [@jtabot](https://talk.openmrs.org/u/jtabot)\
**Post date:** [May 19, 2017, 6:19pm UTC](https://talk.openmrs.org/t/how-static-resources-are-resolved-within-a-module/11406/11 "2017-05-19T18:19:29Z")

</div>

@raff can I use that in an external javascript to resolve resources or is it only allowed in jsp pages?

say I have an external javascript that is included in my jsp page and inside my javascipt i want to resolve file paths in strings like ‘/css/main.css’

---

<div class="post-metadata">

**Author:** ![raff](https://talk.openmrs.org/user_avatar/talk.openmrs.org/raff/32/11894_2.png) [@raff](https://talk.openmrs.org/u/raff)\
**Post date:** [May 22, 2017, 10:23am UTC](https://talk.openmrs.org/t/how-static-resources-are-resolved-within-a-module/11406/12 "2017-05-22T10:23:25Z")

</div>

js files are not processed by the container…

The typical approach is to define a js global variable CONTEXT\_PATH = ${pageContext.request.contextPath} in a jsp page and then use it in your scripts.