Skip to content

Getting Started

Overview

The primary component of Leverege Build is Molten. Molten is a React-based plugin framework for rapid UI development. Simply write and register a plugin and Molten will make it available throughout your application exactly where you need it--without requiring changes to existing code.

At its core, Molten is a plugin registry with update and access mechanisms. It also includes an extensive suite of pre-built plugins that solve common data patterns and visualizations. Molten's default plugins are designed to make it easy to build powerful IoT applications using the Leverege Stack, but Molten can be used on its own to make your codebase more modular, dynamic, and flexible.

Molten gives you the ability register new plugins--code to be accessed elsewhere in the app--and to add new plugin points that call your custom code. This means you have maximum control over the data and displays driving your app. Add a button that appears on select toolbars. Call a function that conditionally colors icons based on external data. Query an API and render items on a table and a map. You can use Molten to make small changes to an existing app, or as a starting point for a totally custom product.

Tip

To learn more about Molten's key concepts before jumping in, see the Concepts section for an overview of plugins, models, and attributes.

Using Molten with Leverege's IoT Stack

Leverege's IoT Stack provides a powerful, flexible system for working with internet connected devices, and the businesses built around them. Molten's default settings and plugins make working with your Leverege project simple.

It handles user authentication and dynamically creates routes and views based on your Imagine project configuration. Molten uses Leverege's Builder tool for advanced themeing allowing you to dial in the look and feel of your app. You can learn more about configuring your Imagine project in the tutorials on the Leverege User Configuration.

To get started:

  • Install Molten: npm i @leverege/molten
  • Molten uses Mapbox for geographic utilities (map displays, geocoding). You will need to add a Mapbox API key to your .env
  MAPBOX_APIKEY=your-api-key-here
  • Initialize Molten in your startup script

index.js

import Molten from '@leverege/molten'
import Theme from './Theme' // path to your exported theme

function start() {
  const theme = {
    theme : Theme,
    appearanceProjectId : '<your-Builder-appearance-id>',
    useActiveTheme : true // if true, Molten will pull theme data from Builder in real time, immediately reflecting design change. Set to false for production or to improve performance.
  }

  const api = {
    host : 'https://example-api.leverege.com', // your Leverege API host
    systemId : '<your-system-id>', // system in your Leverege Project
    projectId : '<your-project-id>', // your Leverege Project ID
    storeToken : true
  }

  const config = { theme, api }

  Molten.init( config )

  Molten.create()
}

window.Application = { start }
  • Configure your html to start the application

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Leverege Project With Molten</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>

<body>
  <div id="root" style="z-index:0">
    <script src="/index.js"></script>
    <script> Application.start( ) </script>
  </div>
</body>
</html>
  • Start your application: npm start

Using Molten without Leverege's IoT Stack

You do not need to use Leverege's IoT Stack to benefit from using Molten. Its plugin framework can make any codebase simpler and more extensible.

Because the default plugins are designed for working with the Leverege Stack, we just need to take some extra steps to exclude those plugins.

  • Install Molten: npm i @leverege/molten
  • Initialize Molten in your startup script
import Molten from '@leverege/molten'
import Theme from './Theme' // path to your exported theme
import MyCustomScreen from './MyCustomScreen' // Path to the component you want to display on load

function start() {
  // Molten renders the authScreenClass component on startup. By default, it's a login to a Leverege project, but you can replace it with whatever want in your config.
  const authScreenClass = MyCustomScreen

  // The excludes array in your config lists all the plugin IDs of any registered plugins (including default plugins) you want to exclude. Here we are taking out plugins related to authenticating to Leverege's API and theme engine.
  const excludes = [
    'molten.ApiInit',
    'molten.ThemeInit',
    'molten.ApiLogin',
    'molten.ApiUserSettings',
    'molten.AuthInit',
  ]

  const config = {
    molten : { authScreenClass },
    plugins : { excludes }
  }

  Molten.init( config )

  Molten.create()
}

window.Application = { start }
  • Start the web server: npm start

These steps will get a Molten enabled system running displaying only your custom code. To take advantage of Molten's plugin framework, you will need to add plugin points (and probably some plugins) to your code.

See the plugins concepts page for a high level overview of plugins.