Server-side rendering (SSR) #870
Comments
|
@nicolazilio I have not tried to do this yet (from the server at least) although it seems like a worthy goal! I think you'll need to post the specific issues you're seeing and we can try working through them. It might help to publish an example repo here on github that we can use to troubleshoot. |
|
Sure, I've created a repository to get the ball rolling. Disclaimer: I am def not an expert in anything related to React, https://github.com/nicolazilio/ove-ssr-test. I've taken the basic set up for SSR from https://github.com/satansdeer/ssr-example, which does indeed work in my hands. When I try, blindly, to put your code for the OVE demo from here https://github.com/tnrich/ove-react-demo-repo in which could maybe be solved as described here https://stackoverflow.com/a/54263025/4222260. If I comment out the code that references I found a couple of possible solutions for this problem on StackOverflow but I don't know enough about the topic and I'd be changing stuff without understanding what I'm doing. Does this help at all? |
|
@nicolazilio I think you'll need to find a way to compile (using webpack or another bundler) the code from OVE into a server-safe version. You'll definitely run into a ton more issues unless there is some sort of compilation step. I was able to get past the error you posted above by editing the affected file in node_modules. I probably went through fixing ~20 errors (see details below for some of them) related to trying to run client code on the server before giving up trying to fix them manually. Not sure what options exist for doing that. You'll need to do some research it sounds like.
/Users/tnrich/Sites/ove-ssr-test/node_modules/@blueprintjs/core/lib/cjs/components/toast/toaster.js:67
container.appendChild(containerElement);
^
TypeError: container.appendChild is not a function TypeError: container.appendChild is not a function ReferenceError: window is not defined SyntaxError: Invalid left-hand side in assignment ReferenceError: window is not defined ReferenceError: window is not defined Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/tnrich/Sites/ove-ssr-test/node_modules/teselagen-react-components/node_modules/nanoid/index.js from /Users/tnrich/Sites/ove-ssr-test/node_modules/teselagen-react-components/lib/DataTable/index.js not supported. Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/tnrich/Sites/ove-ssr-test/node_modules/teselagen-react-components/node_modules/nanoid/index.js from /Users/tnrich/Sites/ove-ssr-test/node_modules/teselagen-react-components/lib/FormComponents/tryToMatchSchemas.js not supported. |
|
I thought that could be the case indeed. I've tried to do what you suggested, i.e. compile the OVE code with webpack, but I still run into tons of errors, which I don't really understand, unsurprisingly because I'm really not an expert in anything related to React. I suspect that trying to do SSR with OVE is probably a lot more complicated than we think :). That said, maybe somebody with more experience in this topic could do it. My next question then is: would/could it maybe be easier to extract the part of OVE that renders the SVG for the circular view and turn it into, for example, a self-standing node package? I suppose I'm looking at the problem in a very selfish manner, as my interest is to save programmatically the circular view as a file. |
|
I thought that could be the case indeed. I've tried to do what you suggested, i.e. compile the OVE code with webpack, but I still run into tons of errors, which I don't really understand, unsurprisingly because I'm really not an expert in anything related to React. I suspect that trying to do SSR with OVE is probably a lot more complicated than we think :). My next question then is: would/could it maybe be easier to extract the part of OVE that renders the SVG for the circular view and turn it into a self-standing node package? I suppose I'm looking at the problem in a very selfish manner, as my interest is to be able to save the circular view SVG programmatically. |
|
Hey @nicolazilio ya, your instinct is correct that it would indeed be easier to "to extract the part of OVE that renders the SVG for the circular view and turn it into a self-standing node package". I've started that work for you on the example repo you set up for me. I think it would be cool if you took that work and turned it into its own little package - maybe something like Lemme know if you're able to run my PR (you can merge it into yours) and if it solves your issue - helle-ulrich-lab/ove-circularview-svg#1 (comment) |
|
@tnrich, awesome, thanks a bunch! This looks like something I can, hopefully, tackle on my own. I've merged your PR into the main branch and will keep you updated on the progress. |
Hi @tnrich,
I am interested in adding the circular plasmid view that OVE creates to a 'static' html or pdf file. From what I have read around, this is theoretically possible using server-side rendering of the OVE app to create the relevant svg (?) element, which can then be used wherever. Have you tried to do this at all? And, if so, have you been successful? I have been playing around a bit, and I keep getting errors that seems to be, unsurprisingly, related to not running the app in an actual browser. Or maybe you have a better solution for my problem?
Thank you very much in advance!
Nicola
The text was updated successfully, but these errors were encountered: