Kickstart your Connected Device


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 ninth of a series on the Ioto embedded web server component and it discusses request routing in Ioto.

The 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.

As a single-page app, Kickstart has a highly responsive UI with sub-second page transitions. When built, the Kickstart HTML Javascript and stylesheets are minified, compiled and compressed into a single file which provides a one-time load of the app into the user’s browser. Thereafter, Kickstart requests pure data from the device as required to render live device status and metrics.

The Kickstart Ioto device agent has a small memory footprint even under heavy load (~1.5MB including TLS, database and entire application).

Kickstart Features


Kickstart and Ioto use best security practices:

Getting Started with Kickstart

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.

Building from Source

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:

make configure

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.

Docker Image

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:

make docker-load

This command performs a “docker load < kickstart-docker.tgz”.

Then, run the container via:

make docker-run

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:

make docker-stop


The Kickstart manager application has three core components:

  1. The Ioto embedded device agent source with Kickstart extensions under the ./src directory.

  2. The Kickstart browser device management app under the ./ui directory. This is a VueJS browser app for direct local device management over HTTP.

  3. 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.

  1. Local (local)
  2. Cloud (cloud)

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:

make build

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 dev profile will build Ioto with debug symbols and local state directories suitable for debugging. The device API and the UI are served by the Kickstart binary via the built-in Ioto web server. The Vite build tool is used to build the UI via the “make build” command in the ./ui directory. The built javascript, stylesheets and fonts are served from the ui/dist directory. The browser should navigate to http://localhost for the UI.

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:

make reset

To run, invoke:

make run

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.

Login with:

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.

binBuild tools
certsTest certificates
configIoto configuration files for device registration, testing and web server
managerCloud-based manager skins and themes for Ioto Device Manager
paksIncluded packages
profilesSchemas and display configurations for various build profiles
projectsGenerated Makefiles and IDE projects
scriptsDevice management scripts including OTA script
siteWeb documents for embedded web server
srcKickstart and Ioto C source code
stateIoto runtime state files
testTest files and scripts
uiVueJS local device app

Key Files

Here are some of the key files of the Kickstart distribution.

config/ioto.json5Primary Ioto configuration file
config/device.json5Device registration file
config/local.json5Local configuration overrides
config/web.json5Embedded web server configuration
local/schema.json5Database schema for local operation
cloud/schema.json5Database schema for cloud-based management
cloud/display.jsonIoto DeviceManager skin and theme for cloud-based mangement

Want More Now?

To learn more about EmbedThis Ioto, please read:


{{}} said ...


Make a Comment

Thank You!

Messages are moderated.

Your message will be posted shortly.


Your message could not be processed at this time.

Error: {{error}}

Please retry later.