# What is the correct (generic) way to generate a path (URL) to a static resource that an extention has?

**URL:** <https://discourse.jupyter.org/t/what-is-the-correct-generic-way-to-generate-a-path-url-to-a-static-resource-that-an-extention-has/21228>\
**Category:** extensions\
**Tags:** jupyterlab, jupyterlite\
**Created:** [September 3, 2023, 6:00am UTC](https://discourse.jupyter.org/t/what-is-the-correct-generic-way-to-generate-a-path-url-to-a-static-resource-that-an-extention-has/21228 "2023-09-03T06:00:09Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![tanaga9](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/tanaga9/32/9200_2.png) [@tanaga9](https://discourse.jupyter.org/u/tanaga9)\
**Post date:** [September 3, 2023, 6:00am UTC](https://discourse.jupyter.org/t/what-is-the-correct-generic-way-to-generate-a-path-url-to-a-static-resource-that-an-extention-has/21228/1 "2023-09-03T06:00:09Z")

</div>

I am developing [jupyterlab-box-drive](https://pypi.org/project/jupyterlab-box-drive/0.1.1/).

I need to [open a modal dialog for auth to Box.com](https://github.com/tanaga9/jupyterlab-box-drive/blob/48c220bd93cb5148b2916f28afb47e48f96ff8d4/src/index.ts#L58C1-L59C1) .

However, I don’t know the correct (generic) way to generate a path (URL) to [static html](https://github.com/tanaga9/jupyterlab-box-drive/blob/48c220bd93cb5148b2916f28afb47e48f96ff8d4/src/auth.html) for that.

In the following two cases, the path where the extension static resource is placed is different, and if I choose one of them, one will result in 404 not Found.

- JupyterLab: `../lab/extensions/jupyterlab-box-drive/static/auth.html`
- JupyterLite: `../extensions/jupyterlab-box-drive/static/auth.html`

jupyterlab-box-drive is intended to run on JupyterLite, but I would like to run it on JupyterLab if possible.

---

<div class="post-metadata">

**Author:** ![tanaga9](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/tanaga9/32/9200_2.png) [@tanaga9](https://discourse.jupyter.org/u/tanaga9)\
**Post date:** [September 3, 2023, 9:12am UTC](https://discourse.jupyter.org/t/what-is-the-correct-generic-way-to-generate-a-path-url-to-a-static-resource-that-an-extention-has/21228/2 "2023-09-03T09:12:24Z")

</div>

Is this topic relevant? [Static content for jupyterlab extension](https://discourse.jupyter.org/t/static-content-for-jupyterlab-extension/906/1)

---

<div class="post-metadata">

**Author:** ![bollwyvl](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/bollwyvl/32/904_2.png) [@bollwyvl](https://discourse.jupyter.org/u/bollwyvl)\
**Post date:** [September 4, 2023, 7:30pm UTC](https://discourse.jupyter.org/t/what-is-the-correct-generic-way-to-generate-a-path-url-to-a-static-resource-that-an-extention-has/21228/3 "2023-09-04T19:30:32Z")

</div>

There’s a lot of information in the [cross-posted issue](https://github.com/jupyterlite/jupyterlite/issues/1129)… looks like there are some _more_ cross-posted threads here. Please try to consolidate your inquiry, and actually _try_ some of the approaches recommended instead of just making more issues and posts.

In a nutshell, some options:

- use [webpack 5 assets](https://webpack.js.org/guides/asset-modules/)
  - jupyterlite-pyodide-kernel does this for [wheels](https://github.com/jupyterlite/pyodide-kernel/blob/11bf328e746794ff535f98f3c25c3a98d8f94d1c/packages/pyodide-kernel/src/_pypi.ts) with a [little](https://github.com/jupyterlite/pyodide-kernel/blob/11bf328e746794ff535f98f3c25c3a98d8f94d1c/packages/pyodide-kernel-extension/webpack.config.js#L9) [config](https://github.com/jupyterlite/pyodide-kernel/blob/11bf328e746794ff535f98f3c25c3a98d8f94d1c/packages/pyodide-kernel-extension/package.json#L67)

- use the crusty old `file-loader`
  - still works

- use [webpack-copy-plugin](https://webpack.js.org/plugins/copy-webpack-plugin/)
- use some out-of-band approach, such as a `PageConfig` setting, as populated in:
  - `jupyter-lite.json`
  - a serverextension

---

<div class="post-metadata">

**Author:** ![tanaga9](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/tanaga9/32/9200_2.png) [@tanaga9](https://discourse.jupyter.org/u/tanaga9)\
**Post date:** [September 10, 2023, 6:42am UTC](https://discourse.jupyter.org/t/what-is-the-correct-generic-way-to-generate-a-path-url-to-a-static-resource-that-an-extention-has/21228/4 "2023-09-10T06:42:46Z")

</div>

I’m sorry @bollwyvl

I didn’t realize that these two problems were the same.

- Put assets/resources into the wheel
- Get path to deployed assets/resources (pip install intervenes)

I assumed that the wheel(and pip install) separated the two and that they were unrelated, and I couldn’t think of other possibilities.

[I tried using asset module etc.](https://github.com/tanaga9/jupyterlab-box-drive/commit/21c30adb64b199910163fd5b57e470cee18c7bb0)  
and I got an error ☹  
`Error: Cannot find module '@/assets/auth.html'`

This is a maze for backend engineers…

---

<div class="post-metadata">

**Author:** ![tanaga9](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/tanaga9/32/9200_2.png) [@tanaga9](https://discourse.jupyter.org/u/tanaga9)\
**Post date:** [September 10, 2023, 11:17am UTC](https://discourse.jupyter.org/t/what-is-the-correct-generic-way-to-generate-a-path-url-to-a-static-resource-that-an-extention-has/21228/5 "2023-09-10T11:17:03Z")

</div>

I did a [temporary hack](https://github.com/tanaga9/jupyterlab-box-drive/commit/0dede58be096ead3dc924e81f2e5909f75ef5c3d), but I know this isn’t a good way to do it.

---

<div class="post-metadata">

**Author:** ![tanaga9](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/tanaga9/32/9200_2.png) [@tanaga9](https://discourse.jupyter.org/u/tanaga9)\
**Post date:** [October 15, 2023, 5:06pm UTC](https://discourse.jupyter.org/t/what-is-the-correct-generic-way-to-generate-a-path-url-to-a-static-resource-that-an-extention-has/21228/6 "2023-10-15T17:06:59Z")

</div>

Improved [temporary hack](https://github.com/tanaga9/jupyterlab-box-drive/blob/1b5c8a3eb3e49b48082d38003da3cfe39f41e750/src/index.ts#L18-L34).  
There may be a better way, but I don’t know.  
This seems to work well, so this is how I solved it.