Skip to content

Ignitial.IO Web applicaiton template (based on VueJS, Vuetify, IIOS ready)

License

Notifications You must be signed in to change notification settings

ignitialio/iio-app-material-template

Repository files navigation

WARNING! WIP: ready for production as bootstrap, but still work in progress

IgnitialIO app

What is this ?

IgnitialIO (or ignitial.io, or IIOS) web application template allows you to use IgnitialIO toolbox for deploying micro-services based web apps.

It provides the capability to build all your app features as a service, which we can summarize as below:

Evertyhing is service

More information on IIOS can be found on in the IIOS Github repository.

Current template is a bootstrap for accessing IIOS thourgh a web app based on VueJS front-end side.

Backend uses connect and connect-rest, as well as socket.io for serving static files, communicate with the front-end and provide additional REST APIs.

Two services must be provided in any case:

  • data service allowing database access. Here we use IIOS base dlake service configured to use MongoDB
  • authentication service that controls access to IIO services based on roles. This is used even if no authentication is required (= anonymous users only). Current template uses auth base service which implements JSONWebToken based authentication.

Creation

An web app based on IIOS can be created as below:

# installs IIO CLI tool
npm install -g @ignitial/iio-cli

# create an app with name myapp (creates folder as well)
iio create app myapp

WARNING: Take care to always have the latest iio-cli version

This bootstraps a folder with a ready to run app that you can modify or incrementally complete with your own features.

You can implement any feature through IIOS services that allow you to inject new UI components.

Use in development

Install dependencies

npm i

Populate database for development

Database and authentication service need a minimum set of info (eg. roles) in order to run web app. Then, you need to populate database before starting your app:

npm run dev:config:populate

Here we use mongodb as primary database (user info is a MongoDB collection), then we populate a MongoDB whose name is the one defined in the configuration.

Configuration uses environment variables to overwrite default values. For the db, you need to update IIOS_DBNAME env variable. We do this in the script that executes populate, scripts/populate_db-mongo.sh in our case, since Mongo is concerned:

export IIOS_DBNAME=ignitialio

RBAC information is populated as well in Redis. Then, we need to define IIOS namespace in order to let script know which one to use in Redis database:

export IIOS_NAMESPACE=ignitialio

Auto-populate

Starting with dlake:3.2.0 an automated populate is done by the dlake service. It creates the minimal roles and access rights as per the template needs, as well as an admin user (password: toto13!).

Configure

We can configure application through two different methods:

  • using JS and environment variables (server/config)
  • using YAML configuration file template and related generated config data using iio-cli

Currently, applicaiton is configured to use YAML configuration by default. See dev_start.sh script to check it:

#!/bin/sh

if command -v iio 2>/dev/null; then
  iio infra dev
  # HERE ------------------------------------------------
  iio config app generate
  # -----------------------------------------------------
  if [ $? -ne 0 ]
  then
    echo "iio version must be >=2.2.1: 'npm i -g @ignitial/iio-cli'"
    exit 1
  fi
else
  echo "iio not installed: 'npm i -g @ignitial/iio-cli'"
  exit 1
fi

Command iio config app generate will generate json configuration in the server/config folder. It uses config/app.yaml for that, while app.yaml references config/i18n.yaml file for i18n translations.
When generated file detected, it is automatically used for providing application configuration.

The same can be done for Kubernetes deployments. That time it is necessary to use a ConfigMap receipe, which is already done in the template.
You just need to update k8s/config/deploy.yaml and k8s/config/app.yaml as per your needs. First one defines Kubernetes related configuration (mainly references used in K8S receipes), while the second one is equivalent to config/app.yaml file, but for K8S deploy.

Run for development

Build dev image

npm run docker:build

In the dev mode, source code from the local directory is used within the image, so you need to install node dependencies before starting:

npm i

Start app and associated services

npm run dev:start

Stop and clean up

npm run dev:stop

Run with minikube

Note

You need minikube installed and configured.

First, you need to create app and dlake images and publish them to minikube docker environment:

npm run docker:build
npm run docker:publish:minikube

Note

This uses ignitial/dlake and ignitial/auth images published on Docker Hub.

iio deploy

And it works:

asciicast

Clean up

iio remove

WARNING: this will erase Redis persistent volume and then you will lose current roles and users. On production deploy, you need to separate PV management from deployment itself.

Note

This will not stop minikube cluster.

Run for production

You need first to push app image to some private registry (currently targets GitLab one, but you can obviously conifigure tour own replacing that registry name).

npm run docker:publish:private

Then you need to update your .kube/config file or to point out any kubeconfig file that targets the right Kubernetes cluster (in this second situation, you need to update accordingly related cluster.kubeConfigPath in k8s/config/deploy.yaml file). Then, same as previously:

iio deploy

Done !