I created a main menu (navigation) using Node.js. I used Jade as the template engine under express. The menu is created in pure HTML & CSS.
Node.js is intended to provide the menu via a URL. I want to include this menu into an existing web application and it should be provided by Node.js. I thought about something like the following in my website.html:
<body>
<!-- begin: include main menu -->
<script type="text/javascript" src="http://127.0.0.1:3000/menu"></script>
<!-- end: include main menu -->
the rest of the application/website
...
</body>
I got it to work pass some HTML to my website using the following code in my routing mechanism, but I think this is really dirty done:
res.send("document.write('SOME_HTML_GOES_HERE')");
But I need to pass the views/menu.jade as HTML snippet back to the website.html. I already returned whole HTML sites with:
res.render('index', { title: 'Express & Jade' });
How can I get that the menu is loaded in a non Node.js application delivered by Node using a template mechanism?
You should rather use an iframe to include the node.js menu. You can include the HTML rendered by Express and Jade:
<iframe src="http://127.0.0.1:3000/menu"></iframe>
That being said, I think you should try to serve all your website from port 80. Many users cannot access port 3000.
If you're hosting your website on node.js (port 3000) and, say, Apache (port 80), you should try to deploy a proxy in front of both of them. I used HAProxy to do this. In my case, the proxy runs on port 80, Apache on 8000 and node.js on 3000. I have simple rules to redirect request to either node.js or Apache.
Related
I am working on embedding my blazor app into my github pages site using jekyll. My blazor app uses no navigation. However, I am getting this error:
System.ArgumentException: The URI 'http://localhost:4000/blog/2020/05/01/XamlTemplates' is not contained by the base URI 'http://localhost:4000/blazor/XamlTemplates/'.
This is my page_blazor.html in the _includes folder to embed into various pages of the site
<script src="js/index.js"></script>
<app>Loading...</app>
<script src="_framework/blazor.webassembly.js"></script>
This works if the index.html file is in the same folder as the "_framework" folder.
This is how I am using it in my blog:
---
title: Xaml Templates
date: 2020-05-01
layout: post
name: Razor for Xaml
baseUrl: /blazor/XamlTemplates/
---
{% include page_blazor.html %}
The url for this blog post is different than the baseUrl that blazor uses. This is what is causing the exception. Does anyone know if there is a way to fix this? Why do we have to specify the base Url? Is there a way to turn off the blazor navigation. What I want to avoid is having to copy and paste the dlls everywhere I want to use them in my site.
A base url is used for navigation and physical file dependencies.
Even if you're not using navigation, if you load a page a few steps down in your site hierarchy, your application still needs the ability to get back to the application root in order to fetch your wasm dlls. Fortunately this is easily accomplished by adding <base href="/blazor"> to your page.
Microsoft provides excellent documentation for this
I have been building SPAs (Single Page Applications) using React. Whenever I start a new project, I use create-react-app. So far so good.
I now have received a request to load a React application as a widget within an existing HTML page.
My question: how do I achieve this? I can refer to the react files using the CDN links as well as Babel however I am having trouble wrapping my head around packaging this all up using Browserify or Webpack.
Any of you have experience with this already? Perhaps you can share with me what works best.
I have tried googling this with not much luck.
Thank you.
Just add lines to webpack.config.js
...
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
plugins: [...],
....
to exclude React from bundle and then add it at page before your bundle
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script type="text/javascript" src="/scripts/app.bundle.js"></script>
(it will mount as usual to specified HTML element)
I'm trying to build a simple HTML page with a navbar that is an include. I've been told that the server I'm building on is an iss server. Here is the html include that I'm trying to use.
<html>
<body>
<!--#include virtual="navbar.inc"-->
<p>Content</p>
</body>
</html>
I currently have index.html and navbar.inc right next to each other in the same directory.
This isn't working and I'm not sure why.
You can't do this without using the server side code. ASP, in other words
Change the extension of your index file to .asp, and try it again.
A better explanation is that HTML, being on the client (browser) side, is unaware of any files currently on the server. ASP, on the other hand will see what you have there, and execute it, effectively including the file from the server.
Read th e following article, it works.
http://www.w3schools.com/howto/howto_html_include.asp
im planning to do something using bootstrap, where i will split the .jsp in 2 divs, the top one is the menubar.jsp and the other is the contentclicked eg:
start.jsp
<div id="menubar"></div>
<div id="content"></div>
when the users get access(after a login) and go to the http://www.localhost.com/restrict/start
it will run this .js
$(document).ready(function(){
$("#menubar").load("restrict/menubar");
});
the /restrict/menubar is because i have a file called menu.jsp that have the bootstrap code of the menubar
and for each link that the client click in the menubar it will do:
$("#content").load("restrict/linkCliked");
and for each link i will have a linkCliked.jsp
it seems to work, BUT i dont know if this is a good way and secure, because if the use write the uri http://www.localhost.com/restrict/linkCliked, he will get just the linkClicked.jsp, but i want it to render the menubar.jsp too without, is there any solution that i dont have to "include" in each .jsp the menubar?
obs: using VRaptor MVC
Your system seems OK. If you are concerned about the HTML URI being pointed to incorrectly, you can keep your templates in a separate folder than your bootstrap. If your setup is like so:
/var
/var/www
/var/www/html <- your web
You can add a new folder:
/var/www/template
And put linkClicked.jsp and menubar.jsp into that folder, calling them. A user will not be able to type in an address to get to those paths and you won't need to do any funky redirection in your server configuration either.
I'm front-end developer and in work I use Twig with Symfony2 on Apache server. But now I have to make mockups in HTML, CSS on my interaction computer-human course on university. I need some application to able to including other html file in html file, extending html file with other html file - something similar like in Twig include and extend features. Does something like that exist?
I'd rather don't use html frame.
You could use server side includes - but this requires a server (hence the name !!)
Then you could, for example add a header to each page:
<!--#include virtual="header.html" -->
Apache, nginx, lighttpd and IIS are the four major web servers that support this language.
Your other option would be to use JavaScript and AJAX to pull in other content post load.