frontend

Kauri Energy Monitor Frontend

Kauri's frontend is a single page web-app based in Angular 1.x.

See the main README for instructions on setting up your development environment.

LoopBack SDK

The app/scripts/services/loopback.js file contains wrapper code for the API. This is generated by the Loopback AngularJS SDK which is used to update this file when new API routes are added.

Variables

The frontend is configured with a set of variables as defined by the environment. The following variables can be set:

baseUrl

The baseUrl is prepended to all API calls. This is used to define how to connect to the API.

Environments

Frontend variables change based on the environment. The following environments exist:

local

The local environment is used to run a copy of the frontend on your computer, intended for development.

Defaults:

• baseUrl: http://localhost:3000/api

production

The local environment is used to run a copy of the frontend on a production server.

Defaults:

• baseUrl: /api

Overriding Environment Variables

You can override an environment's default variable by defining a environments.json file.

The top level keys of this file describe the environment. The top level values are objects where the key is the variable and the value is the variable's new value.

For example, to override baseUrl in production:

{
  "production" : {
    "baseUrl" : "https://api.kauri.example.com"
  }
}

Grunt Commands

Grunt is used to run tasks on the frontend such as hosting a development server or building the frontend.

Running

The frontend is run with connect-reload to automatically reload the page when files are updated.

grunt serve

An alias for grunt serveLocal.

grunt serveLocal

Runs a local server with the local environment.

grunt serveProduction

Runs a local server with the production environment.

Building

When the frontend is built it is a set of minified and versioned static files.

grunt build

An alias for grunt buildProduction.

grunt buildLocal

Build the frontend to the dist directory with the local environment.

grunt buildProduction

Build the frontend to the dist directory with the production environment.

Hosting externally with NGINX

By default the frontend is hosted by the Kauri server, but you can run the frontend externally.

If doing so with NGINX, you will need the following configuration to ensure all 404 errors render the index.html page. This ensures that virtual routes within the frontend like /login are still supported when the page is reloaded.

try_files $uri /index.html;