Skip to main content

A microframework for Bottle+React projects.

Project description




*NOW SUPPORTS FLASK!* See examples/hello_world/


This library allows you to return react components from either Bottle or Flask. Originally created for

Example (Hello World)

Assume you have a normal JSX file hello_world.jsx:

var HelloWorld = React.createClass({
  render: function() {
    return (
      <div className='hello_world'>
        <h1>Hello {}!</h1>
          Thanks for trying bottle-react!
bottlereact._register('HelloWorld', HelloWorld)

And some python code:

app = bottle.Bottle()
br = BottleReact(app)

def root():
  return br.render_html(

When your route is called the react component will be rendered. See examples/hello_world for details.


Why did we develop this? We had several goals:

  • [x] Don’t cross-compile javascript during development.

Compiling with webpack is too slow for non-trivial applications. (One of the niceties about web developement it alt-Tab/ctrl-R to see your changes.) And it causes too many subtle bugs between dev and prod that waste developer resources.

  • [x] Don’t merge all javascript into one ginormous bundle.

Making your user download a 1.5Mb kitchensink.min.js every deployment is horrible. And 99% of it isn’t used on most pages. Loading 40kb total from multiple resources with HTTP keep-alive takes just a few ms per file and is much faster in practice.

  • [x] React components should be composable from Python.

A lot of our routes look like this:

def something():
  user = bottle.request.current_user
  return br.render_html(
    br.HvstApp({'user':user.to_dict()}, [

The React component HvstApp (which renders the title bar and left nav) is taking two parameters. The first is a dict that will be passed as the JSON props to the React component. The second is a list that will become the children. This list can (and usually does) contain other React components.


sudo pip install bottle-react

NGINX Integration

By default (in production mode) bottle-react writes to /tmp/bottlereact/hashed-assets/. To make NGINX serve these files directly, use the following:

location ^~ /__br_assets__/ {
  alias /tmp/bottlereact/hashed-assets/;
  expires max;

Server Side Rendering

To use server side rendering, please install the npm package `node-jsdom <>`__ with:

$ sudo npm install -g node-jsdom

Then pass either True or a callable into the render_server parameter. For example:

def render_server():
  ua = bottle.request.environ.get('HTTP_USER_AGENT')
  return util.is_bot(ua)

BTW… Before enabling it for everyone, run some benchmarks. We find that it has very little impact on total page load time, at a considerable CPU expense and double the downloaded HTML size. So we only do it for search bots (as you can see in the example above).

You will also likely have to shim some missing browser features. At minimum, React likes to put itself under window when run inside nodejs, so we have:

// react in nodejs will put itself under window
if(typeof React == 'undefined') {
  React = window.React;

In our application.js, since all our code expects it to be a global. Likewise, for things node-jsdom hasn’t yet implemented, you’ll likely find a few checks are needed, like:

if (typeof DOMParser=='undefined') {
  // i guess we're not using DOMParser inside nodejs...


See the full documentation.

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for bottle-react, version 16.2.4
Filename, size File type Python version Upload date Hashes
Filename, size bottle-react-16.2.4.tar.gz (10.3 kB) File type Source Python version None Upload date Hashes View hashes

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page