I think I have a misunderstanding of server side rendering with ejs.
Per my understanding, when we create an ejs template and do
res.render('home.ejs')
The entire page is created in the server side. The page will contain all of the images and libraries pre loaded. This is then sent to the browser where the DOM event handler javascript code is run
Is this understanding correct?
What is ejs: Point we should focus to understand ejs: EJS makes easy to write HTML and just that, nothing more, nothing less.
How it works:In general we can not write plain javascript inside html but through ejs we can do that. Previously we have to organize javascript code but now we don't need to be panic about it. Just write plain javascript inside html.
Hence you said 'The entire page is created in the server side' is actually a wrong statement. Thank you so much.
Related
I use "pieces" to avoid confusion with the built-in "snippets" functionality.
The scenario is that I am rendering pages server-side in Nodejs, and as part of that I want to code portions of html in files that can be used to assemble an entire page. These are project-specific so the snippets functionality is really not useful here. Problem is if I write an html file that for example only has a section, VSCode tells me there is an error since that file does not start with <DOCTYPE>, etc.
The goal here is reusable pieces instead of duplicating for each page. E.g. define a header.html file that only defines the <header> section, and can then be inserted into each rendered page.
Has anyone done similar? How to tell VSCode to treat as HTML but without demanding a complete document and indicating an error?
I have a pug template index.pug for my project. I have also made navbar.pug, footer.pug, sidenav.pug. These files are included in the index.pug.
For server side I am using node.js, express.js and socket.io. Now I want to update only the navbar.pug file according to server response. But when I tried to do that I found some solution. But all of them refresh the full index page.
Is there any method that can help to update an specific portion of the webpage(in PUG) without refreshing the whole page?
Thanks in advance...
No, pug is a server-side only HTML processor. As such there is no way to do what you describe here - to get pug to process more means another round trip to the server to re-render the page.
Although technically you could do this with plain JavaScript, you should look into a client-side library like jquery, React, Angular, or Vue to do what you want. A lot of us use pug in combination with those toolsets to build modern web apps, but with those frameworks pug becomes a quicker way to write HTML and is no longer a server-side pre-processor.
I am running a node.js server, and it is rendering a web page wonderfully. When I look at this in a browser, it runs exactly as I expect.
However, what I actually want to do is make the call to fully generate the html page - exactly as it is in the browser - within the node.js code, as a call. Currently, I have tried this:
http.request("http://localhost:8000/").end();
(with a few variants). This does exactly what it says, which is to make the single call to the server for the page - what it doesn't do is actually render the page, pulling in all of the other script files, and running the code on the page.
I have tried exploring express and ejs, and I think I need to use one of these, but I cannot find out how to do this fairly straightforward task. All it needs is to render an html page, but it seems to be a whole lot more complex than it should be.
What output do you want? A string of HTML? Maybe you want PhantomJS the headless browser. You could use it to render the page, then get the rendered DOM as a string of HTML.
Use the Mikeal's Request module to make http requests once you captured the response you then can inspect the html however you like.
To make that easier though you should use cheerio, this will give you a jQuery style api to manipulate the html.
Perhaps you are looking for wkhtmltopdf?
In a nutshell, it will render an entire web page (including images and JavaScript) to a PDF document.
I am not sure whether I got the idea of express MVC right:
If I want to make a single page app and dynamically change the HTML, is it something express can help me with? or do I get static pages that if I want to change I have to use front-end JavaScript?
To be more specific, the HTML (or Jade) templates can can change the HTML that is in the front-end somehow?
If I want to make a single page app and dynamically change the HTML,
is it something express can help me with?
Yes.
or do I get static pages that if I want to change I have to use
front-end JavaScript?
Yes, you will need to use JavaScript in the front-end to change the pages if you don't want to refresh the entire page.
To be more specific, the HTML (or Jade) templates can can change
the HTML that is in the front-end somehow?
Typically the HTML (or Jade) templates that you use in Express.js will produce the initial version of the page.
As the user interacts with the page on the browser (say the user clicks on a link or selects something from a dropdown list) your client-side code will submit an Ajax request to the server, Express.js will process this request and return JSON (not HTML) back to the client, and your front-end JavaScript will repopulate some data on the client. Keep in mind that at this point you won't be producing more HTML from the server, though.
Your Express.js could return HTML instead of JSON for these requests but that gets messy pretty quick so most people writing Single Page Apps chose to return JSON back to the client and use client-side JavaScript to repopulate whatever DOM elements need to be updated.
I have a form that I have implemented using HtmlService. When I submit it I want to see different Html page instead of the page with the form on it. Basically this new page should replace the form page. How do I go about doing this. I tried to create a template form from the process form function that gets called when the form is submitted. But it didn't work. Help me out with this please.
See this answer for an example of serving multiple html pages using HtmlService. The basic idea is to write doGet() to accept a query parameter that it will use to select which html page to serve.
I am not aware of any server-side redirect mechanism (that you could use in the template, that is). However, one way how to do it is via Ajax, client-side. See, for example, how I did it in VALET (open index.html and look from line 240 on).
As an aside: I also tried reloading a page which seemed not to work (maybe due to the restrictions re the window and document object.
You can use doPost() with HTML Services to load another html page.
See this answer.