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:

• Using the Ioto Embedded Web Server
• Extending Ioto with Custom Code
• Using Ioto to Generate Dynamic Responses
• Streaming Responses
• Request Routing
• User Authentication
• Using the Ioto Database
• Managing JSON data with Ioto
• Using the Kickstart Sample Device Manager

Background

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.

Overview

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

• VueJS device management sample
• Navigation
• User login
• User management
• Dashboard
• Device property edit
• Alert notification
• Event log
• Dynamic tables and graphs
• Paged Data Tables
• Granular access control

Security

Kickstart and Ioto use best security practices:

• Transport Layer Security (TLS/SSL)
• Secure user login
• Password storage with Blowfish hashing and salting
• Granular access control per-page or per URI
• Sandboxed resource limits
• Safe portable runtime to protect against memory leaks and buffer overflows

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.

Download

To get started, first download the Kickstart app from the Embedthis Builder:

https://admin.embedthis.com/

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:

https://nodejs.org/en/

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:

https://admin.embedthis.com/

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

Components

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.

Configuration

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.

Building

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:

• dev
• prod
• vite

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.

Running

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:

http://localhost

Note: http not https.

If you selected the “prod” profile, (the UI being served by Kickstart), navigate to:

https://localhost

If you selected the “vite” profile (the UI served by Vite) navigate your browser to:

http://localhost:7070

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.

Directories

Here are the key directories of the Kickstart distribution.

Key Files

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

Want More Now?

To learn more about EmbedThis Ioto, please read:

• Ioto Web Site
• Ioto Documentation
• Ioto Agent Download
• Builder Documentation
• Embedthis Web Site