Build a Node-RED application that can reuse CSS and browser-side JavaScript
You will now be moving onto a new advanced topic: writing HTML web pages that use Git repositories that allow you to reuse HTML, CSS, and browser-side JavaScript across Node-RED applications.
-
- Open the following web page: https://github.com/ibm-early-programs/watson-tv.
This is a web page (HTML,CSS, and JavaScript) repository (repo).
- Click tv.html.
- Open the following web page: https://github.com/ibm-early-programs/watson-tv.
-
- Click Raw and copy the URL in the browser address bar.
- Go to your Node-RED flow editor. Create a new tab and name the new tab something like
Watson TV
.
-
- Drag and drop the following nodes onto the canvas:
- Input http node
- Function http request node
- Function node
- Output http response node
- Drag and drop the following nodes onto the canvas:
-
- Wire the nodes together.
-
- Double-click the input http node. Configure it as a
GET
method on the URL/tele
. Then, click Done.
- Double-click the input http node. Configure it as a
-
- Double-click the http request node. Enter the raw URL for the tv.html that you copied earlier. Set the Return field to a string. Then, click Done.
-
- Double-click the function node and set the content-type in the header to ‘
text/html
‘.
- Double-click the function node and set the content-type in the header to ‘
- Click Done and then deploy your application.
- Open a browser tab on your new page.
You now know how to add intricate HTML, CSS, and JavaScript into your Node-RED web pages.