I am developing a small node.js application using express on Cloud 9 ide.
I have a static index.html page and some routes defined. One of the routes is a post
app.post('/getJson', function (req, res) {
jsonData = fetchData(req.body.selectpicker);
res.render('index.html', '<p>tttt</p>');
});
As jade is not supported i just want to pass some html to the static page. Currently using
res.render('index.html', '<p>tttt</p>');
How can I render the html on the page?
The render() function of the response renders a view and returns the HTML. If you want to render pages, you need a rendering engine such as EJS or Jade. If you're using either of those rendering engines, you can pass the HTML like so:
res.render('index.html, {
html: '<p>tttt</p>'
});
Since Jade isn't supported (may I ask why?), this is how you'd insert the HTML fragment in EJS.
<p><%=: html %></p>
Related
I have social buttons for sharing the current page on all my web application pages, the URL attribute is as follows data-url="https://www.myPage.com/whateverComes". However, I am looking for a way to have this URL dynamically from the location.href. Is there a way to achieve this without having to use javascript? maybe just plain HTML or inline javascript.
I am using pug as templating engine, -window.location.href or #{window.location.href} didn't work. Any ideas please ? thanks.
window.location.href is a client side JavarScript variable, pug has no access to it.
Assuming you're using Node.js with express you can do something like this
app.get("/posts/:post", (req, res) => {
res.render("page", {
currentURL: `${req.protocol}://${req.get("host")}${req.originalUrl}`
});
});
then in your pug template interpolate the variable:
a(data-url=currentURL)= Link
I'm using expressjs as a server on 8000 port. I want to send a string value from expressjs file to html script tags and use this string value in script tags.
name variable is coming as a empty string now.
How can i console.log name variable's value?
static-pages-server.js:
app.get('/index', function(req, res) {
var name = "hello";
res.render(__dirname + "/static-pages/journey-analize-report/index.html", {name:name});
});
index.html:
<script type="text/javascript">
console.log(name);
</script>
Edit : I used ejs and now problem is how should i describe name attribute in script tags? Below code is giving syntax error.
<script type="text/javascript">
console.log(<%=name%>);
</script>
Express.js itself is a backend server. If you would like to have dynamic HTML files you need to use templates engines.
Please follow this document -> https://expressjs.com/en/guide/using-template-engines.html
Eventually, you will realize you will need a frontend framework to write your code faster with good quality. So also recommend you to take a look at some of the frameworks like React, Vue.js. If you need Single Page Applications you only use express.js to provide data not to render HTML. If you need Server-side rendering it is good to investigate Next.js, Nuxt.js.
You cant directly inject variables into a html file in nodejs . That is why you have templating engines in express. Check out ejs.
It would allow you to pass data directly from your routes into the page you are rendering.
Local variables sent to a view via the locals parameter using the res.render() method aren't directly accessible. Instead you need to refer to those using it's variable name wrapped inside double curly brackets. So if you want to use it inside a JavaScript function, you need declare a local variable and give it the content of your name local.
Simply modify your index.html like this:
<script type="text/javascript">
let name = "{{name}}";
console.log(name);
</script>
here is the answer How do I use HTML as the view engine in Express?
what you will need is a view engine package in your app. there are many view engines currently available.
then set that view engine in express app. Trigger the view render via a call from your route’s response like you have done above.
Then in your view render the html output using the view variables and if these variables are outputted into html you can use them in your in browser JavaScript. You can also call a service in your html sending the dynamic data as well.
check out esj or pug (ps pug is my personal favourite )
I'm currently using a expressJs template that uses pug in order to make a simple website. On the site is a button. I want on the click of the button to call a function in the index.js file.
Originally I had the code like this. In the index.pug file:
extends layout
block content
h1= title
p Welcome to #{title}
button#BubbleButton.button.hypeButton.button-3d.button-caution.button-circle.button-jumbo(onclick = 'buttonClick()') Click
In my index.js file, it would look like so:
var express = require('express');
var router = express.Router();
var PubNub = require('pubnub');
module.exports = router;
function buttonClick(){
alert('test');
}
However, I would get a response along these lines:
buttonClick function not found.
I'm frankly more familiar with angular than pug. What does it take to link up the view side to the router file? I understand in Pug, you can add an endpoint REST API style, but this isn't necessarily going to be an API. I may just want to show something simple and not expose it. However, I may be misunderstanding something fundamental.
Thanks!
The JavaScript code contained in the script. tags in your pug file will only run in the browser, and the code in index.js will only run on the server. Therefore they can never speak directly.
You need an ajax call on the client (i.e. in your pug file). Here's an example using jquery but you can use one of the many ajax client packages out there to do the same thing:
script.
function onButtonClick(){
$.ajax({
"url": "/service",
"method": "POST"
});
}
Then you need a route handler in index.js:
router.post('/service', function(req, res){
console.log('test');
});
Note that this will output to the console on the server, not the client. I believe that's what you want to do.
To add jquery to your page you can use a cdn (Content Delivery Network) to quickly bring it into your code. Here is the pug syntax for that:
script(src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous")
Alternatively you could you axios as a lightweight alternative to jquery, all it does is ajax:
script(src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js" integrity="sha256-mpnrJ5DpEZZkwkE1ZgkEQQJW/46CSEh/STrZKOB/qoM=" crossorigin="anonymous")
I built a nodejs web application that is based on ExpressJS and the start point of this website is app.js.
I want to publish this website on a domain using winScp. WinScp requires index.html file as the start point in order to publish the website.
Can we use something like webpack or browserify to bundle the application and publish the website or is there any solution?
I have the same problem, but I found out that you can render the ejs
ejs is a template engine that makes it possible to load data from your app in the view. After you render the template, it generates .html file for the browser
official ejs documentation:https://ejs.co/#features
Use: Pass EJS a template string and some data. BOOM, you've got some HTML.
let ejs = require('ejs');
let people = ['geddy', 'neil', 'alex'];
let html = ejs.render('<%= people.join(", "); %>', {people: people});
answer from more experienced stackoverflow contributors:
https://stackoverflow.com/questions/8660659/how-do-i-render-an-ejs-template-file-in-node-js]
I want to write my HTML in HTML. Not some fancy way. The only thing that would be cool is to be able to use some sort of include statement to include header/navigation/footer for each page.
I've looked at pug, ejs, mustache, nunchuck, etc etc. I hate all of these things. I just want to write HTML..
What is a simple node module to do this? And how do I set up the render engine in my main app.js? I am using express
You can just set up your express routes to connect with html pages. Here's a simple example:
var express = require('express');
// Create express app
var app = express();
// Route index page to an index html page
app.get('/', function(req, res){
res.sendFile(__dirname + '/path/to/views/index.html');
});
// Create server
app.listen(8080, function(){
console.log('Ready on port 8080...');
});
As a side note, ejs is basically html but with some bonus functionality. You can totally get away with writing only html in ejs pages and then start using the ejs features when you get comfortable with it.
Looks like you want to server only static html files using node not some jsp equivalent dynamically generated html.
Express has support for serving static files and you do not need to define any routes for that!
http://expressjs.com/en/starter/static-files.html
Second thing I understood from your post is you want to include some common html to your html page. One way of doing that is to use a browser/client side java script framework. Take a look at angular.js. It has ng-include. Basically you can include one html file to another using that.