UIBuilder and Caddy

I am trying to serve uibuilder pages with Caddy with the added complication that both are in dockers. I have an existing Django website served with NGINX some of which I want to ‘port’ across to UIBuilder. I have switched to Caddy to take advantage of the automatic certs.

I can get uibuilder to work 'locally' in accordance with the documentation and TotallyInformation’s very helpful video (thank you).

I can serve the index.html page via Caddy but none of the references are connected i.e. I’m getting a 404 error “https://mywebsite.co.uk/uibuilder/vendor/socket.io/socket.io.js”

My caddyfile looks like this (where ‘node-red’ is the network address of my node-red docker).

https://mywebsite.co.uk {

rewrite * /ubitest{uri}

reverse_proxy node-red:1880

}

I'm using Node-red v 3.0.2, UIBuilder 6.0.0. Caddy 2.6.2

Thank you
Ian

I thought Julian (@TotallyInformation ) did a write up about a year ago with getting Caddy up and running (and i thought he touched on UIB in there also ??)

Also i note above (which i do not think is your problem but i have been tripped up by more stupid things before) in your rewrite rule - you have ubitest rather than uibtest ?

Just worth checking it is not a simple typo ?

Craig

I'm not using Caddy at the moment but here is a snippet from a previous config:

config.example.com:444, home.example.com:2020 {
	# Block any requests to :2020 unless from home network
	# @internal {
	#       remote_ip 192.168.0.0/16
	#       #remote_ip 10.0.0.0/8
	# }
	#import include/tls.conf
	import include/internalnet.conf
	handle @internal {
		# Block access to Node-RED's Dashboard
		#redir /ui /
		# Or send it to the unproxied (or other correct) location
		#redir /ui http://{host}:1880/ui
		redir /ui http://home.example.com:1880/ui
		#rewrite https://config.example.com:4000* https://home.knightnet.co.uk:4000{uri} 

		# Add the /red prefix to everything (assumes that the Editor has been moved to :1880/red in NR's settings.js)
		rewrite * /red{uri}
		# Now we can proxy everything else
		reverse_proxy http://localhost:1880
	}
	# Othwise get rid of any remaining requests (not from local network)
	respond "Access to this resource is forbidden from external networks." 403
	#redir * http://example.com
}

Thanks Craig, always worth checking (and I have) but not a type.

Ian

Thank you Julian. I changed to the "no framework modern ESM client".... that works with caddy and Firefox but not with Chrome (but I doubt very much if that's a UIBuilder issue).

This is my caddyfile

https://mysite.co.uk {
	redir /ui http://mysite.co.ukt:1880/ui
	rewrite * /ubitest{uri}
	file_server
	reverse_proxy node-red:1880
}

What error do you get in the browser dev tools?

Julian

I've left a post on the caddy git hub page. I'd rather have your input into getting UIBuilder's vue / bootstrap template to work. I see from Where is uibuilder js files? that there is a new place to reference dependancies. Is there somewhere i can find a similar reference for......

    <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css" />
    <script src="../uibuilder/vendor/socket.io/socket.io.js">/* 
    <script src="../uibuilder/vendor/vue/dist/vue.min.js">/* prod version with component compiler */</script>
    <script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.min.js">/* 
    <script src="./uibuilderfe.min.js">/* 

Well the new client library is referenced in the same way as the vendor clients.

For the standard client library - in the head section of index.html:

<script defer src="../uibuilder/uibuilder.iife.min.js"></script>

For the ESM library, you should load it from your own module script:

index.html (in the head again):

<script type="module" async src="./index.js">/* Imports uibuilder + your custom code */</script>

index.js

import '../uibuilder/uibuilder.esm.min.js'

In both cases, you shouldn't load the socket.io client any more since the uibuilder library does that for you. You also no longer need a uibuilder.start() call in your js (except for very rare cases).


For Vue with bootstrap-vue, I recommend making sure you have Vue v2 installed not v3. You probably want to use the iife version of the library rather than esm if you are just getting going unless you are familiar with browser es modules.

If you are loading other libraries with the iife client, it is best to use the following style (this will be in the standard templates in v6.1):

<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Vue v2 + bootstrap-vue template - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - Vue v2 + bootstrap-vue template">
    <link rel="icon" href="./images/node-blue.ico">

    <!-- #region Supporting CSS. -->
    <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css" />
    <link type="text/css" rel="stylesheet" href="./index.css" media="all"><!-- Your own CSS -->
    <!-- #endregion -->

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / - socket.io no longer needed -->
    <script defer src="../uibuilder/vendor/vue/dist/vue.min.js">/* prod version with component compiler */</script>
    <script defer src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.min.js">/* remove 'min.' to use dev version */</script>
    <script defer src="../uibuilder/uibuilder.iife.min.js">/* REQUIRED: remove 'min.' to use dev version */</script>
    <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
    <!-- #endregion -->
    
</head><body>

    <div id="app" class="uib" v-cloak><!-- All UI code needs to be within here for Vue -->
        <b-container id="app_container"><!-- Wraps the bootstrap-vue formatting -->

            <b-img src="./images/node-blue-192x192.png" rounded left v-bind="imgProps" alt="Blue Node-RED" class="mt-1 mr-2"></b-img>
            <h1>uibuilder + Vue v2 + bootstrap-vue for Node-RED</h1>
            <p>
                This is a uibuilder example using <a href="https://vuejs.org/">Vue.js</a> as a front-end library.
                See the
                <a
                    href="https://github.com/TotallyInformation/node-red-contrib-uibuilder">node-red-contrib-uibuilder</a>
                README for details on how to use UIbuilder.
            </p>

            <div id="more"><!-- '#more' is used as a parent for dynamic content in examples --></div>
            
            <b-card>
                <h3 slot="header">Simple input using Vue</h3>
                
                Simplest possible way of getting event information back to Node-RED using a uibuilder helper function.
                The method works with any DOM event. Demonstrated here with a simple button click.
                
                <p class="mt-1 pb-3">
                    <b-button id="myButton1" @click="doEvent" data-something="hello">Send Something To Node-RED</b-button>
                </p>

                <b-form class="border p-3">
                    <p>
                        You can also very simply create a form like this using Vue & bootstrap-vue.
                        The form sends data back to Node-RED.
                        Look at the <code>increment</code> method in <code>index.js</code> to see how easy this is.
                    </p>

                    <p>
                        <b-form-input v-model="inputText" type="text" placeholder="Enter some text to send to Node-RED"></b-form-input><br>
                        <b-form-checkbox v-model="inputChkBox">
                            To tick or not to tick? That is the question
                        </b-form-checkbox><br>
                        <b-button id="btn_increment" pill variant="primary" v-on:click="increment">Increment</b-button>
                            &nbsp;&nbsp;Click Counter: <b>{{counterBtn}}</b>.
                        <p>Click on the button to increment the counter. It sends the data dynamically back to Node-RED as well.</p>
                    </p>
                </b-form>
            </b-card>
            
            <h2>Dynamic Data</h2>
            <div>
                <p>Uses Vue to dynamically update in response to messages from Node-RED.</p>
                <p>
                    Check out the <code>created</code> function in <code>index.js</code> to See
                    how easy it is to update Vue data from Node-RED. Like showing the uibuilder front-end
                    client library version: <code>{{feVersion}}</code>.
                </p>

                <b-card class="mt-3" header="Normal Messages" border-variant="primary" header-bg-variant="primary" header-text-variant="white" align="left" >
                    <p>
                        Messages: Received=<b>{{msgsReceived}}</b>, Sent=<b>{{msgsSent}}</b>
                    </p>
                    <pre v-html="hLastRcvd" class="syntax-highlight"></pre>
                    <pre v-html="hLastSent" class="syntax-highlight"></pre>
                    <p slot="footer" class="mb-0">
                        The received message is from the input to the uibuilder node.
                        The send message will appear out of port #1 of the node.
                    </p>
                </b-card>

            </div>

        </b-container>
    </div>

</body></html>

9 posts were split to a new topic: Uibuilder documentation suggestions and improvements

Thank you Julian, I'm really grateful for that; I knew some of it but you filled in a lot of gaps.

I still need a bit of help (if you have time). The following line in my Caddyfile

rewrite * /ubitest{uri}

allows me to 'land' on index.html i.e. I don't see the 'node-red' interface......This is what I want to happen.... BUT the problem is that the browser then can't 'see' anything in 'vendor' or uibuilder.iife.min.js

Is there a simple way around this ? (I've tried to figure it out myself, but its beyond my paygrade !!!)

Ian

So the vendor URI's - in fact all of the uibuilder user-facing endpoints other than your own code, appear as /uibuilder/.... so I think that you only want to do the rewrite for a subset of incoming requests not everything.

I'm guessing here but possibly something like:

rewrite /uibuilder/* /uibuilder/*
rewrite * /ubitest{uri}

Hmm, not sure that feels right. Perhaps a better alternative would be that if you wanted a uibuilder url of uib to be publicly available, you would use rewrite /uib/* /ubitest{uri}? Then everything else would simply proxy to the internal root address which is likely what you want. If not that, then maybe reverse_proxy /uibuilder/* node-red:1880/uibuilder before the rewrite statement? Or redir /uibuilder node-red:1880/uibuilder? Mess about with trailing /s as well if something doesn't work at first. Some of these redirects and proxies can be a bit arcane.

Sorry, a bit of guesswork on my part. I've not used Caddy for a while.

Thanks Julian..... food for thought, experiment and research. I will post results.

Ian

1 Like

And I will steal with pride any output and add it to the WIKI for the benefit of all (with your permission of course :grin: ).

isn't it as simple as ?

https://mysite.co.uk {
	redir / /ubitest
	reverse_proxy node-red:1880		
}

OK so ubitest is in the address bar but at least https://mysite.co.uk lands on index.html and all modules successfully load

If its worth stealing, please do :slight_smile:

Ian

Not sure - let me know :grin:

Hi all, just to let you know that I've split the conversation about uibuilder documentation to its own thread as we kind of got seriously off-topic for this thread :slight_smile:

Great discussion though, so please do join in over at

Uibuilder documentation suggestions and improvements - General - Node-RED Forum (nodered.org)

Julian, just being picky

Please see the First-timers walkthrough in the documenand the Introduction Video for more help to get started. Also try out the built-in example flows.

documenand think this should be documentation and

1 Like

Well, I have to keep people on their toes. :slight_smile:

Yes....... https://mysite.co.uk lands on index.html and all modules successfully load. so far so good.

2 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.