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 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 ?
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
}
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).
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......
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>
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>
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 !!!)
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.
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.
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
Great discussion though, so please do join in over at
).
