KPI development

[khansaifmohd93]

Dear KoBo community,

I am trying to develop small custom functionality in KPI. I did some changes and run the following command ./run.py -cf run --publish 3000:3000 kpi npm run watch. I understand that this command pushes my changes to a new docker container at http://0.0.0.0:3000/ and further waits if any other changes are being made in the local filesystem so that it can push again.

Now to see the changes in the frontend, I have to build the KPI with the command ./run.py -kf and restart the KPI that takes some time to get completely up and running. I would like to know how can I see the changes in the frontend directly without having to restart the KPI? It’s a lot of time to observe a single change.

Then I made some changes in the Coffeescript files and I am not able to see the changes in the frontend even after multiple restarts. How can I see the changes done in the Coffeescript files in the frontend?

Also, I would like to know how can I start a KPI server locally with an IDE(since it’s a Django project) that will interact with the rest of KoBo architecture. In this way, I can also debug the code changes and can test the code changes more freely without worrying about the deployment process.

[Josh]

Hi @khansaifmohd93, did you have KPI running before using the watch command above? When all the containers are up, you should be able to run that command and see live changes in the UI without restarting KPI – that’s the point of using it. Let me know if that helps and then we can figure out the remaining questions.

[khansaifmohd93]

Hi @Josh, thank you for the response. Yes, I am able to see the live changes in the frontend when I make changes in the local code (JavaScript and Python). Also, I can see the changes I make in the CoffeeScript are reflected live, in the docker container filesystem but I cannot see the changes in the UI without taking a complete restart.

[Josh]

I see I’ve pinged the frontend gurus to step in here. Please note that we are planning to remove all CoffeeScript code in the near future.

[magicznyleszek]

In kobo-install there is one step asking about running npm locally vs inside docker you should choose locally:

How do you want to run `npm`?
	1) From within the container
	2) Locally
[2]: 

Then you would need to run npm install inside kpi directory and run npm watch there.

CoffeeScript code is being build together with the rest of JS and CSS, so any changes anywhere should be visible.

[khansaifmohd93]

Thank you @magicznyleszek for the instructions. I changed the setup as mentioned above but a Server Error (500) is thrown in the browser when I try to access the frontend, I will list the steps I took for the setup.

1. I chose Locally while updating configurations in the setup and the setup completed without any errors. All the docker containers were up and running.
2. Then I navigated to the KPI directory and ran the command npm install, it installed a bunch of packages. I get this output in the terminal and I assumed that there is no problem in this step.

(base) saif@saif:~/kobodev/kpi$ sudo npm install
up to date, audited 1534 packages in 3s
26 vulnerabilities (20 low, 4 moderate, 2 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.
Run npm audit for details.

3. Then I ran the command ´npm run watch´, the command gave the following output which is continuously running in the terminal.

(base) saif@saif:~/kobodev/kpi$ npm run watch
npm WARN lifecycle The node binary used for scripts is /snap/bin/node but npm is using /snap/node/3790/bin/node itself. Use the --scripts-prepend-node-path option to include the path for the node binary npm was executed with.
kpi@0.1.1 watch /home/saif/kobodev/kpi
webpack-dev-server --config webpack/dev.server.js
｢wds｣: Project is running at http://0.0.0.0:3000/
｢wds｣: webpack output is served from http://localhost:3000/static/compiled/
｢wds｣: Content not from webpack is served from /home/saif/kobodev/kpi
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
｢wdm｣: wait until bundle finished: /static/compiled/

5. I am able to access the filesystem at http://0.0.0.0:3000/ but there is no folder compiled under the directory static as shown in the URL http://localhost:3000/static/compiled/.
6. Then I went to access the kobo frontend but it is giving me a Server Error (500).

Please let me know in which step did I make a mistake or as to why I am getting this Server Error (500).

In the beginning, I made the changes in an existing setup and I got the same error. Then I did a fresh installation using kobo-install and still getting the error.

[khansaifmohd93]

Thank you @Josh for the response. Can you please give an estimate as to when will the CoffeeScript code be removed from the kobo codebase.

[magicznyleszek]

CoffeScript will eventually go away, but we have no date for it. I can assure you this will not happen in next 6 months

As for 500 error - do you see something interesting in ./run.py --logs (run inside kobo-install?

Also - you shouldn’t need sudo for npm install.

[khansaifmohd93]

I am able to run the KPI in development mode using npm run watch. Now when making any change in KPI, the change is picked up for the first time. But then subsequent changes are not being picked in the frontend code. Subsequent files are always recompiled successfully in npm but the changes don’t get reflected in the frontend.

Do I have to wait for a specified time before making subsequent changes?
I restarted the KPI docker container when the changes don’t reflect and then the latest changes are reflected. Then again after the first change, the changes don’t reflect.

Can someone please explain what am I doing wrong or how can I avoid restarting the KPI docker container every time I make a change?

For reference, I made changes in some of the strings in the myLibraryRoute.es6 file.