Currently my Nuxt.js application serves HTML pages defined in layouts, pages, routes and components.
Is it possible to render one single route / one page as a standard JSON Response? Is that possible? I mean do not render the HTML e.g. Tags - only pure JSON!
What I already tried:
Created a completely clean layout (with basically only in it), no succcess, still HTML.
Used <pre>{{jsonObject}}</pre> hoping to get plain JSON, no success.
Would be VERY happy, if somebody could tell me whether this is possible AT ALL or not?
What you're looking for here, is an API.
Vue.js will render a template (compiled to render functions, generating a DOM tree) at the end, because it's aimed towards a frontend usage. If you want to render something like an API response with pure JSON, you need to look into Express or alike.
Related
I would like to to use React with Django non Single Page App way - Django will take care of routing, and rendering HTML templates and serving data.
React should be used just on some specific components inside HTML page for eg. (dropdowns, autocomplete, modals), ideally being able to just drop for eg. div element with a class inside HTML and pass props for React component.
What’s the best - maintainable, scalable solution to go about this ?
See django-jsx package and also server side rendering paper. I'm not a frontend specialist but when I've faced such problem, my friends offered me to google isomorphic app with django and react.
I found this add React to an HTML page in one minute page/example to be absolutely painless in rendering a React component inside of a Django template!
This probably isn't what you want to do, given that React has a pretty robust ecosystem around it for building performant single page applications (SPA's). You should be able to decouple your React site from your Django app. Then you'd be able to throw up your React app on a performant CDN, rather than having your Django server hosting every visitor.
But if you insist, the most straightforward way to proceed would probably be to create an index.js & index.html at each Django route. In other words, make a separate "React app" at each route, which Django will serve as users go to each endpoint. I've seen this done before. It's laggy and inefficient (relative to an SPA), but can be done.
If you really intend to go so far as to write raw HTML/CSS/JS and just use React for bits and pieces in between, you'll probably be looking to invoke ReactDOM.render using a variety of second arguments (called container) rather than the standard React-y way of doing a single ReactDOM.render(<App />, document.getElementById('root')); for the whole app to inject into a barebones HTML template.
I notice you tagged your question with server side rendering. If that is a hard requirement for you for some reason, I'd look into using next.js, a Node framework optimized for exactly that.
I am experimenting with Mediawiki Collection extension, for generating books from my articles (which I find very useful). However it doesn't render everything in the same way my mediawiki instance does.
Namely,
mathjax elements don't render
and pictures don't render as well
For instance, here how things get rendered by wiki
And how they end up in the pdf generated by Collection
I understand the reasons behind this behavior: the rendering is done not by my wiki, but by some external service, which has no idea about my client-side plugins.
My question is: how can I get my wiki render all the pages I want, possibly in HTML with all client-side extensions, and then convert the results to PDF?
When I open a page in "printable" view (with &printable=yes) it renders everything as I want. It could be nice to use that to render multiple pages at once (this is in essence what Collections does...)
Thanks
I ended up creating an extension that takes a list of pages and renders them all to a single page. After that I can just print it
The code is available here
This is how it looks like in PDF now:
Also you can add &printable=yes and it will give you a fully prepared printable version which you can just save as HTML.
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.
How do you validate (for example using http://validator.w3.org/) a multipage jquery mobile site? For example if I navigate away from index.html the page is only a div without a header or body.
"It depends".
Validation only makes sense in the context of HTML documents, and if you are modifying a document with JavaScript you only have the initial state to validate.
You could use a tool such as Selenium to drive the site and take snapshots of the DOM (serialising it to HTML) when it is in different states, then validate those snapshots. (The markup validation series has an API you can call programatically so you could combine those).
If you are generating fragments of HTML on the server (instead of sending pure, structured data to the client) then you can embed those fragments in HTML skeleton documents and validate those. You should have such documents existing for most views anyway (since you don't want to repeat Gawker's mistake by having a fragile site completely dependant on Ajax).
See also Progressive Enhancement and Unobtrusive JavaScript
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.