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.
Related
Is it possible to host web page with angular.min.js functionality using nodes http module?
I'm making a really simple web project that is going to fetch some data and I decided to use angular.js to display data no the page. I tried to read index.html using fs module and sent it as response to the localhost. It seems that angular.min.js, that was included in the pages head section did not load as it would when I run the page in the browser from the file explorer.
angular is a web application, so, please serve the angular using your node.js server and load the app in the web browser.
add a listener of get then send all files that index.html need, it is done.
or use app.use(express.static('public')); which public is your 'public' folder, put all file in dist to serve as a static content.
I use the first option every time but it is trick but functional.
sample code is:
const express = require('express');
const router = express.Router();
const path = require('path');
router.get('/:id',(req,res)=>{res.sendFile(path.join('/path/to your/file/'+req.params.id));});
router.get('/',(req,res)=> res.sendFile(path.join('/path/to/your/file/index.html'));});
module.exports = router;
I am writing a standard express.js application without any client-side framework like React, Vue or Angular. The HTML-Templates get rendered from the server like this:
app.get('/', function (req, res) {
res.render('index') // template engine ejs
})
app.get('/about', function (req, res) {
res.render('about') // template engine ejs
})
I'm using Webpack to build my static assets like javascript files, css files and images.
Question: how can I use assets in my HTML template if the asset files have a hash code included in their name. For example sample.a23ijafj.jpg.
Since the hash codes always change when the file gets edited I can't just use the generated filename:
<img src="sample.a23ijafj.jpg" />
Try to use this Webpack plugin:
https://www.npmjs.com/package/html-webpack-plugin
With this, you can create HTML template to generate together with your other resources.
I have not actually used it myself, but it seems it has enough documentation to solve your problem.
Ok, so I'm just starting to learn Vue.js, and man, it's so hard to do things that are very simple when just using EJS for example. I'm close to abandon Vue for my current project, since I just don't know how to pass res.locals.something from Express server to Vue frontend. By the way, it's Passport.js thing - when authenticated, user should be redirected, but I have to pass the info whether user has logged in or not to Vue (res.locals.isLogged = req.isAuthenticated();), and that seems impossible with my current (close to 0) Vue.js skills... The only solution I found was using ajax (axios was my choice) request on the client side, targeting /login/facebook route on the server, and then I could pass the response from Express to Vue, but it cannot work because of the damned CORS issue. So, I cannot use ajax to retrieve the data from Express, and Express and Vue are not natively connected like Express and EJS or Pug for example.
In short - does anyone know of a simple way to pass Express variable to Vue, not including Vue SSR, Express-vue module etc.?
P.S. I'm not using Webpack or anything similar (so, no .vue files etc.) - just a simple index.html file with Vue loaded from CDN.
Ok, one thing that crossed my mind as dirty workaround was using .ejs instead of .html extension, so I could pass the variable to ejs, but I thought it won't work. What I did was just renaming my index.html to index.ejs, passing res.locals.isLogged to ejs template and both Vue and ejs rendered parts of the app are working together, somehow...
So, this is the dirty (sort of) solution...
The question has already been answered but I'm not familiar with .ejs and couldn't follow the solution. For those like me, what I did was :
Sent the data using res.locals or res.render('file.pug', data)
Set the data received as a html data attribute to a tag ( ex : p(id="myParagraph" data-myData= data)
Set the state of the Vuex store using
mounted : function () {
this.$store.state.myData = document.getElementById("myParagraph").getAttribute("data-myData");
}
The same can be used to set the data property of the vue root instance.
From here on you can use the data whenever needed and still retain reactivity.
You're on the right track using res.locals. To get access to the variable in the JS that's in the view, you have to wrap the value in a string: console.log('#{isLogged}'). See example below
app.js
const express = require('express')
const app = express()
app.set('view engine', 'pug')
app.use((req, res, next) => {
res.locals.isLogged = false
next()
})
app.get('/', (req, res) => {
res.render('index')
})
app.listen(3000, () => {
console.log('listening on 3000')
})
views/index.pug
doctype html
html
head
title= title
body
h1= text
script.
console.log('#{isLogged}') // false
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 }}}
Trying to understand how to implement AngularJS in a node.js express app. After setting up express, I need 2 things: routing and a template engine, so normally I would need to do as follows to set the app to use Jade templating engine:
app.register('.html', require('jade'));
...and then I would set routes probably like this:
app.get('/', function(req, res) {
res.render('index', function(err, html){
// ...
});
});
But if I want to use AngularJS for templating, do I still need Jade? And I read about how in AngularJS routes must be configured, does this mean the above way of declaring routes with app.get() would no longer be needed when using AngularJS?
If you don't need to add anything extra to your Angular layout prior to rendering the page for the client (i.e. in some cases you could add a window.user object in the Jade template for authentication when using PassportJS), you can completely ditch Jade altogether and let the Express static middleware render your index.html:
app.use(express.static(path.join(__dirname, 'public')));
Obviously, the files in public/ are all your Angular files, including the index.html. Be sure to require the path module too for path normalization, this isn't required though.
Afterwards, Angular will take care of the rest. This means that all your routes are defined inside the Angular app, and not in the Express routes.