Hello world project example including a custom component

@asymingt wrote:

I have a reasonable grasp of Dash, and I’d like to get started with writing my own custom component to interface with a third party javascript library. However, I’m struggling to get my project layout correct. I’m trying to tie together a Makefile that builds components in a venv, and allows me to run my app to debug locally.

Here’s my rough project layout:

• /app (where the plotly dash app code goes)
• /assets (where the static files go)
• /components (where the component source files goes)
  requirements.txt (where I define my python3 packages)
  Makefile (what I use to build the project)

And here’s what I have so far as a Makefile (sorry about formatting):

components: venv/bin/activate
. venv/bin/activate; cd components; npm run build; cd …; rm -rf apps/test; cp -r components/hello_world apps/test

lint: venv/bin/activate
. venv/bin/activate; black apps

run: venv/bin/activate
. venv/bin/activate; python3 apps/server.py

venv/bin/activate: requirements.txt
test -d venv || virtualenv venv
. venv/bin/activate; pip3 install -Ur requirements.txt
touch venv/bin/activate

clean:
rm -rf venv
find -iname “*.pyc” -delete

Ideally, I’d just run make run and it would build my component, copy the products and run the server.

Firstly, is a Makefile the right tool and this a sensible project layout? If there is a better project structure, are there any “hello world” style examples that I can adopt that show how to setup a lightweight dash project with a custom component?

Secondly, when I try and import my new library (which I created from the cookiecutter example) I get a client-side “Error: x was not found.” error. Is this perhaps related to the way I copy the component build products across?

Posts: 1

Participants: 1

Read full topic