How changing the default path of a dash component

Dash Python
1

Hello,

I have built a new component using dash_component_boilerplate. Everything works fine and the component displays correctly.
I want to integrate it in my project with this type of tree structure:

| components
| pages
app.py

However, I can’t configure the path of the component to place it in the “components” folder. Do you have any idea?

To clarify, the component works correctly when I place it in the root but not in the components folder. So the path problem is internal to the component.

2

Hello and welcome to the community!

If you placed your .py file i.e. my_component.py in file components and then want to use it in any .py file i.e. in app.py or any file in pages folder you need to import your my_component.py as follows:

from components import my_component

and then call your objects from my component with my_component.my_function syntax or you can import your objects directly:

from components.my_component import my_function

I hope it helps :slight_smile:

1 Like
3

Thank you very much.

I placed my component like this:

| components
| | my_component
| | | __init__.py
| | | _imports_.py
| | |  metadata.json
| | |  my_component.min.js
| | |  my_component.min.js.map
| | |  MyComponent.py
| | |  package-info.json
| pages
| | page.py
app.py

And I would like to integrate it in the page “page.py”. The program does not display any error but the page does not display… It loads endlessly.
The component is called and used like this:

import components.my_component

my_component.MySecondComponent()

On the other hand, the component works when I put the folder “my_component” in the root.

Moreover, is the file MyComponent.py enough to use the component?

I apologize if I’m not very clear

4

Did you try instead

import components.my_component

use

from components import my_compoment

If you import it like this then you have to call your component

components.my_component.MySecondComponent()

5

Yes, I’ve already tried. The problem is not the import of the component…

But I don’t understand why the component is usable from the root (in the folder with my_component.min.js, etc…) and not in components

6

Personally I have no experience with including my own javascript into the app. Did you check the documentation about this topic?

1 Like
7

Arff, I just realized my mistake… Indeed, I had not put the js.min script in assets/

So, my program has this structure

| assets
| | my_component.min.js
| components
| | MyComponent.py
| pages
| | page.py
app.py

Thanks for your help!

8

I am glad it works!