How to use KPI development workflow the right way?

Development
1

Dear community and kobo devs!

I would like to ask you if anyone can help me please with setting up my dev. workflow for the KPI part of the application. My steps so far are following:

  • Use –setup to enter dev-mode
  • Make change in the code
  • Re-build the container with –buld-kpi
  • Restart configuration

It’s obvious that rebuilding the whole container is not most optimal way to test my new build.
I can execute npm run watch inside of the kpi container but how i would reach web-dev-server to see my changes?

Thank you
With Regards

2

Have you been able to figure out a solution? If so, could you perhaps post it here for posterity [hint, hint… :wink: ]

1 Like
3

Sorry this isn’t documented better. If you change Python code, that’s handled by manage.py runserver_plus, which kobo-install’s developer mode turns on for you (in place of uWSGI).

For front-end code, try ./run.py -cf run --publish 3000:3000 kpi npm run watch. This will be fast if Linux is your host but slower if it’s macOS, due to the way Docker’s disk volumes work. It’s possible to start npm run watch on your host OS instead of within a Docker container as well; ping me or @magicznyleszek if you need help with this.

2 Likes
4

Hi @Dmitri, did you find solution to your problem ? I’ve also encountered this problem and I dont how the process could be minimize.

5

The answer to that question is to map port 3000 from the host into the container where npm run watch is running. That’s what my previous post suggests:

It assumes you use GitHub - kobotoolbox/kobo-install: A command-line installer for setting up and running KoboToolbox on a remote server or local computer, using kobo-docker.. If not, you can replace ./run.py -cf with the appropriate docker-compose command, such as docker-compose -f docker-compose.frontend.yml -f docker-compose.frontend.override.yml, in which case the command would be:

docker-compose -f docker-compose.frontend.yml -f docker-compose.frontend.override.yml run --publish 3000:3000 kpi npm run watch

Does this not work for you, @adonis?

6

Hi @jnm, I tried the command you mentioned but this errors showed up.

ERROR in Entry module not found: Error: Can’t resolve ‘/srv/src/kpi/’ in ‘/srv/src/kpi’

ERROR in multi (webpack)-dev-server/client?http://0.0.0.0:3000 (webpack)/hot/dev-server.js ./
Module not found: Error: Can’t resolve ‘/srv/src/kpi/’ in ‘/srv/src/kpi’
@ multi (webpack)-dev-server/client?http://0.0.0.0:3000 (webpack)/hot/dev-server.js ./ main[2]

7

It says ‘compiled successfully’ but now the problem is that when I change any code here on my local kpi it does not change on the browser.

8

Hello @jnm, I tried to access the domain where the dev.server port 3000 pointing in and it’s showing me the list of directories not the application itself.

9

@magicznyleszek
Hi, Thanks for this reply.

I have installed kobotoolbox using kobo-install and activated the developer mode.

I was able to change the client side code and see the changes with the above mentioned command:
./run.py -cf run --publish 3000:3000 kpi npm run watch

The point is that, once I change the python code, I am not able to view the changes, even though after restarting the dockers.

Can you please guide me how to view python source code changes.

Thanks in advance.

10

Are you sure you’re editing the Python code in the right location? It’s easy to end up with multiple copies of the code and edit the wrong one by mistake. To find out, try this command:

kobo-install$ docker inspect $(./run.py -cf ps -q kpi) | grep -C 5 '"Destination": "/srv/src/kpi"'

The output will look like:

                "Propagation": "rprivate"
            },
            {
                "Type": "bind",
                "Source": "/home/john/edit_code_at_this_location/kpi",
                "Destination": "/srv/src/kpi",
                "Mode": "rw",
                "RW": true,
                "Propagation": "rprivate"
            },
            {

Look for the Source that corresponds to "Destination": "/srv/src/kpi" and make sure you’re editing the code there. (The same steps should work for kobocat as well.)

3 Likes
12

You are right. This was my issue :slight_smile:

Thanks a lot.

2 Likes
13

Sorry but trying this command i’m getting
“zsh: command not found: kobo-install$”

14

Hello, don’t include kobo-install$ as part of the command: that is the command prompt. You should make sure you’ve changed into the kobo-install directory and then run everything after the $. I assume you’re trying to follow the instructions below since those are the only ones where kobo-install$ is included; if that’s true, then you should be typing docker inspect (followed by the rest of the command) into your shell.

Also, I don’t use zsh (I use bash), so if you encounter other weird happenings, you might try to run the commands in bash instead. Good luck! Please remember that you’re on your own doing this kind of development. We (the KoBo team) try to offer as much unofficial support as possible, but our time for responding to this kind of inquiry is pretty limited.

1 Like
15

Thank you very much for your answer so quickly, I have switched to bash to make it easier and avoid future problems.
I run the code but nothing comes out in the output, I don’t understand why.
My intention is to see if I have made the changes in the correct part of the code.
Even so, if I run “./run.py -cf run --publish 3000:3000 kpi npm run watch”
I get this result, I don’t know if it will help.

Reading files…
167 SVGs found.
Generating fonts…
Adding timestamp to files…
Copying k-icons.css to SCSS file…
Generating definition file…
:information_source: ｢wds｣: Project is running at http://0.0.0.0:3000/
:information_source: ｢wds｣: webpack output is served from http://kf.kobo.local:3000/static/compiled/
:information_source: ｢wds｣: Content not from webpack is served from /srv/src/kpi
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
(node:65) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see Introduce getOptions · Issue #56 · webpack/loader-utils · GitHub
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
at Object.parseQuery (/srv/src/kpi/node_modules/less-terrible-coffeelint-loader/node_modules/loader-utils/index.js:78:3)
at Object.checkSource (/srv/src/kpi/node_modules/less-terrible-coffeelint-loader/index.js:90:21)
at Object. (/srv/src/kpi/node_modules/less-terrible-coffeelint-loader/index.js:130:19)
at /srv/src/kpi/node_modules/less-terrible-coffeelint-loader/index.js:77:7
at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)

:information_source: ｢wdm｣: Hash: 9edfd7bd758ca77b4524
Version: webpack 4.44.1
Time: 53219ms
Built at: 11/24/2021 8:51:56 PM

17

That output looks okay, but it seems incomplete. You should see Compiled successfully as the last line. It might take a few minutes; if you want some reassurance that things are not stuck, use a process monitor like top to make sure node is still using a lot of CPU time.

ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...
ℹ ｢wdm｣: wait until bundle finished: /static/compiled/031985f52357cfc37c55.hot-update.json
ℹ ｢wdm｣: Hash: 69adb768bcb55dbc44b6
Version: webpack 4.44.1
Time: 403ms
Built at: 01/07/2022 3:07:20 PM
 47 assets
Entrypoint app = vendors-69adb768bcb55dbc44b6.js app-69adb768bcb55dbc44b6.js app-69adb768bcb55dbc44b6.js.map
Entrypoint browsertests = vendors-69adb768bcb55dbc44b6.js browsertests-69adb768bcb55dbc44b6.js browsertests-69adb768bcb55dbc44b6.js.map
   1292 modules
ℹ ｢wdm｣: Compiled successfully.

Once you see this, you should be able to load http://kf.kobo.local:1234 (replacing 1234 with whatever port you chose during setup) and see the changes you made to front-end code. Additionally—and this is the nice part—as long as you leave npm run watch running, it will detect new changes to front-end code and recompile automatically. These automatic recompilations are much faster than the initial startup. Each time it detects changes and recompiles, you’ll see this again on the terminal:

ℹ ｢wdm｣: Compiling...
<snip>
ℹ ｢wdm｣: Compiled successfully.
1 Like
18

I finally get into this but then do I need to see the changes here:
http://kf.kobo.local:3000/static/compiled/
because it only shows a withe screen with this
Cannot GET /static/compiled/

Thank you

19

Hellos @adonis
Did you managed to see the application instead of the directories?