Basic Web Page

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

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

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 )

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":[]}]

PreviousBasics NextBasic Dashboard Example

Last updated 5 years ago

Was this helpful?