I have several environment settings that I need to inject into my javascript assets. Thinks like database uri and facebook app id. I'm currently using EJS as my view engine.
Is there a simple way of templating javascript files in NodeJS?
Rather than trying to template your static files, I'd suggest using an initializer script instead.
Simply put a <script> block in your layout, where you call a function in your JS file, which takes the DB uri and the FB app id as its parameters. The function can then store the values someplace where the rest of the scripts know how to access them.
You can easily pass your parameters into the layout (and views) for example by using helpers
Related
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.
When I do SSR in my React apps (using Node.js / Express), and using Redux for state, I always end up with a similar to window.__PRELOADED_STATE__ = {....}
This output is something rendered together with the generated html code from renderToString but I'm wondering if there is a way to get that preloaded state variable inside a "virtual" js file instead (that can be referenced in my main layout template file), just to make the source code cleaner, without having to do the same rendering process twice?
I currently do my SSR via a middleware that I've setup in my Node.js/Express app.
Anyone has any ideas or recommendations?
Thanks
I would like to expose a node.js server variable to the client. I am trying to get express-expose to work.
I am not sure how to initialise and use that library.
In the express-expose guide the usage doesn't make sense
var express = require('express');
var expose = require('express-expose');
app = expose(app);
app.expose(...);
how can I use app in 'expose(app') before it was initialised ?
I used
const app = expose(express());
app.expose('var some = "variable";','head');
but that doesn't seem to work either.
Can anyone supply me please with an example that initialises the express-expose library and exports var 'some' to the client ?
(By exposing to the client I mean it will be available to all my javascript files as a global variable so that I could do 'console.log(some);' and it would print its value)
Using Pug
Since you're using Express with Pug, you can just call the res.render function and give it the variable you want. Here's how to do that.
Let's say you have a template called index.pug, it may look like this:
html
head
title= title
body
h1= message
On your server, the code responsible for the rendering should look like this. In this case we're passing someVariable to the view that needs to be rendered.
const someVariable = 'hello world!';
app.get('/', function (req, res) {
res.render('index', { title: 'Hey', message: someVariable })
})
A note on express-expose
The express-expose library is not maintained and hasn't been updated in 5 years. My advice would be to just render your variable as described previously or just use AJAX requests.
A note on using a global variable
I am using the 'pug' view engine. It is passed to the view but I want
it as a global javascript variable.
A better idea is to use Template Inheritence to create "generic layouts" and extend them as needed. Sharing a global variable with file you're rendering will not update it magically on the front-end if you're changing it in the back-end. Even if the variable is global.
If you want to reflect "real-time changes" you should look into Socket.io.
This seems like a code smell... But regardless, there are cleaner ways to do it.
If you want to expose a data object, that is, an object just containing keys and values, you could embed it in the rendered webpage, make it available via some API endpoint that the client can acquire via an AJAX request, or expose a raw Javascript file that can be included via <script> (or I guess script(...) in pug).
If you want to expose a more complex Javascript object, such as a class or an object with function definitions, you could expose the Javascript file and include it via script(...).
However, you should be very careful exposing a file used by the server. If there are any vulnerabilities, they are now public. If there are any hard-coded passwords (which shouldn't be in code anyway), they are now public. Anything in this file is now public, so if you do indeed want to do this, be very careful about what code gets into this now client-side file.
If you need more details on how this could work, please comment :)
Edit: Also be aware that using the embedded and include methods would not allow the variable to be updated on-the-fly. If you need the client to track any changes to the data as it changes on the server, you will want to use AJAX. This is the best method, in my opinion. It offers you the most flexibility.
Another edit: Judging by the issues on the express-expose project, it seems not well supported and maybe has security issues. For now, I would avoid it. Maybe at a later time, it will be helpful and secure.
If you want to expose a variable value to the client from server , that never changes or updates, you can simply add a hidden input field in your template and add the value of it
In your EJS template file this would look like
<% if (data) { %>
<input type="hidden" value="<%= data %>" id="myGlobal"/>
<% } %>
you must pass the data value in your res.render('template',{data:"hello"}) function to the template.
You can access this variable value from client using a simple document.getElementById("myGlobal").Again don't pass any sensitive information in hidden fields.
If you want to pass sensitive information , implement an endpoint in your server with authentication and call the endpoint from client via an ajax call .This is also a best approach to update the value of the variable from client side.
I know that expressjs supports many view engines, like: ejs, jade, etc. I saw a list here: http://expressjs-book.com/forums/topic/how-to-use-alternative-non-jade-template-engines-with-express/.
My question is how can I create my own view engine. I've looked in ejs and in other engines' source-code but I didn't really find an expressjs documentation on how to create a new engine, what are the requirements, or a tutorial about it.
Is it possible to create a new custom view engine? Thanks.
Yes, of course. Take a look at this list for templating engines.
Regarding express itself, what you need to do is create a plugin, or even a middleware function - that will attach your render, renderFile and similar methods to the response object.
If you don't use an express engine and try to, say, response.render('index.ejs');, you'll get an error. But if that response object has a render method, you're fine. So it boils down to extending expresses' response object with what you need.
I want to be able to use nodejs with jquery without having to execute an npm install as I want to use jquery strictly on the client side. I know this is not possible with the Jade templating engine as its syntax is completely different, but is it possible with some other templating engine? I would prefer not to have a bunch of HTML to haml just to make nodejs happy.
It is certainly possible to use jQuery or any other JavaScript client-side library with Jade. You'll need to figure out the syntax to include a JavaScript file and JavaScript code with whatever engine you use. With Jade you can use script() to include an external file (like the jQuery library) and then script to code your specific calls. Take a look at the Jade documentation here: https://github.com/visionmedia/jade#readme
Below is an example of a Jade file that (1) includes jQuery and then (2) updates an HTML element ("message") through jQuery:
doctype 5
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='http://code.jquery.com/jquery-1.8.1.js')
body
h1= title
p#container Welcome to #{title}
p#message (to be filled in)
script
alert('hello world');
$("#message").html("message set through jquery")
Don't think of Jade as a different language or something that is in any way incompatible with your existing HTML/JS stack - it's just a shorthand way to write HTML which allows you to inject server-side data as a byproduct.
For my personal stack I use express + jade on the server side and then angularjs, jquery and twitter bootstrap on the client side. I use require.js to manage all of my imports, and in my jade template I just have a single script() reference that points to the main.js file that has all of my require.js logic in it.
But, as far as express/jade go - the key is to make sure that you understand that it's not there to complicate your life, it's there to make your life easier. If you feel like it's confusing, switch to a different templating engine or simply have express serve up static html pages with nothing injected and set up AJAX services to get the server-side data you need.