# Basic Web Page

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

![](https://1168127261-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ll8Hv_n0TDEU2wd8dWK%2F-Llm7uEkQBtXJ2Oi6UIc%2F-LlmhrV4vnwQngpZ0yEk%2FScreen%20Shot%202019-08-08%20at%203.31.43%20PM.png?alt=media\&token=7def19f5-6add-46f0-9081-5942194c7897)

## How to build this flow&#x20;

### Step 1 : Drag Http Input Node&#x20;

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 &#x20;

![](https://1168127261-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ll8Hv_n0TDEU2wd8dWK%2F-Llm7uEkQBtXJ2Oi6UIc%2F-LlmmO89DG64yFDjhv30%2FScreen%20Shot%202019-08-08%20at%203.49.20%20PM.png?alt=media\&token=f46fbd12-7232-49de-82ce-426f917993b0)

### Step 2 : Drag a template node and connect it to a get http input node&#x20;

![](https://1168127261-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ll8Hv_n0TDEU2wd8dWK%2F-Llm7uEkQBtXJ2Oi6UIc%2F-LlmmqRjtEXNPDTyRIaJ%2FScreen%20Shot%202019-08-08%20at%203.53.20%20PM.png?alt=media\&token=62a64c04-6681-4701-b91c-a0d98cceaca3)

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

![](https://1168127261-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ll8Hv_n0TDEU2wd8dWK%2F-Llm7uEkQBtXJ2Oi6UIc%2F-Llmn1MSfKcCdqRdVFvI%2FScreen%20Shot%202019-08-08%20at%203.53.06%20PM.png?alt=media\&token=ed1035e6-e5fd-451a-bda4-f4f575b90563)

```
<!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&#x20;

![](https://1168127261-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ll8Hv_n0TDEU2wd8dWK%2F-LlmodBy4yhkdEFCSNtD%2F-Llmou2hfbKyjOHtVoWQ%2FScreen%20Shot%202019-08-08%20at%204.02.35%20PM.png?alt=media\&token=33fafedb-cad0-4cea-8d5d-209494d05183)

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> )&#x20;

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 !&#x20;

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

## Import this flow from here&#x20;

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