Managing 'window' object in Isomorphic App with ReactJS and Flask Python

flask reactjs webpack serverside-javascript isomorphic-javascript
Ibrahim picture Ibrahim · Jun 24, 2015 · Viewed 9.2k times · Source

I am developing an application with Flask Backend with ReactJS front. ReactJS app has been developed and bundled with webpack.

Everything works fine with client side rendering which is bundled with webpack.

I am now trying to add server side rendering with python-react .

But problem is, I have to share some variables to my ReactJS app via Jinja2 template in base template index.html which has the reactjs root component node <div id='react-node'></div>.

I had to send my routes and config to my application via jinja2 template like below ,

//index.html

<!doctype html>
<html>
...
...

<script type='text/javascript'>
  var STATIC_IMAGE_ROOT = "{{ url_for('static', filename='img/') }}";
  var ROUTES = { ... };
...
</script>

</html>

All the above js variables are being set to global window object .

But when I am trying to render the component in python, it throws exception for window object ReactRenderingError: react: ReferenceError: window is not defined .

What is the best way to solve this issue ?

Answer

Mark picture Mark · Jun 24, 2015

There is no window global when rendering on the server. You can create a fake window, first checking if the window exists:

if (typeof(window) == 'undefined'){
    global.window = new Object();
}

Alternatively, you can use jsdom, or a similar library to create a fake DOM.

Related questions

Serving a front end created with create-react-app with Flask

I have a Flask back-end with API routes which are accessed by a React single page application created using create-react-app. When using the create-react-app dev server, my Flask back end works. I would like to serve the built (using npm …

Read More
How to set React to production mode when using Gulp

I need to run React in production mode, which presumably entails defining the following somewhere in the enviornment: process.env.NODE_ENV = 'production'; The issue is that I'm running this behind Tornado (a python web-server), not Node.js. I also …

Read More
Flask and React routing

I'm building the Flask app with React, I ended up having a problem with routing. The backend is responsible to be an API, hence some routes look like: @app.route('/api/v1/do-something/', methods=["GET"]) def do_something(): …

Read More