# Develop with KDK
The default Kalisio application template kApp (opens new window) provides the basic structure and tools to build and run a KDK-based application. We detail the main commands in the following sections.
# Web app
# Running for development
Run the frontend app (from root project folder): $ yarn dev
Then from the backend api
folder run the server-side app: $ yarn dev
Then point your browser to localhost:8080 (opens new window).
# Building for production
Build the frontend app (from root project folder): $ yarn build
.
Then from the backend api
folder build the server-side app: $ yarn build
# Running in production
Make sure you built your app first
From the backend api
folder run the server-side Feathers app, this will also serve the frontend Quasar app : $ yarn prod
Then point your browser to localhost:8081 (opens new window).
# Linting the code
The KDK relies on JavaScript standard style (opens new window).
To lint the code:
$yarn lint
# Debugging
Use Chrome DevTools (opens new window), look at this tutorial video (opens new window). Usually you simply have to open chrome://inspect
in the Chrome URL.
If you want to launch a specific test use: yarn mocha -- --grep "My test"
.
If you want to pause the debugger when running the tests this should do it: yarn mocha -- --inspect-brk
.
If you want to debug replicas you can use the following environment variables to launch two instances of your apps:
- PORT / HTTPS_PORT: API server port for HTTP and HTTPS modes
- CLIENT_PORT / HTTPS_CLIENT_PORT: frontend server port for HTTP and HTTPS modes
For the backend run one instance with $ yarn dev
and the other one with $ yarn dev:replica
(this will use another port for the Node.js debugger on the second instance and avoid conflict).
Look at this tutorial (opens new window) will you need to debug the app in Safari from a Windows developmen environment.
# Cordova wrapper
Quasar guide (opens new window) might help.
# Running for development
Run your web app as usual first, then build and run the mobile app in debug mode (from project folder):
// Android
$ yarn cordova:dev:android
// iOS
$ yarn cordova:dev:ios
If no device is connected this should launch the emulator, otherwise this should use your device.
TIP
Check that the adb
daemon (opens new window) is running and that you authorized USB debug on your device. Use adb devices
to check if your device is here, if you see it in unauthorised
state uncheck/check again the USB debug option on your device.
Information about the Android Emulator Networking (opens new window) might be useful.
When running the app through Cordova the domain
entry of the client-side config file is used to know how to contact the remote API service:
- use http://10.0.2.2:8081 in the emulator which is an alias to host loopback interface
- use eg http://192.168.1.16:8081 in your device which is the IP affected by your router to your localhost (use
ipconfig /all
under Windows orifconfig
under Linux to get it) - use port forwarding (opens new window)
# Building for production
Build the app in release mode (from project folder):
// Android
$ yarn cordova:build:android
// iOS
$ yarn cordova:build:ios
# Debug
Use Chrome DevTools (opens new window) for the WebView. If you want to also get native errors without running Android Studio use logcat (opens new window).
If you'd like to debug similarly your iOS Webview you can use the remotedebug-ios-webkit-adapter (opens new window) under Windows.
# Icons & Splashscreens
It does exist a couple of solutions to generate it for your app:
- splashicon-generator (opens new window)
- Cordova-gen-icon (opens new window)
- Ionic CLI (opens new window)
- Cordova-icon (opens new window)
You will find the example model icon/splash in Cordova/model so that running splashicon-generator (opens new window) in the Cordova directory should work. Under windows take care to this issue (opens new window).
# Plugins
We rely on a bunch of Cordova plugins so it might be useful to refer to their specific issues:
- Cordova-plugin-device (opens new window)
- phonegap-plugin-push (opens new window)
- Cordova-plugin-geolocation (opens new window)
- Cordova-plugin-crosswalk-webview (opens new window)
WARNING
The Crosswalk project seems to be discontinued (opens new window), as a consequence there are some issues with recent Cordova versions like this (opens new window). We will probably drop it soon.
# Modules/Plugins
Kalisio modules/plugins are Feathers modules (opens new window), so you will find most of the required information in the linked Feathers documentation. Typically for development you will do the following for each required plugins so that the module is re-compiled on each file change:
cd kdk
yarn install
yarn watch
# Linting the code
The KDK relies on JavaScript standard style (opens new window).
To lint the code:
$yarn lint
You can also lint each of the submodules independently using the following commands:
$yarn lint:core # lint the core part
$yarn lint:map # lint the map part
:::