How to use KPI development?

Hello kobo devs!, I tried to intall kobotoolbox through docker in dev mode. I changed some code of react component, my problem is when I tried to run ‘python3 --build’, nothing changes. I’m already finding ways since day and I’m a bit hopeless. I tried to run npm run watch inside container but I cant access the web-server-dev path of it. Anyone can help ? please. Thanks in advance.

Hi @adonis.

I have also been struggling to get this setup properly. When I run npm run watch within the kpi docker container I can see that the kpi frontend is trying to pull in the compiled assets from http://kf.kobo.local:3000/static/compiled/ and is not able to do so (refused to connect)

I tried getting these assets with curl from within the docker container and found that it worked with… but did not work with the domain kf.kobo.local or with the IP address of the container (192.168.x.y)

This led me to look into the kpi/webpack/dev.server.js which should be the settings getting pulled in when running npm run watch. As far as I can tell, that all looks okay.

My current workaround instead of rebuilding is the following:

  1. Login to kpi docker container
    • docker exec -it kobofe_kpi_1 bash
  2. Goto main kpi src directory
    • cd /srv/src/kpi
  3. Build compiled assets (app-xyz.js,, vendors-xyz.js)
    • npm run build
  4. Django collect static files
    • python3 collectstatic
  5. Copy new compiled assets to location pulled in by nginx
    • I have 3 new compiled files (app-xyzabc.js,, vendors-xyzabc.js)
    • If you try to load the kpi website it will show a blank white screen, but viewsource will show the version of files that it is looking for and are currently misssing)
    • cp /srv/src/kpi/staticfiles/compiled/app-xyzabc.js* /srv/static/compiled/
    • cp /srv/src/kpi/staticfiles/compiled/vendors-xyzabc.js /srv/static/compiled/

Obviously not ideal, but a bit better than rebuilding every time.

If someone knows how I can get the webpack-dev-server working, please share!

I should note that my next plan to resolve this is to use the install settings to run npm locally. I have not set that up yet and have moved on to some other things for the moment. Would love to hear if/how someone else gets this working.

Hi @mattlangeman, yes I tried that already but seems its not convenient because you have to do so many process before you get the changes. I’m thinking is if it okay to change the path of build assets in kpi/webpack/dev.server.js into /srv/static/compiled/ so the moment npm run watch is executed changes will be on that path, I’m not sure to this idea hope it will work.

Does this work for you? (the formatting is trash in the quote below, but it’s better if you go to the original thread)

In a nutshell, you start a temporary KPI container for npm run watch and map port 3000 from your host into that container.