I want to be able to create a PDF and send it via an email to the user in Express.js. My current tech stack contains: Next.js for the frontend and Express.js at the backend.
Basically, I want to send out an invoice to the user after the payment has been made. I'm currently sending an email, but I want to create a PDF and attach it with the same email. The invoice will be HTML-based, which means I'll have HTML tags like header tags, tables, etc. and CSS for these elements.
My front-end (Next.js/React) are actually not relevant here, because all the data required for the invoice is handled by Express.js itself. So, I'm considering using jsPDF to do this, but I'm not sure how to go about it. I don't use Pug in Express, but I want to dynamically create the HTML and use that to create the PDF.
Can anybody give me a direction here?
Thanks in advance.
If you know any React, there's React PDF that allows you to create PDFs, you could then save them locally before sending them, that might be an option, but it's not really HTML though.
Yes, pdfjs is something you want I guess. You can create your own HTML templates with placeholders for the variables that you might want to keep dynamic. You can easily find out a lot of examples on this on the internet to satisfy your requirement.
Related
I have an .html file and a corresponding .js file (using Bootstrap) I need to deploy this to Heroku.
I'm really trying to avoid having to rework this entire project, I need more than just bootstrap styling. This project pulls data through an API, and populates based on the data pulled. Input is also needed from user to update the backend through API...
I've tried to find examples of how to accomplish just pulling in html/js into nodeJS/expressJS... but it seems most examples are just to use Bootstrap.css for styling, or there's no actual UI interaction coded in the example.
Any links or input will be greatly appreciated.
If you want to render a html file prepared in the server side. You need a view engine like ejs or pug. You can pass data into the html page. Another way of doing the same thing is a framework called NextJs or NuxtJs but you need to know React or Vue.
You can add bootstrap.css into the public folder and express.static will handle the problem. Or you can use CDN links too.
Then you can add the url of bootstrap.css into the html head.
https://expressjs.com/en/guide/using-template-engines.html
https://expressjs.com/en/starter/static-files.html
I want to create a web application using react in which I want to load a page based on the link used, But I know that in react whenever you visit a direct link the entire app is reloaded and you have to navigate to that page using buttons or links provided in the app, I want to generate a temporary link for users which will contain the information about the data to be provided which the back end will check and retrieve from database and provide to the front end, This link will have a duration like for 24 hrs or something and will have an auth token, Can anyone please help me with how I can do that?
React Router is a library that can handle this type of operation and is used in many, many apps. Among other things, it can parse URLs and render different content based on the URL, query parameters, and more.
I'm new to pug, I've read through the documentation and I'm figuring things out as I go.
I have menus that are dynamic, and when the user selects one it needs to load the relevant information into the page.
For example:
Item1
Item2
Item3
Item4
If I click on one of these items it will navigate to 'localhost/item2' or 'localhost/item1', whichever you click on.
I know if I create a route lets say "p" then it will be 'localhost/p/item2' or 'localhost/p/item1', and I can handle all those requests with p/ and use the item2 or item1 to get relevant data
What I would like to do is have a header that wont get updated but a "body" that would change and update on the selected information.
is there a way to do this?
//- index.pug
doctype html
html
include includes/head.pug
body
h1 My Site
p Welcome to my super lame site.
include includes/foot.pug
Is there a way to "reload/refresh" includes without re rendering the page?
I've also thought maybe I could pass the information to the JavaScript page on the server but I only know how to directly communicate with the pug template.
If I understood correctly what you are trying to achieve, then that is exactly what SPAs like Angular, React or VueJS handle for you, so I would highly considering using one.
Nevertheless, under the hood what those Frameworks do is just using jquery to update the DOM accordingly as a response to events either emitted by the frontend or the backend.
If you are going to do this without the help of any framework (I strongly recommend against, your time will be much better used to learn one framework instead of emulating its behaviour), you should have a proper way of comunicating back and forth (ie: socket.io) and then a corresponding js in the frontend to either informing the backend of actions that happened in the frontend or parsing events from the backend and acting in response.
I hope this helps
What is the best way to persist user-generated data with NodeJS, Express, and MongoDB?
I'm building my first web-app using this stack (with bootstrap HTML/CSS and JS for the frontend) and I've realised that I need a data-binding solution. I'd rather avoid a complete rebuild of my front-end so it seems like React will be the best option, but I'd rather find out now if I'm missing something obvious.
The app will allow users to create 1-n documents, generate 1-n new components within them, and edit 1-n content-editable elements within those components.
I'm at the point where I've built the server, db, and frontend and the users and documents persist, but the components and their content does not.
The functionality I would like is that, when a user generates a new element or exits the contenteditable area of that element, any changes they have made will persist. I'd like to achieve this without a bazillion API calls.
Any assistance appreciated.
You may create page description in markdown and then render it to react components.
For example you can check https://www.gatsbyjs.org/ plus Remark Custopm blocks plugin - https://www.gatsbyjs.org/packages/gatsby-remark-custom-blocks/
I have recently started learning React and am trying to make a simple blogging app. I store the data (post content, comments etc.) in MongoDB and would like to render the content according to the route, such as, when I have a certain URL (like /blog/:username), I'd pull data from the database and then render a view with the data content.
Using Express, I am now using static html files ( express.static) as the view, yet this makes it impossible to render the content according to the requested route, such as:
/blog/:username/:article
It is possible with a template engine, like Jade, but Jade, as far as I know, does not work with React.
What is the correct way to make dynamic views using React while preserving the URL route structure?
Thank you
Generally speaking, there are several ways to achieve your goal. I'll sketch the one that I feel is the most natural approach when using React:
Create your blogging app with React
Use a frontend routing mechanism such as react-router to make React aware of the URL
Either fetch the data for each blog entry from the backend via an Ajax call each time the user hits a URL, or store the blog entry data in the frontend (e.g. using something like redux) and reuse it when required.
Does this make sense? If not, please keep asking...