Developing and deploying a KEKO application with Vue JS

Tutorial version 1.1, 16.12.2020

Overview

This tutorial presents how to create a Vue project, adding new libraries to it, creating an API Client and using it. The tutorial includes also creating a new application in the KEKO platform and deploying the built Vue project to it. Access is needed to create an application to the KEKO platform, read more here. Watch the video below to learn more about Vue.js.

Requirements

Vue CLI requires Node.js version 8.9 or above (v10+ recommended).

Commands

Vue create <Project Name>Create a new project, replace the <Project Name> with your application name.
npm install <Package Name>To add new libraries, replace <Package Name> with the package you want to install.
npm run serveStart the development server.
npm run buildStart building the Vue application.

Getting Started

Node.js Installation

If you don’t already have Node.js installed, you can install it here. Follow the installer with the default/recommended settings within the installer.

Installing Vue CLI

All you need to do is run the following command in a command prompt:

npm install -g @vue/cli

The string fetches the @vue/cli package from the node software library (npm) and install it globally on your computer (hence the “-g” in the command).

Creating a new project

Replace <Project Name> with your app’s name and run the following command:

vue create <Project Name>

You will be prompted to select a preset. In this case, there’s no need to touch them, so it is recommended to use the default presets.

Adding new libraries

To add new libraries to the project, locate a project in the terminal, replace <Package Name> with the needed package and install to your project in the following command and run it:

npm install <Package Name>

There’s no need to include “-g” (global installation) in the command because libraries are only needed to install for the current project.

we only want to install libraries for the current project. All of the open-source packages can be browsed at npmjs.com.

API Service

HTTP Client

We’ll be setting up the http client using a library called ”axios”. Axios is a promise based http client, that allows us to easily send XMLHttpRequests from the browser to our server.

Start by installing the axios library using the command provided in Getting Started.

Now, the project file can be created anywhere inside the src folder. We’ll be setting up the client to “src/services/api.js”. Then replace <API KEY> with an API key in the following code and paste it in the file.

import axios from 'axios'

const API = axios.create({
    baseURL: 'https://keko.whereos.com/api/',
    timeout: 5000,
    headers: {
        'content-type': 'application/json',
        'Authorization': `Bearer <API KEY>`
    }
})

export default API

The code creates a reusable http client with preconfigured settings, so that for example the authorization key is not needed to configure every time when calling the API.

Using the API

Now that we’ve created the http client, all we need to do is import it at the beginning of the components script in the following way:

import API from '@/services/api' 

Now you can call it in your components, just determine the endpoint for example, getting the buildings:

API.get('/bim/ids') 
.then(res => {
    //Do something with your data...
    console.log(res.data)
})

Static assets

Where to place static assets

Locate the project’s root and look for the folder named public. This is the static assets folder and all static assets will be placed here, including images, videos, icons, and so forth.

Using static assets

Once you’ve added a static file to the folder, let’s say you want to place an image to your app. You’d simply just call it like it’s being loaded from the same folder as the HTML file. So for example, let’s say we create a folder in public called “images”, and place an image called “example.png” inside that folder. You render the image simply like this:

<img :src="images/example.png" />

Deployment

Create an Application in KEKO

In the KEKO platform system navigate to the dashboard and from there to “Manage Apps”.

From there you’re going to press the “Create New Application”. From this page application name and description will be entered, there’s no need to touch the application settings in this case. Press create when you’ve filled the application details and you will be navigated back to the application listing, where all your applications are listed.

In this tutorial, the application is names as ‘example’ and the Public setting is se to “No”. If the application is set to be public it won’t require logging in and the application will be open for anyone with the link.

Create a UI View in KEKO

Once you’ve created an application in the KEKO platform, it’s possible to create UI Views. Now from the top left, select your application (in this tutorial “example”) and navigate to “UI Builder” from the Dashboard.

Click “New UI View”, fill in the desired name, description of the UI view, and hit “Save”. You’ll be navigated back to the UI Views list and where it is possible to set the Public status which works with the same principle as the status of the application.

Configuring the build

For static assets to load correctly from the KEKO application, you need to set the path to the application to publicPath in your vue.config.js. If the Vue project creation doesn’t automatically create the file, it must be created in the project’s root folder. 

Now for example, if you are deploying to a subdirectory named my-project, you would configure the publicPath to be /my-project/. However, in our case we want to use /app/, because the UI will be served under /app/.

// vue.config.js file to be place in the root of your repository
module.exports = {  publicPath: process.env.NODE_ENV === 'production'    ? '/app/'    : '/'}

It is required to load static assets properly from their correct path. By default, the program tries to load static assets from the domain root (e.g example.com/ instead of example.com/my-project/)

Building the project

Simply locate the project location in a terminal and run the following command:

npm run build

The string will build the files into a folder called “dist” in the project root, unless otherwise configured in the vue.config.js .

Deploying to KEKO

Once the application is built, locate the dist folder in the project’s root and open it. Pack everything inside in a zip file and rename the file as wanted, in this example it is renamed as “KEKOexample.zip”.

Now you’re going to want to locate the application id, as well as the UI id from the listing pages. The ID’s will be shown in the first column. Application id is something like ”3efad8cc-c3c4-4aa9-b02f-38685e29a90b” and UI id “97”.

Application and UI ids can be found from “UI Builder” and “Manage Applications” views.

Now to deploy the application, you’ll want to execute the following curl command where the zipped dist files are along with the application and UI id. Replace <API KEY> with the provided API key, <App ID> With the application’s id, <UI ID> with the UI’s id, and “KEKOexample.zip” file’s name as it is renamed.

curl -X POST -v -H "Content-Type: application/json" -H "Authorization: Bearer <API KEY>" --data-binary @./KEKOexample.zip "https://keko.whereos.com/uiviews/upload?applicationid=<App ID>&id=<UI ID>"

Feedback, problems, or unclarities? Give us feedback via KEKO Slack