Deploying Webviewer HTML

Technical Support WebViewer
, ,
1

WebViewer Version: “name”: “webviewer-html-annotate-proxy”,
“version”: “1.0.0”,

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? No
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? No

Please give a brief summary of your issue:
I have been using Webviewer HTML and have been able to open HTML pages successfully. However, once I have deployed the application to Vercel, the HTML pages do not render any more.

This is the error message I get in the console: main.js:1 Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘http://localhost:3100’) does not match the recipient window’s origin (‘https://frontend-sigma-ashy.vercel.app’).
Please describe your issue and provide steps to reproduce it:

Please provide a link to a minimal sample where the issue is reproducible:

1 Like
2

Hello rpswadhwa,

If you follow our sample GitHub - PDFTron/webviewer-html-annotate-proxy, you’ll need to deploy a server component separately:

  • The proxy server should sit on a different domain than the client (in this case WebViewer-HTML). On localhost, it’s defaulted to localhost:3100. This line remains localhost, but once deployed, you would get a URL for the server.

  • You’ll need to whitelist the client URL in the server configuration, since they need to be on different domains. On localhost, localhost:3000 is whitelisted here, see documentation.

  • There should also be a COOKIE_SETTING in the server configuration if the server is deployed, see here.

  • Once deployed, on client you’ll need to replace the server URL in this line.

  • Check out our WebViewer-HTML online demo here https://showcase.apryse.com/webviewer-html.

Disclaimer: Our proxy server is open-sourced, the project can be forked and customized to suit your needs.

Hope this helps!

Regards,
Maggie V.

1 Like
3

Thanks Maggie for the detailed instructions. Just confirming my understanding of your instructions plus some details about my deployment: My front end is Vercel, api server is heroku. db server is Jawdb and am planning to put HTML proxy on heroku as well.

  • The proxy server should sit on a different domain than the client (in this case WebViewer-HTML). On localhost, it’s defaulted to localhost:3100. This line remains localhost, but once deployed, you would get a URL for the server. [My response]: Will this be my heroku HTML proxy server url?
  • You’ll need to whitelist the client URL in the server configuration, since they need to be on different domains. On localhost, localhost:3000 is whitelisted [My response] This is where I will put the vercel url for my app.
  • There should also be a COOKIE_SETTING in the server configuration if the server is deployed, [see here ] [My response]: in the attached example, I will update by server root to heroku HTML server and leave the rest as is.
  • Once deployed, on client you’ll need to replace the server URL. [My response] This is my vercel app and I will change this to the heroku HTML Proxy URL.

Please let me know if I understood your instructions accurately.
Thanks

1 Like
4

Hi rpswadhwa,

Not sure about the API server, as long as the WV-HTML proxy server (link) sits on its own domain, since it acts as a middleman to mirror incoming requests to the website you’re trying to load.

This is a working configuration example for the proxy server:

// whitelist can be a string or an array of string. Read [more here](https://expressjs.com/en/resources/middleware/cors.html#configuration-options)
//
const whitelist = [
    "http://localhost:3000",
    // other URLs where the WV-HTML client will sit at
  ];
 
const OPTIONS = {
    SERVER_ROOT: 'http://localhost',
    PORT: process.env.PORT || 8080,
    CORS_OPTIONS: { origin: whitelist, credentials: true },
    COOKIE_SETTING: { sameSite: 'none', secure: true },
    ALLOW_HTTP_PROXY: false,
};

Once deployed, you should be able to obtain a URL, which WV-HTML can then use to connect to the live proxy server. Please read more here on how to set up an Express + Node JS server.

Hope this helps!

Regards,
Maggie V.

1 Like
5

Thanks Maggie,
A quick clarification regarding options: SERVER_ROOT: ‘http://localhost’. Considering that I don’t have any installation on my laptop, I am assuming this needs to be changed as well. What should be the value here?
And, can you please confirm that on my react client, I should change the value of const PATH = http://${SERVER_ROOT}:${PORT}; to where my HTML proxy server is installed. correct?
Thanks
Rajan

1 Like
6

Hi Maggie,
A quick update. I installed the html proxy server successfully on heroku and can see in the logs that the server is running. However, when I make a request from the react client (on vercel), I get a 400 error on my html proxy server saying that that the request is bad. Here is how my request looks like:

https://htmlproxyv1-xyz.herokuapp.com/pdftron-proxy?url=https://d18rn0p25nwr6d.cloudfront.net/CIK-0000320193/386e8c01-2795-4676-866f-9c816f935a42.html.

Please note that this request works fine when I use the html proxy server on my localhost:3100. Also, I have out in the options clearly defining the origin as my vercel client.

Please let me know if you have any guidance here.

Thanks
Rajan

1 Like
7

Hi rpswadhwa,

If the request works on your local server but not on the production server, then it is likely due to a deployment issue.

You can check our live WV-HTML demo here https://showcase.apryse.com/webviewer-html and look at the requests in the Network tab to have an idea.

I was able to proxy the URL https://d18rn0p25nwr6d.cloudfront.net/CIK-0000320193/386e8c01-2795-4676-866f-9c816f935a42.html on our demo, although the page isn’t fully rendered, as mentioned in the disclaimer https://github.com/PDFTron/webviewer-html-proxy-server#disclaimer.

Regards,
Maggie V.

1 Like
8

Hi Maggie,
Thanks for your response.
I have tried following all your instructions as per the documentation as well your instructions in the email. I am able to successfully deploy the server, but an getting 400 error. And this is for a website like cnn.com.
I am really struggling here, as the documentation around this is not as extensive as Apryse has for rest of its functionality.
If there is any additional help you can provide by looking at my earlier responses, that will be mighty helpful. I have pretty much tried everything, so am really stuck here. And without this, I am not able to go live.
Raj

1 Like
9

Hi rpswadhwa,

Apologies for the delay.
Please create a support ticket here so I can better assist you.

Regards,
Maggie V.

1 Like