Node-RED Dashboards
  • Node-RED UI and Dashboard Techniques
  • Setup
    • Installing Dashboards into Node-RED Cloud Instance
  • Workshop
    • Basics
    • Basic Web Page
    • Basic Dashboard Example
    • CPU Dashboards Example
    • Intro to Cloudant Data Base Example
    • Historical Data Dashboard Example
    • Forms Example
    • Space Station Example
    • Tweet Dashboard Example
    • Visual Recognition Dashboard Example
  • More Node-RED resources
Powered by GitBook
On this page
  • How to build this flow
  • Step 1 : Drag Http Input Node
  • Step 2 : Drag a template node and connect it to a get http input node
  • Step 3 . Connect the Template node to the http output node and deploy
  • Import this flow from here

Was this helpful?

  1. Workshop

Basic Web Page

This flow will show you how to build a basic Web Page using the http endpoint nodes

PreviousBasicsNextBasic Dashboard Example

Last updated 5 years ago

Was this helpful?

To create a UI with out the use of dashboards, you can use http endpoint nodes. In this example we will walk through a very basic example on how to build a flow using http endpoint

How to build this flow

Step 1 : Drag Http Input Node

Drag http input node from the input pallet and add a get endpoint url path . This will be the endpoint that you can go to to reach your webpage

Step 2 : Drag a template node and connect it to a get http input node

Drag a template node and add some basic HTML to see html on web page in the template properites 

<!DOCTYPE html>
<html>
<head>
	<title>Hello</title>

	<h1>Hello World</h1>
</head>
<body>

<p> This is a demo on how to create webpages and dashboards </p>
</body>
</html>

Step 3 . Connect the Template node to the http output node and deploy

Congrats! You can send your application’s URL to your friends and family and say you created a webpage . Pretty simple, huh? You can create a pretty dynamic web page by adding javascript and css to make your web page more interacterive !

In the next section I will show you how to create UIs without any html, css or JS. Just pure node-RED pallet Nodes!

Import this flow from here 

[{"id":"790250a5.c8101","type":"tab","label":"Basic Web Page","disabled":false,"info":""},{"id":"473c5d1e.3f773c","type":"http in","z":"790250a5.c8101","name":"","url":"/helloworld","method":"get","upload":false,"swaggerDoc":"","x":140,"y":280,"wires":[["57d73f0b.fd0e78"]]},{"id":"57d73f0b.fd0e78","type":"template","z":"790250a5.c8101","name":"","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>\n\t<title>Hello</title>\n\n\t<h1>Hello World</h1>\n</head>\n<body>\n\n<p> This is a demo on how to create webpages and dashboards </p>\n</body>\n</html>","output":"str","x":320,"y":280,"wires":[["44786f9d.5edfb8"]]},{"id":"44786f9d.5edfb8","type":"http response","z":"790250a5.c8101","name":"","statusCode":"","headers":{},"x":530,"y":280,"wires":[]}]

your flow should look like this and once you deploy you should be able to access your web page by going going to your application’s URL and appending with your endpoint ( in my case : )

https://pmistrynoderedtest.mybluemix.net/helloworld