Ioto has a high performance embedded web server for local device management that can be used as a dedicated embedded web server with or without cloud management.
This post is the eighth of a series on the Ioto embedded web server component and it discusses request routing in Ioto.
Other posts in the series are:
Developing a fast and compelling device UI can take much, much longer than you think. Most companies expend years of developer time creating their device UIs.
Kickstart for Ioto is a sample device management application that can dramatically shorten this development time. You can use it as a starting point for your local device management UI.
Kickstart employs best practices for dynamic, responsive device management applications. Kickstart uses proven designs to lower development risk. It includes most of the required elements for a secure web application, so you can eliminate months off your development schedule.
Best of all, Kickstart is free with Ioto.
Kickstart is a sample “router” device management application that you can use to evaluate Ioto or customize and extend to create your own device management app.
It is implemented using VueJS and follows the single-page design pattern. Kickstart provides a sample embedding of Ioto and a browser app UI that you can test, customize and extend to manage your device.
The Kickstart Ioto device agent has a small memory footprint even under heavy load (~1.5MB including TLS, database and entire application).
Kickstart and Ioto use best security practices:
The Kickstart source release includes the Ioto device agent and the Kickstart UI so you can evaluate without requiring a separate Ioto download.
The Kickstart UI application runs in your browser and communicates with a target device running the Ioto device agent. In production, the initial Kickstart render is served by the Ioto agent. Once loaded, Kickstart will render UI pages internally and only request pure data from the device.
Note: this is a demonstration application and not production code. It is intended to demonstrate how to use Ioto to build a device management application with VueJS.
To get started, first download the Kickstart app from the Embedthis Builder:
Goto the Builder site and create a product definition using the Ioto agent. Then select Download from the product list and download the Kickstart Application.
To build from source, some build requirements must first be installed. These include: NodeJs, NPM, VueJs, Vite, Vuetify and the Typescript compiler. You will need to install Node 16.X or later manually first.
To install Node with NPM, go to:
and download the LTS distribution and install.
To download the other tools and configure Kickstart, type:
This will download and install VueJS, Vuetify Vite, TypeScript and other dependencies. Of these, most are build time tools and are not used during production at runtime.
Kickstart is also provided as a docker container that is prebuilt for you to evaluate without having to build Kickstart.
To use via Docker, download the Kickstart docker image from the Embedthis Builder download list:
Load the Kickstart container into docker via:
This command performs a “docker load < kickstart-docker.tgz”.
Then, run the container via:
This performs a “docker run -p 80:80 -p 443:443 –name kickstart kickstart”. The docker container exposes the Kickstart app on port 80 and 443.
You can stop the container by running the following command from another terminal window:
The Kickstart manager application has three core components:
The Ioto embedded device agent source with Kickstart extensions under the ./src directory.
The Kickstart browser device management app under the ./ui directory. This is a VueJS browser app for direct local device management over HTTP.
Optional configuration for the cloud-based Ioto Device manager under the ./manager directory. This provides a skin and theme to customize the cloud-based Ioto Device Manager.
You can select an operational mode that will customize the services and capabilities provided by Kickstart.
The mode is determined by the config/ioto.json5 “mode” property. You can modify this by editing the ioto.json5 file.
The following modes are supplied, and you can easily add your own mode to the config/ioto.json5 file.
The local mode configures Ioto to run an embedded web server for local device management and cloud-based functions are not enabled.
To build Kickstart:
You can change the build and execution profile by editing config/ioto.json5. If you change the profile or mode properties, you should rebuild via:
make clean make build
Three build profiles are supported:
The prod profile will build Ioto optimized without debug symbols. Database state and logs will be stored in the appropriate O/S locations.
The vite profile can be used during development to dynamically recompile and reload UI pages. This permits fast UI development using hot-reload of UI changes. It is the preferred mode when developing the local embedded device management app. When building with the vite profile, the UI will be built with debug symbols and source maps. The Kickstart agent will be built with debug symbols for debugging. In this mode, the browser should navigate to http://localhost:7070 for the UI.
When you are ready to deploy to production, you can set the config/ioto.json5 “profile” property to “prod”. This will build Kickstart optimized for release and the device management UI will be served by the Kickstart Ioto device agent. The UI will be built compressed, without debug symbols and Vite will only be used to build the UI.
Before running, prepare and reset the local Ioto database:
To run, invoke:
This will run Kickstart in the top directory using the selected profile. If using the “dev” profile, it will also run Vite to serve the UI.
If you selected the “dev” profile (the UI served by Kickstart) navigate your browser to:
Note: http not https.
If you selected the “prod” profile, (the UI being served by Kickstart), navigate to:
If you selected the “vite” profile (the UI served by Vite) navigate your browser to:
Note: http not https.
When you login to Kickstart, you will be using user accounts that are defined in the local database via the “make data” command earlier. This uses sample user definitions from the config/seed.json5 data file.
User Password ---- -------- admin demo guest demo super demo
The super user is for the developer of the app and it has some extra maintenance screens.
Here are the key directories of the Kickstart distribution.
|config||Ioto configuration files for device registration, testing and web server|
|manager||Cloud-based manager skins and themes for Ioto Device Manager|
|profiles||Schemas and display configurations for various build profiles|
|projects||Generated Makefiles and IDE projects|
|scripts||Device management scripts including OTA script|
|site||Web documents for embedded web server|
|src||Kickstart and Ioto C source code|
|state||Ioto runtime state files|
|test||Test files and scripts|
|ui||VueJS local device app|
Here are some of the key files of the Kickstart distribution.
|config/ioto.json5||Primary Ioto configuration file|
|config/device.json5||Device registration file|
|config/local.json5||Local configuration overrides|
|config/web.json5||Embedded web server configuration|
|local/schema.json5||Database schema for local operation|
|cloud/schema.json5||Database schema for cloud-based management|
|cloud/display.json||Ioto DeviceManager skin and theme for cloud-based mangement|
To learn more about EmbedThis Ioto, please read: