How to send data with html file from Express server - express

Currently, I'm making two round trips to my server. The first trip is to send the html file to my client via res.sendFile(). Once that html file is loaded in the client, I need to fetch the data for that page, so I have to make a second request to the server (sometimes using an IIFE to get the data immediately on page load), where I send the data back via res.send() or res.json().
From what I've read, it's not possible to do all of this in one step, so are two round trips to the server the best way (or only way) to render an html file and its data in the client?
The only other option I know of is to use a templating engine like Handlebars or EJS, but I don't think either one can handle the complex logic I need in the client. I tried Handlebars once, and the client logic was a mess.

If you need to fill your HTML page with dynamic data there are no other options to use a template engine if you want just one trip to your server.
For me using PUG template engine (formerly Jade) was good enough.

Related

Does Vuetify's data-table work with Static Site Generation?

Can I use an SSG tool for Vue.js, like Nuxt, to generate a single-page application using Vuetify and have its data-table component (instantiated with v-data-table) work, i.e. be able to display tabular data loaded as JSON (via a totally separate REST API, nowhere near Vue.js), enable editing its rows and having script handlers make REST calls in response to edit events which data-table provides? If so, what steps does that involve?
Or am I confused about the requirements, e.g. the meaning of static? (I understand it as content, i.e. HTML mostly, being ready on the server and send in response to requests, as opposed to generated on the fly. But maybe the in Vue.js it means something different.)

Share dynamic content on LinkedIn

I have a JS based CMS that populates a single page with different content based on URL parameters passed to the page. I am using the shareURL format (https://www.linkedin.com/shareArticle?mini=true&url=''&title=''&summary=''&source='')
But the parameters I pass are never used it always falls back to what is being served directly from the server.
Do I have to use the API to make this work and if so can I use the API without making the user authenticate?
Is there a correct way to pass this so that linked in will display the correct data.
After testing this more I realised that the linked ins share URL does not take its parameters it only takes what is served from the server. So I changed my build process not to get the pages in run time but to precompile them onto the server. Maybe in the future linked in will have resolved this for dynamic pages.

How to re-use expensive data in a WSGI app?

I built a WSGI page that contains both tabulated data and a scatterplot of the same data from a database. (I'm using flask and matplotlib but that doesn't matter). This generates two separate requests: One for the HTML page and one for the dynamically generated image called from the tag. Since the database is rather slow and since both requests need exactly the same data I'd like to make this work with just one SQL query. Two approaches come to mind:
After querying the DB in the HTML view function, generate the scatterplot and save that in a PNG file somewhere. Then pass the tabulated data on to the template and serve up the cached PNG once the browser requests the image.
Somehow embed the image data in the HTML itself and have the browser render it using Javascript.
Approach 1. is simple and straightforward, but I also need a way to get rid of the cached images when they are not needed any more. This is prone to get messy. Since the app is purely http-request driven I would have to scan my cache dir on each request and decide which file is old enough to be deleted. Alternatively I could have an "onload" javascript function call my app a third time to trigger deletion of the image. Maybe clever, but robust?
I have no idea how to do this, let alone in a browser-compatible way.
Any suggestions?
I've been on Usenet for 25 years and still posting a question is the best method to find the answer yourself after a few minutes:
<img src="data:image/png;base64, {{imgdata}}">
and in the view function:
return flask.render_template('chart_page.html', imgdata=base64.b64encode(pixbuf))
End of story. No javascript.

Hybrid REST + stateless operations in an API

I'm implementing a RESTful API for what is essentially a document store, but am hitting a brick wall because I need a hybrid approach to one of the operations that can be performed on these documents.
Essentially, a user should be able to generate PDF versions of documents that are stored as JSON but also generate PDF versions of JSON strings that are passed arbitrarily (with no record in the database). The PDF reports never need to be stored anywhere, they are always generated on the fly.
My current API looks like:
/Documents
/Documents/1234
/Documents/1234?rev=4
Now, one way to implement the PDF generation would be to do:
/Documents/1234/Reports
or
/Reports/1234
But since we don't need to store PDFs (generated on the fly), both are reduced to only a GET operation, and it doesn't really act on a 'Report' object - which doesn't seem RESTful to me.
What complicates it further is that a user should be able to manually pass a JSON blob to the service and get a PDF. So something like:
/API/GeneratePDF
So does a separate stateless API make sense for this one operation? Maybe then redirect a request like /Reports/1234 to /API/GeneratePDF with the JSON blob for the 1234 document. It all seems a bit messy :)
The URL '/reports/123/' is pointing to a 'report' resource and it should not matter what backend operations will be acted on it.
When thinking about resource-url and its associated operations, the only relevant operations are "GET/PUT/POST/DELETE"
Then map the business operations (like generate PFD report) to the url+HTTP-Op+params.
Like in this case, map 'generate PDF report" to "GET /reports/123/"
use-case-1: simple get report
GET /reports/123/
return: {pdf-report}
use-case-2: customized report
GET /reports/123/
param: {"json info passed along with the get operation"
return: {pdf-report}
The the backend can detect if there are input from the client to decide what specific backend operations should be taken to generate the report.
Hope this help!

Document Construction Api

I'm currently building a API service that accepts Input in HTTP Requests, processes the information, uses a template engine (Currently Jade) to parse the Template files and then outputs in either HTML, PDF or a Image.
I would like to have this service not be bound to a Database, as I don't see a need for it. The service has one goal, accept input and output the result in the desired format.
Currently I can't decide on how to store and read my templates, it's a new world without a database....
Do I store them in a folder such as "templates" which I read each time I want a list of templates ? But have no idea how and if file locks will cause problems ?
Any suggestions ?
Have a look at Express.js it will allow you to set up a project with a good default directory structure. By default it stores Jade templates in 'views'. There will be no problems with file locking.
One other thing I would do is separate the API service from the view rendering. At the moment I use restify for pure REST services it is specifically geared toward that use case. So the workflow would roughly look as follows
'views' folder <--> Jade templates <--> Express <--> JSON data <--> REST API