node.js how to access its html file - node.js

I'm working on an app that uses a node package for some of its content and css. How do I access the templates? The folder structure for the package is packageName/src/packageName/templates/basket/partials/index.hbs The contents of that file is only html.
I want to use the contents of index.hbs in one of my app's hbs files. In the route handler for the page I have set up a variable to get that data and pass to the view, but I dont know how to expose the contents of the index.hbs file to the route handler. Do I read it in the fs package? or is there another way to access it?
I'm inexperienced with node so let me know if I need to provide more information.

Using require in the route handler worked nicely.
route_handler.js
const html = require('packageName/src/packageName/templates/basket/partials/index.hbs');
module.exports = {
res.render('pageView', {
html: html
});
};
pageView.hbs
{{{ html }}}

Related

Is it possible to render handlebars templates from a database on node.js?

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.

cannot reach a file on server though I exposed using express

In my project I need to store some text files dynamically and end user should be able to download them from browser. I know the best way is using object store like MINIO or S3 but unfortunately the only way I have is to use in memory storage. So what I am trying to do is: I made a public folder and I exposed it using the following code:
var express = require('express');
var app = express();
//setting middleware
app.use(express.static( 'public')); //Serves resources from public folder
var server = app.listen(5000);
it is as simple as that. Then for testing just to make sure I can download and reach a file I created a public folder with t.txt file in it and when I try:
http://localhost:5000/public/t.txt
I get
So why am I not getting it? Also is what I am trying to achieve will be a good match to scenario and is it doable at all?
When you're not specifying a path in app.use(), your app will serve the contents of the directory you're pointing to in express.static() on the root path. Try this:
http://localhost:5000/t.txt
That said, if you want it to be accessible at /public/t.txt, just specify the path:
app.use('/public', express.static('public'))
At first use the following line of code:
app.use(express.static(__dirname+'/public'));
This means that your home directory for static HTML pages is in the "public" folder. Note that the "__dirname" points to the directory of the current js file.
After that, call the following URL from the browser or POSTMAN:
http://localhost:5000/t.txt
As you can see, there is no need to write http://localhost:5000/public/t.txt referring to the "public" folder because you have already specified that in the app.use line.

Are you able to use vue.js inside an ejs file?

Sorry guys I am new to node.js and was wondering whether we are allowed to use vue.js within an ejs file.
Yes, we can. Here is a scenario. Let's say you want to render a data Object to ejs file, and you want this data Object be accessible from VueJS.
First, in your controller, you have to render it as a JSON string
res.render("index", { data: JSON.stringify(data) }); in order to access it in your javascript code.
Then, in your VueJS code inside ejs file, you simply access it this way:
var app = new Vue({
el: '#app',
data: {
myData: JSON.parse('<%- data %>')
}
})
Note about <%- tag in your VueJS code, it is necessary in order to output your data properly.
As VueJS can be implemented into existing systems, you should be able to do so yes.

Use dynamic express routes within another Express route

For a school project, I created a plugin system for an Express.js-Application in Node.js. The main page of the application should display a dashboard, where every root page of each plugin should be displayed in a div. Every root page is accessible over the pluginName/-route.
What I would like to do is the following: I wanna include the HTML-string of every home-route in the dashboard. But for this, I need to call the routes inside Node.js (like partials) and for some plugins I even have to provide some properties.
Does someone have an idea, how this could be implemented?
e.g. I have following route:
router.get('/pluginName', function(req, res) {
res.render(__dirname + '/views/home.handlebars', {
layout: __dirname + '/views/layouts/main.handlebars',
markup: markup // Pass rendered react markup
});
});
Now I want to pass the resulting HTML from this route into another route.
So far I had the following ideas:
Simply add the URLs of the plugins to a "data-ajax-url" attribute of the divs and load the stuff via AJAX.
Make an HTTP-Call to every route and append the result on server side (pretty nasty...).
Create a renderDashboard-function for every plugin, where I get the HTML using app.render(...) and then I append the result.
But I'm not really sure, which approach (if any) would be the nicest.

New relic browser index.html

I have node express app
I have public folder /public also it add like app.use(express.static('./public'));
and there index.html
so when I running
node server.js
it shows me localhost:3000/index.html
How can I put in index.html
newrelic.getBrowserTimingHeader()
to see in localhost:3000/index.html NREUM object
New Relic for Node requires that an application be using an HTML templating library to inject the headers.
They have full documentation here: https://docs.newrelic.com/docs/agents/nodejs-agent/supported-features/page-load-timing-nodejs
The important bits to look at are the examples. These are from the docs on the example with using Express and Jade:
The simplest way to insert browser timing headings is to pass the newrelic module into your template, and then call newrelic.getBrowsertimingHeader() from within the template.
app.js
var newrelic = require('newrelic');
var app = require('express')();
// in express, this lets you call newrelic from within a template
app.locals.newrelic = newrelic;
app.get('/user/:id', function (req, res) {
res.render('user');
});
app.listen(process.env.PORT);
layout.jade
doctype html
html
head
!= newrelic.getBrowserTimingHeader()
title= title
link(rel='stylesheet', href='stylesheets/style.css')
body
block content
The chunk where the newrelic module gets set the application locals for use in the template is the important bit: app.locals.newrelic = newrelic;.
There's simply no way to run something in a static file the way Express's static module works by default. It pretty much streams the text content of the static file directly.

Resources