search

owid / owid-grapher

A platform for creating interactive data visualizations
https://ourworldindata.org
MIT License
1.38k stars 229 forks source link

Problems with serving the website through web server #935

Closed tamas-ferenci closed 3 years ago

tamas-ferenci commented 3 years ago

After installing owid-grapher on an Ubuntu 18.04 machine, and running yarn startAdminServer, I can log in at localhost:3030/admin, however, a completely blank page is shown afterwards.

This is shown at the terminal:

:~/owid-grapher$ yarn startAdminServer
yarn run v1.22.10
$ node ./itsJustJavascript/adminSiteServer/app.js
IntersectionObserver not available; interactive embeds won't load on this page
WORDPRESS_DB_NAME is not configured -- continuing without Wordpress DB
WORDPRESS_API_URL is not configured -- continuing without Wordpress API
owid-admin server started on http://localhost:3030

The localhost:3030 site is also very strange:

kép

and goes on like this with horribly large icons.

It seems to me that this problem is related to how the website is served through Apache. Here is the raw content of the blank page after admin login:

<!doctype html><html lang="en"><head><title>owid-admin</title><meta name="description" content=""/><link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,700i|Playfair+Display:400,700&amp;display=swap" rel="stylesheet"/><link href="http://localhost:8090/commons.css" rel="stylesheet" type="text/css"/><link href="http://localhost:8090/admin.css" rel="stylesheet" type="text/css"/></head><body><div id="app"></div><script src="http://localhost:8090/commons.js"></script><script src="http://localhost:8090/admin.js"></script><script type="text/javascript">
        window.isEditor = true
        window.admin = new Admin({ username: "Admin User", isSuperuser: true, settings: {"ENV":"development","GITHUB_USERNAME":"owid-test"}})
        admin.start(document.querySelector("#app"), 'master')
</script><iframe src="https://ourworldindata.org/identifyadmin" style="display:none"></iframe></body></html>

Obviously it won't work as it is referring to localhost (while I view through the web). Here is the relevant Apache configuration:

<VirtualHost *:80>

  ProxyPreserveHost On
  ProxyRequests Off
  ProxyPass / http://localhost:3030/
  ProxyPassReverse / http://localhost:3030/

</VirtualHost>
mlbrgl commented 3 years ago

hi @tamas-ferenci, it looks like you're not running webpack (which serves the SPA /admin as well as the CSS / JS on localhost). Are you running all three commands described in https://github.com/owid/owid-grapher#development-server:

yarn startTscServer
yarn startAdminServer
yarn startWebpackServer

?

tamas-ferenci commented 3 years ago

Thanks for your response @mlbrgl !

I did start webpack; more specifically, I used yarn startTmuxServer. Here is what is see:

kép

mlbrgl commented 3 years ago

That looks good to me (for a local set up)! As I understand it, you're now running the local dev environment on a remote server, which we don't really support.

If you want to go down that route, then you might be able to proxy webpack-dev-server on localhost:8090 through another path (you'll need to change some of the logic here: https://github.com/owid/owid-grapher/blob/c0acc58aa8dc3a7c69353bd09939f2a3b6c234e0/site/webpackUtils.tsx#L11), although I woundn't recommend this as a production set up.

The other option is to compile and bundle your code for production. We use yarn buildAndDeploySite [target], which will require some adjustments outside of our environment. yarn buildTsc and yarn buildWebpack will already take you some of the way, and I invite you to take a look at https://github.com/owid/owid-grapher/blob/c0acc58aa8dc3a7c69353bd09939f2a3b6c234e0/baker/Deployer.ts#L155 for further instructions.

tamas-ferenci commented 3 years ago

Thanks! I absolutely do not insist on the "local dev on remote server" solution.

Is my understanding correct that the proper way would be to use production environment? If so, do you have a documentation on setting up the production environment? (I am afraid https://github.com/owid/owid-grapher doesn't really talk about this.) I don't really see what should be the procedure here... (especially together with Apache).

mlbrgl commented 3 years ago

Hi @tamas-ferenci, I discussed this in more detail internally and as you noticed, we're not yet at the point where Grapher can be used in production for publishing charts, independently from our site. It is our intention to better decouple these in the future but right now our platform can only run in local dev environments for experimentation purposes.

I'll go ahead and close this for now, but don't hesitate to continue the conversation if you have any other questions.

Have a good w-e!

bryanwaddington commented 3 years ago

The other option is to compile and bundle your code for production. We use yarn buildAndDeploySite [target], which will require some adjustments outside of our environment. yarn buildTsc and yarn buildWebpack will already take you some of the way,

I'm trying to deploy the admin server only at the moment. Can you tell me, buildAndDeploySite is for the OWID main site and not the admin server, is that correct?

bryanwaddington commented 3 years ago

Is my understanding correct that the proper way would be to use production environment? If so, do you have a documentation on setting up the production environment? (I am afraid https://github.com/owid/owid-grapher doesn't really talk about this.) I don't really see what should be the procedure here... (especially together with Apache).

Hi @tamas-ferenci I was wondering if you had made any further progress with this? I'm trying to deploy the admin server and whilst I'm part successful I'm still finding that localhost:3030 is still being referenced for some things rather than being picked up from the environment variables. I'm somewhat stuck at the moment so wondering if you'd made any progress that you could share at all please?