Big picture issues in using react with web2py

[Ian W. Scott]

I'd like to use react to build a relatively freestanding, single-page front-end interface that communicates with web2py for dbio and heavier processing. But I'm having a hard time wrapping my mind around how to approach integrating them. I realize that I'm running into some gaps in my knowledge that may make me ask some foolish questions here. So please bear with me...

I notice the project here: https://groups.google.com/forum/?nomobile=true#!searchin/web2py/react|sort:date/web2py/OrWvYqU2yOw/lDHd9bfpBAAJ. But it seems like in that proof-of-concept web2py is doing a lot of work to present the html/js for the react components. I'd like to do something simpler (?) where the index.html and all of the client-side js are just served as static resources. Web2py would only get involved when the static js makes an ajax call (using fetch). Does that sound do-able? Are there gotchas that make that approach impractical?

I've been developing small free-standing react apps using the npm dev and build tools. But am I right that if I integrate with web2py I have to abandon those tools and use a custom webpack setup to do things like building the production-ready versions of the js files?

Thanks for your help. 

[Leonel Câmara]

That seems perfectly doable. It's very much ok to use web2py simply to make an API for react to call.

[Ian W. Scott]

Okay. Good. Is there documentation somewhere on how to serve a static index page? I can't seem to find it in the book.

[Val K]

As far as I understand, all files that is placed in the 'static' folder are served as static, just don't forget to specify an extension - '.../your_w2p_app/static/index.html'

[Leonel Câmara]

I wouldn't use web2py to serve the static page just use nginx directly.

[Anthony]

You don't necessarily need a custom webpack setup. Just dump the production distribution produced by your build tools into the web2py /static folder and serve from there (actually, you can serve the static assets from anywhere, as long as you configure your web server properly).

One thing to consider is how you are handling client-side routing. If you are using the history API in the browser, then when a request is made for a client-side route, web2py will need to distinguish that from a server-side route and return the React index.html static page. Again, you can configure your web server to handle this -- it will need to know which URLs to route to web2py, which are React static assets, and then assume all other routes are client routes and simply return the index.html page in that case. That's probably the most efficient option, but you could also have web2py handle it. First, add something like this in the first model file:

if request.controller == 'default' and not (request.is_shell or request.is_scheduler):
    request.function = 'index'
    # Skip the remaining models, as we are only serving static HTML.
    response.models_to_run = []

The idea is to have only an index() function in the default.py controller, and use that to serve the static index.html file. Put all of you web2py actions in other controllers, and make sure none of your client routes start with a path segment that matches any of your web2py controllers. When web2py receives a request for a client route, because the first segment of the path will not match any controllers, it will assume the default.py controller (you should set up routes.py with 'default' as the default controller in the router). The above code catches that case and then sets the function to 'index' to force the return of the index.html file (it also skips running the remaining model files, as they are not necessary when simply returning the static index.html file).

In the default.py controller, then do something like this:

import os

def index():
    response.view = os.path.join('..', 'static', 'index.html')
    return dict()

The above simply sets the index.html file in the /static folder as the view for this function, so web2py ultimately returns index.html as the response (presumably it is not actually a web2py view with any Python template code, but web2py will still execute and return it -- and you could include some web2py template code if needed). You could use the @cache decorator to cache the output of this function for some time to speed things up.

Anthony

[Ian W. Scott]

Thanks Anthony. That's very helpful.