Package: bottle-react
imageBottle-React*NOW SUPPORTS FLASK!*Seeexamples/hello_world/run_flask.py.DescriptionThis library allows you to return react components from either Bottle or
Flask. Originally created forhttps://www.hvst.com/.Example (Hello World)Assume you have a normal JSX filehello_world.jsx:varHelloWorld=React.createClass({render:function(){return(<divclassName='hello_world'><h1>Hello{this.props.name}!</h1><div>Thanksfortryingbottle-react!</div></div>);}})bottlereact._register('HelloWorld',HelloWorld)And some python code:app=bottle.Bottle()br=BottleReact(app)@app.get('/')defroot():returnbr.render_html(br.HelloWorld({'name':'World'}))When your route is called the react component will be rendered. Seeexamples/hello_worldfor details.PrinciplesWhy did we develop this? We had several goals:[x] Don’t cross-compile javascript during development.Compiling withwebpackis too slow for non-trivial applications.
(One of the niceties about web developement italt-Tab/ctrl-Rto
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.5Mbkitchensink.min.jsevery
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:@app.get('/something')defsomething():user=bottle.request.current_userreturnbr.render_html(br.HvstApp({'user':user.to_dict()},[br.HelloWorld({'name':user.name}),]))The React componentHvstApp(which renders the title bar and left
nav) is taking two parameters. The first is adictthat will be
passed as the JSON props to the React component. The second is alistthat will become the children. This list can (and usually does)
contain other React components.Installsudopipinstallbottle-reactNGINX IntegrationBy default (in production mode)bottle-reactwrites 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 RenderingTo use server side rendering, please install the npm package`node-jsdom<https://www.npmjs.com/package/node-jsdom>`__ with:$ sudo npm install -g node-jsdomThen pass eitherTrueor a callable into therender_serverparameter. For example:defrender_server():ua=bottle.request.environ.get('HTTP_USER_AGENT')returnutil.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 underwindowwhen run insidenodejs, so we have:// react in nodejs will put itself under windowif(typeofReact=='undefined'){React=window.React;}In ourapplication.js, since all our code expects it to be a global.
Likewise, for thingsnode-jsdomhasn’t yet implemented, you’ll
likely find a few checks are needed, like:if(typeofDOMParser=='undefined'){// i guess we're not using DOMParser inside nodejs...}DocumentationSee thefull documentation.