What is the best way to host client side HTML/CSS/JS

[Cory Guynn]

I've built a backend system with Node-RED, but now need to deliver your typical /public static client files. I know you can use templates etc, to deliver an HTML page but it starts getting a little messy as you include script and CSS files. I also realize you can chain the templates by including {{{msg.payload.style}} but is this the best way?

If anybody has an example of a typical front-end deployment using Node-RED it would be really appreciated.

Thanks!

[Nicholas O'Leary]

If you set the 'httpStatic' property in your settings file you can easily serve up static content alongside (but outside of) your flows.

Nick

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
For more options, visit https://groups.google.com/d/optout.

[Cory Guynn]

Thanks Nick, as always.

It is too bad there isn't a way to do this from within the Flow editor. But for now, I have a working solution. 

Does it make sense to try to create a node/config that allows one to manage their static filesystem? 

Cheers,

Cory

[Dave C-J]

well then you will need /want to manage the files within, etc... 

[Cory Guynn]

For the record (and future notes), this is how I build a simple front end with a Flow.

The key to this was using the Set.property and specify the purpose (i.e script/css)

I then place the following in my final HTML template

<style>{{{msg.style}}}</style>
<script>{{{msg.script}}}</script>

Hope this helps somebody else in the future.

-Cory

[Dave C-J]

feel free to also add as an example to flows.nodered.org 

Thanks

[Nathanaël Lécaudé]

Very elegant and clever ! Thanks for sharing !

[Cory Guynn]

Because I appreciate good documentation, I've created a proper example with screenshots.

http://flows.nodered.org/flow/1bffe6808d37bd96cce283939983e758

I wish we could track how many people use this flow and others (to satisfy my ego ;)

Cheers,
Cory

[Paul Reed]

Very nice Cory, appreciate you taking the time to do a helpful guide.

[Nathanaël Lécaudé]

I sent a PR to node-red to hilight CSS in the template node which was accepted, will be even better soon :)

[Cory Guynn]

Cool, the lack of CSS highlighting was bothering me too :)

--

http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---

You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/q4DKaX87Ano/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+u...@googlegroups.com.

[Ty George]

Sweet was looking for something just like this a couple days ago... You rock sir :)

Thanks for the good documentation too :) 

Ty

[JR01]

Wow Cory, have not tried it yet, using dashboard now, but shure something will come up where I will try your approach here, brilliant! It bugged me that without a oriper editor I have to put html, script and style in a template, this cleans it up nicely, and probably drives re use!

[Cory Guynn]

Great feedback! Glad this is helping the Node-RED community! 

I'm going to present this platform and my solutions to many of the Cisco engineers to get more involved!

On Wed, Aug 3, 2016 at 11:07 AM JR01 <je...@familyroux.com> wrote:

Wow Cory, have not tried it yet, using dashboard now, but shure something will come up where I will try your approach here, brilliant! It bugged me that without a oriper editor I have to put html, script and style in a template, this cleans it up nicely, and probably drives re use!

--
http://nodered.org

Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/q4DKaX87Ano/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+u...@googlegroups.com.

To post to this group, send an email to node...@googlegroups.com.