|
| 1 | +# Preview Kolibri on a mobile device |
| 2 | + |
| 3 | +_Note: This guide focuses on Kolibri as a web app rather than the Android version of Kolibri._ |
| 4 | + |
| 5 | +Some tasks may require either an actual or simulated mobile device, such as a phone or tablet. |
| 6 | + |
| 7 | +## Browser development tools |
| 8 | + |
| 9 | +Most browsers provide ways to simulate mobile devices via their development tools. These tools are generally useful for testing: |
| 10 | + |
| 11 | +- Mobile viewports |
| 12 | +- Network and CPU throttling |
| 13 | +- Touch gestures |
| 14 | + |
| 15 | +Find specific guidance for the browser you are using. |
| 16 | + |
| 17 | +## Real mobile device |
| 18 | + |
| 19 | +Since browser development tools only offer an approximation, some tasks may require you to preview Kolibri on a real mobile device. |
| 20 | + |
| 21 | +### Option 1 (recommended) |
| 22 | + |
| 23 | +1. Ensure that the mobile device you wish to use for previewing Kolibri is connected to the same local network as your computer where you run the development server. |
| 24 | +2. Run the development server with `yarn python-devserver` and `yarn run watch --write-to-disk` |
| 25 | +3. In the section with URLs in the ``yarn python-devserver`` terminal output, locate Kolibri's ``http://A.B.C.D:8000/`` URL on the first line. Open a browser on the mobile device and navigate to that URL, where you should see Kolibri. |
| 26 | + |
| 27 | +```bash |
| 28 | +INFO 2024-11-19 15:14:21,967 Kolibri running on: http://A.B.C.D:8000/ # use this URL |
| 29 | +... |
| 30 | +INFO 2024-11-19 15:14:21,967 Kolibri running on: http://127.0.0.1:8000/ |
| 31 | +``` |
| 32 | + |
| 33 | +### Option 2 |
| 34 | + |
| 35 | +1. Ensure that the mobile device you wish to use for previewing Kolibri is connected to the same local network as your computer where you run the development server. |
| 36 | +2. Run the development server with `yarn python-devserver` and `yarn build` |
| 37 | +3. In the section with URLs in the ``yarn python-devserver`` terminal output, locate Kolibri's ``http://A.B.C.D:8000/`` URL on the first line. Open a browser on the mobile device and navigate to that URL, where you should see Kolibri. |
| 38 | + |
| 39 | +```bash |
| 40 | +INFO 2024-11-19 15:14:21,967 Kolibri running on: http://A.B.C.D:8000/ # use this URL |
| 41 | +... |
| 42 | +INFO 2024-11-19 15:14:21,967 Kolibri running on: http://127.0.0.1:8000/ |
| 43 | +``` |
| 44 | + |
| 45 | +.. warning:: |
| 46 | + When running the development server as described above, you will need to rebuild frontend assets manually using ``yarn build`` after every change. |
| 47 | + |
| 48 | +.. tip:: |
| 49 | + Rebuild frontend assets faster by rebuilding only assets related to a plugin where you currently work. For example when developing on files of the Learn plugin, after the initial ``yarn build`` run, for all subsequent rebuilds only run ``yarn exec kolibri-tools build prod -- --plugins kolibri.plugins.learn`` instead of ``yarn build``. Use ``kolibri plugin list`` to see all plugins. |
| 50 | + |
| 51 | +### Troubleshooting |
| 52 | + |
| 53 | +- If you see an indefinite Kolibri loader on your mobile device, double-check that you are not running the development server with `yarn development-hot`. Follow the steps outlined above instead. |
| 54 | + |
| 55 | +- If you cannot access Kolibri at all, check your firewall, VPN, or similar network settings. |
0 commit comments