I am new for node-red and node also.
I have JS library which was used for jQuery project within GUI project.
Now I want to build server side application using node-red. So for example I will have API like Login/Logout which will be called as HTTP methods.
So I understand that I need to use HTTP In node to listen for POST.
The questions:
How to include my existing JS files as I did it in html:
<script type="text/javascript" src="Includes/jQuery/jquery-2.0.3.js">/script>
<script type="text/javascript" src="Includes/jQuery/jquery.xml2json.js"></script>
<script type="text/javascript" src="Includes/jQuery/json2.js"></script>
<script type="text/javascript" src="Includes/jQuery/json2xml.js"> </script>
<script type="text/javascript" src="helpers.js"></script>
<script type="text/javascript" src="Config.js"></script>
How to call function which are in above js libraries and create global object which will be available from Login Method till Logout method?
for example in HTML, I did using global variables like below:
<script type="text/javascript">
var agent_ = null;
agent_ = new Agent(new AgentEventsHandler() new Logger());
1) To make static files available to Node-RED web pages, you can simply configure a static folder.
If you look in your settings.js file (normally found in ~/.node-red), you will see a commented out property called httpStatic, set this to a suitable folder, e.g.:
httpStatic: path.join('', 'public'),
which would use ~/.node-red/public on a standard installation.
Your URL's would all be in the form: /images/myimage.png etc.
2) To call a function in one of the libraries, you need to create a suitable page. Assuming you are using http-in/out, you would use the template node to create your page. Slightly trickier if you want to use the Dashboard. But not by much, in that case, you will use the Dashboard Template node.
If you want to build more complex front-end apps, you might also want to look at node-red-contrib-uibuilder. This does the heavy lifting of creating folders and adding web resources along with managing the in/out messages between the back-end and the front-end.
Related
I have an Angular 7 CLI app which is served by ASP.NET MVC.
In Index.cshtml file I have these lines:
<script type="text/javascript" src="~/app/runtime.js"></script>
<script type="text/javascript" src="~/app/polyfills.js"></script>
<script type="text/javascript" src="~/app/scripts.js"></script>
<script type="text/javascript" src="~/app/vendor.js"></script>
<script type="text/javascript" src="~/app/main.js"></script>
Everything works fine.
However sometimes during development these files are not generated due to compilation errors etc.
I'm wondering is there a way to write a custom manual loader that will try to fetch these files and if any of these are not found will pop up a nice message to the developer.
Basically a really simple pre-loader to the application.
Any input is greatly appreciated.
In my case, what I do when it comes to altering the index.html is having a controller, which I call SpaController with an Index (default) action. Then, I load the index.html file (which is really small) and patch it with all the changes I want to apply. After being patched and downloaded on the browser, the rest of the communication is done through API REST, so it's just a small patch.
In your case, I would use that action of that controller I mentioned above and check if all the tag scripts are included. If not, you have flexibility to alter index.html and do what you want, like showing an error, or even stop the application.
What is the best practice for versioning javascript files (add version number as query string for each js file in my index.html page)
Please note I am using ASP.NET Web APIs and angularjs.
Is it possible to do that through msbuild as am using it? what is the task or command for that?
I tried this in javascript but it's not working
<script src="app/controllers/app.js?{{version}}"></script>
And this
<script type="text/javascript">
document.write('<script type="text/javascript" src="app/controllers/app.js' + {{version}} +'"></script>');
</script>
I can't use ASP.Net bundling or grunt, I need different solutions.
Hopefully, {{version}} should be work if you have a scope reference to it in the index controller of the page.
Else, you could simply try something like this:
<script src="app/controllers/app.js?v=2"></script>
In my experience using {{version}} might not work, As angular controllers and scope will not be in action before all your tags get loaded. As suggested by Dev-One, you can hardcode a number with your files.
Don't forget to change (increment) this number each time you deploy a new assembly.
I have notice that meteor is creating and loading every template javascript file. Is it possible to selectively load javascript of each template? Because my app generate template file for each of my user. So if this is the case every user's template javascript is loaded to the page. That would not be ideal.
index.html
<script type="text/javascript" src="/client/views/themes/jnr8tWHJ6JTARPpYa/plate_jnr8tWHJ6JTARPpYa_cart.jade.js?4e6fe10676dcbfd5eec51f802ab604bf7afefdfc"></script>
<script type="text/javascript" src="/client/views/themes/jnr8tWHJ6JTARPpYa/plate_jnr8tWHJ6JTARPpYa_footer.jade.js?c904832f29a144cc6a3c53b8fc4159088d427ce9"></script>
<script type="text/javascript" src="/client/views/themes/jnr8tWHJ6JTARPpYa/plate_jnr8tWHJ6JTARPpYa_header.jade.js?02a4f5e9a4a697194e32a16bee9209fa9a63422a"></script>
<script type="text/javascript" src="/client/views/themes/jnr8tWHJ6JTARPpYa/plate_jnr8tWHJ6JTARPpYa_home.jade.js?91d90f326d7da8db94396648b81f88c739691754"></script>
<script type="text/javascript" src="/client/views/themes/jnr8tWHJ6JTARPpYa/plate_jnr8tWHJ6JTARPpYa_product.jade.js?3eed90e15d544fb8e4d5418c641a51ce94c048b2"></script>
<script type="text/javascript" src="/client/views/themes/jnr8tWHJ6JTARPpYa/plate_jnr8tWHJ6JTARPpYa_search.jade.js?08b0b0b4e02599e9ceaac00b94515a1ee7638036"></script>
It's not possible, yet, but is on the roadmap: Incremental loading. According to that card:
Right now, on initial pageload, you download all of the JavaScript, templates, and css in the app.
If you are generating a unique file in your filesystem for every user that uses your app, you might want to reconsider how you are going about structuring your app. Do you really need a new template for every user, or can you get it done with one template and have it update according to which user is currently displayed/logged in?
The short answer is, you shouldn't.
This answer explains an elegant approach of selective loading and also explains why you shouldn't.
Consider the fact that after the initial page load (of maybe 2MB - 5MB for a medium size app) the browser caches everything and all that comes through the wire is pure data.
I have the following file organization:
Project > SubFolder1> SubFolder2> Subfolder3> Test.aspx
and I am trying to include Jquery library from
Project> Scripts
in test page I did both:
<script src="~/Scripts/jquery-1.9.1.js"></script>
and
<script src="../../../Scripts/jquery-1.9.1.js"></script>
but it gives me that the resource cannot be found and the URI in source view is:
localhost:44388/Project/SubFolder1/SubFolder2/SubFolder3/~/Scripts/jquery-1.9.1.js
How can I include the library correctly?
Try this (without tilde):
<script src="/Scripts/jquery-1.9.1.js"></script>
Or if you are in an ASP.NET MVC context:
<script src="#Url.Content("~/Scripts/jquery-1.9.1.js")"></script>
I would suggest keeping all the javascript files in a seperate folder in the ROOT folder and name it 'js'.
For ex if your root folder is PROJECTS, then make a new folder 'js' and paste all you javascript and jquery files in this folder then you can reference this files in this manner
<script src="js/jquery-1.9.1.js"></script>
I have to include it like this
<script src="/Project Name/Scripts/jquery-1.9.1.js"></script>
You could use a CDN for these kind of universally known, general purpose libraries.
A Content Delivery network gives you the advantage of faster load time, because of the clients will be served by the nearest/fastest server (less network latency), and of course, if the client already visited some other website which also made use of jQuery over the CDN, there's a big chance the file is already in the browsers cache, so no download of the file is actually needed.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
See
http://jquery.com/download/
I am interested in using the jQuery tablesorter but somehow am unable to.
I have followed the instructions and have placed jquery.js and the tablesorter.js in the same folder as my templates (the folder where the html file is). Unfortunately, when trying to access the .js files, it keeps hitting a 404, which I'm assuming means that the files are not on the correct path.
Any ideas for this fix?
Does django have a special place to place these js files? (not in the templates folder?)
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type ="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
The myTable is the same exact table as the one in the examples
Usually jquery, js, css, images and most of other static contents are handled as static files and not as django templates. Read managing static files docs.
For jQuery, you can use Google API :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And for Django, Did you configure a path for your scripts/médias etc... ? (in settings.py maybe ?)
To add to what others have written, if you want to make JQuery available throughout your site/app and you don't like external dependencies such as Google you can do the following:
Download the latest "compressed, production" JQuery at https://jquery.com/download/ - for example, on the command line in your static directory (might be <projectname>/static): wget https://code.jquery.com/jquery-2.1.3.min.js
Add a reference to load JQuery in your site's "base" template file (might be <projectname>/<appname>/templates/base.html) - for example: Add <script src="{% static 'jquery-2.1.3.min.js' %}"></script> in the <head> section
Test the JQuery installation by adding something like the following to one of your templates:
<script type="text/javascript">
$(document).ready(
function(){
$("#jqtest").html("JQuery installed successfully!");
}
);
</script>
<p id="jqtest"></p>
If necessary/usual after making template updates, restart your Django server, then load a page which uses the template with the test code