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: https://github.com/ibm-early-programs/watson-tv.

      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.