I'm new to node js. Is that possible to create a html dom element on front end(index.html) using node js. If I insert any data into DB means then I want to create an html dom element like "li" (list) to show the inserted data in my index.html file.
Creating a html dom element in an existing html document is possible with javascript and whatever is your backend. You just use document.createElement() or whith jquery $('mytag').append('newTag). You can send JSON or (XML) from your server: res.json({foo: 'bar') with expressjs for example. Then from the client you make an AJAJ (AJAX) call to the route of your backend. I think what you are trying to do is a Single Page Application.
Related
What is the point of returning HTML as a response from a Node.js server?
I understand templating engines like Pug allow you to generate dynamic HTML using variables.
What I don't understand is why you wouldn't simply return JSON as a response, then use what is returned to render something based on that. I use React for example, so I could render render some JSX dynamically instead
I'm looking to create a single node.js application that will render multiple different client websites.
We currently run one node.js application per client website, but I think this might be overkill as the serverside logic is exactly the same for all of them, the only difference being the handlebars template.
I'm looking to re-architecture to have a single node.js application which will then render the different client's websites based on some incoming information, will use nginx to add a header or something to the request so the app knows which website to render.
Is it possible to store the handlebars template within a database and then request the template at render time? Rendering a simple single page should be easy enough, but I'm struggling to understand how partials would be rendered?
Looking to achieve something similar to Shopify's Storefront Renderer, not sure if it's possible to do with handlebars or if it's better to use of of the LiquidJs ports for Node to achieve this?
https://shopify.engineering/how-shopify-reduced-storefront-response-times-rewrite
I do this with different countries, same concept as you with different Clients.
You just create the Handlebars layout and put it in your partials folder. No need to put template in your database.
Then your server logic will have eg clientName, and your Handlebars will have IfEqual tags (you'll need an IfEqual helper)
Example:
Server route will give a variable clientName.
Handlebars you have the main view page with only the IfEqual helpers.
{{#ifEqual clientName 'Client Name 1'}}
{{> client/clientName1}}
{{/ifEqual}}
{{#ifEqual clientName 'Client Name 2'}}
{{> client/clientName2}}
{{/ifEqual}}
Your helper function will be
, helpers: {
ifEqual: function(x, y, options) {
return(x == y) ? options.fn(this) : options.inverse(this)
} // {{#ifEqual statusLogin 'unconfirmed'}} {{/ifEqual}}
Search nodejs handlebar helper if you dont know how to set it.
So my partial folder, you can create a folder in it called client, and put all your Handlebars template in there. Search for nodejs handlebars partial folder setup if you dont know how to do it.
The handlebar helper function I found it I think in stack overflow, so you can search for others if you want, but for me it works.
Your partial template files just do as normal Handlebar files.
So the main idea is User loads the page, depending on what Client flag you put it, it loads up that template.
I have been having trouble with ajax, and I just want my html to pass a function when a button is passed, but that function is in a node.js file.
How could I do this without AJAX, and if AJAX is required, could I be linked code?
Create index.js file and attach it to your html (index.html) file.
Then in html file if you are submitting form then pass onClick=functionName() as attribute in <form> tag.
In index.js file, you can add functionName function and that function works as your frontend function.
Use axios or inbuild request to fetch data from that function via endpoint.
I'm quite new to using engine templates, and need a bit of help.
I'm using the EJS template engine to render my HTML and was wondering if it could essentially render the HTML page first and then my data.
For example:
I have a page render as the following that calls a function in its data object:
res.render(root + "/pages/home/home.ejs", {
data: render()
});
This render() function is quite heavy and takes a couple of seconds to complete. I was wondering if I can serve the HTML file first and then allow for the data to come through to the page asynchronously when it completes?
I'd also would like to avoid doing:
render().then(data => {
res.render(root + "/pages/home/home.ejs", {
data: data
})
})
Any suggestion or other template engines should I use would be very helpful.
You are rendering your application on server side (res.render()). So you cannot bind data after rendering the template. This is because when you are using server side rendering you are generating a html on the server and send it as the response. Afterward you don't have access to the client side code. (like php)
In this case you have to user a client end http request to get data. Then fill them in on the client side. You have to create a http api in the server side.
I am developing an application in nodejs expressjs framework with mongodb backend. i'll receive data from mongodb and pass as model of for JADE template it will render the page.
I want to integrate Angular 2 for form validation, live search, filters and some of DOM modification. I am not sure we can target the DOM element directly to init angular application without specifying template like angular 1 .
Could someone please help me how to init angular2 in already rendered html jade.