Serving web content

You can use the HTTP request and response node to host web content through Node-RED. You can use the template node to create a static HTML page that gets served to every request to the address you set your request node to.

The Content of the HTML-page template in this example will be served on https://{Flow App address}.your-qibb-domain.com/httpRequest/.

You can serve other text-based files through a template node like JSON or JavaScript

The static directory in the Flow App hosts several libraries for use on web pages. Version 1.4.3 and later Versions support some of the most common CSS and js libraries.

For example: jQuery can be accessed on https://{Flow App address}.your-qibb-domain.com/jquery/jquery-x.x.x/js/jquery-x.x.x.min.js in Flow App version 1.4.3

Version 1.4.3 also includes the UI Builder package which allows easier setup and creation of web pages in the Flow App.

In addition to external libraries, the static directory also hosts a qibb directory with styling files to create web pages in the style of the qibb portal. The endpoints /storybook and /jsdocs from the Flow App provide documentation pages and examples of how to use the qibb styling.

The qibb styling was first introduced with Flow App version 1.1.0. The storybook and jsdocs directories got first added with version 1.1.6.

Referencing static files

Static files in the flow app can be referenced with a path relative to the created file. The position of the file can vary whether a default node is used or an external node like UI Builder. Template or function nodes in the Flow App store their data directly in the project flows.json file. UI Builder stores individual files in a dedicated directory.

The following example shows how to reference files for an HTML script in the static directory in a default template node and a UI Builder file.

The example files for Bootstrap are available at /bootstrap/bootstrap-x.x.x/css/bootstrap.css and /bootstrap/bootstrap-x.x.x/js/bootstrap.js

HTML

<head>
    <!-- template node -->
    <link rel="stylesheet" href="bootstrap/bootstrap-x.x.x/css/bootstrap.css">
    <script src="bootstrap/bootstrap-x.x.x/js/bootstrap.js"></script>

    <!-- UI Builder file-->
    <link rel="stylesheet" href="../bootstrap/bootstrap-x.x.x/css/bootstrap.css">
    <script src="../bootstrap/bootstrap-x.x.x/js/bootstrap.js"></script>
</head>