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.

1. 1. Open the following web page: https://github.com/ibm-early-programs/watson-tv.

      This is a web page (HTML,CSS, and JavaScript) repository (repo).

   2. Click tv.html.

 

1. 1. Click Raw and copy the URL in the browser address bar.
   2. Go to your Node-RED flow editor. Create a new tab and name the new tab something like Watson TV.

 

1. 1. Drag and drop the following nodes onto the canvas:
      • Input http node
      • Function http request node
      • Function node
      • Output http response node

 

1. 1. Wire the nodes together.

 

1. 1. Double-click the input http node. Configure it as a GET method on the URL /tele. Then, click Done.

 

1. 1. 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.

 

1. 1. Double-click the function node and set the content-type in the header to ‘text/html‘.

 

1. Click Done and then deploy your application.
2. 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.