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. Open the following web page:

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

    2. Click tv.html.


      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. Drag and drop the following nodes onto the canvas:
          • Input http node
          • Function http request node
          • Function node
          • Output http response node


        1. Wire the nodes together.


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


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