Product library rails server10/7/2023 ![]() Further we can send HTML content over email. It will return a JSON response which will have the HTML code of the report. ![]() For rendering React Component on the server side we need to pass the file path of the react component and props if required. It acts as a binary which will do the work of rendering react components. It is based on react-stdio which supports server-side rendering irrespective of server-side technology. So we started exploring Ruby Gems which support server-side rendering with React. We would need to use server-side rendering. Soon we realized that our solution cannot require browser interaction. At the same time, we would still need a user logged in to the browser to perform this action, which defeats the purpose of email delivery. After adding this extension to the browser, we would be able to capture any screen in image(png/jpg) format.Īgain this solution requires no development but suffers from some of the previous scaling and scheduling issues. Example: Full Page Screen Capture in Chrome. FrontEnd Print Button:Īfter doing some search, we found out there are some browser extensions available which produce a full image of an opened page. This also suffers from the inability to fully capture a scrollable page, so we had to drop this idea. It’s not possible for a person to do this. Also what if a user wants a report at a scheduled time or sent periodically?Įxample : Every week at 8 pm. A user needs to be present with a system who will do a screen capture as an image and attach it over the mail. It was the simplest solution we had and it requires user input. Now we will go through the details of each solution. Server-Side Rendering with Node server: Use serverside rendering using ReactDOMServer and headless browser protocol to render HTML and JS and generate a pdf. Ruby Gem: There is a ruby gem which can render a report component on the server side within Rails, generate its HTML and send it as an email body.Ĥ. FrontEnd Print Button: In report’s UI, add a Print Button which will convert react component into HTML/PDF page.ģ. Print Screen: Print the report using print screen and send it as an attachment.Ģ. And we came across following options and explored them one by one until we succeeded in achieving our goal.ġ. We decided to look at other possible solutions instead of writing the same code twice. Increases the time for designing a report which impacts product delivery. The product code base will have duplicate code which violates the DRY principle for software development.Ģ. That means we would have had 2 views of each report, one written in HTML and another in ReactJS.ġ. To achieve attaching the same report in the email, we would have to design an HTML template for every report. In all of our products, we use React for the front-end and it does the heavy lifting of rendering the report on the browser. For scheduling, we use Sidekiq, but our main challenge was: how to execute/calculate the report on the server side (without opening a browser) and send it over email. So our task was to write a utility which periodically sends a particular report to a user via email on a daily basis or at a defined scheduled time. Instead, they prefer scheduled email communication which will send a report based on scheduled time and repeat it forever until unless a user stopped this scheduled job. If we further drill down the hierarchy, then the Production Manager will be the one who wants to look into live production data.įor live data, Production manager can open the Live Dashboard and monitor it, but the user who wants to see a consolidated report won’t prefer to login into Product and check out a report. Most of the time, report design and information vary based on the user’s role who is going to consume it.Įxample: A Director level person is interested in a consolidated report of a week, whereas a Department Head is interested in the statistics of a single day and Quality Manager is keen about shift data. We work on an IoT product focusing on manufacturing industries and build analytics reports. This post is co-authored by Hricha Kabir, my colleague at Altizon Systems. By Sitaram Shelke How to set up server-side rendering in React with Rails using Puppeteer
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |