React Sinatra

React on Sinatra Integration, Server Side Rendering
Alternatives To React Sinatra
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Hamlit9761,804144 months ago117February 03, 2022otherRuby
High Performance Haml Implementation
Sinatra Partial105754216 years ago11July 28, 20173otherRuby
Just the partials helper in a gem. That is all.
Sinatra Prawn46
212 years ago3August 10, 20145mitRuby
Sinatra extension to add support for pdf rendering with Prawn templates.
React Sinatra37
5 years ago2January 19, 20171mitRuby
React on Sinatra Integration, Server Side Rendering
Tilt Jbuilder2246266 years ago12January 30, 20163mitRuby
Support for rendering Jbuilder templates in Tilt
Sinatra Markaby9
14 years ago3August 10, 20141mitRuby
Sinatra plugin to enable markaby (.mab) template rendering
Cells Sinatra9
13 years agoRuby
View Components for Sinatra.
Ruby Oc5317 years ago5November 10, 20152mitRuby
OpenComponents for Ruby
Tumblr Dashboard Rss Sinatra App5
12 years agoRuby
Sinatra application for rendering tumblr dashboard rss
Chuck Renderer4
6 years ago2gpl-3.0CSS
Docker image for ChucK rendering as a service
Alternatives To React Sinatra
Select To Compare

Alternative Project Comparisons


Build Status Dependency Status Gem Version GitHub issues GitHub license

react-sinatra makes it easy to use React in your Sinatra and Padrino application.

Please see a sample.


Add this line to your application's Gemfile:

gem 'react-sinatra'

And then execute:

$ bundle

Or install it yourself as:

$ gem install react-sinatra


react-sinatra does not:

  • transform .jsx files or JSX syntax.
  • transpile asset using babel.
  • support asset-pipeline.
  • have generator for registering this extension.

I think those features should be solved by using webpack, or other build tools.


Sinatra Plug-in

It's easy to register react-sinatra in your application, next section will describe three steps for introduction.

1. Add react-sinatra and runtime into your Gemfile

source ''

gem 'react-sinatra'
gem 'execjs'
gem 'mini_racer' # also `therubyracer` may be available, but mini_racer is simpler and faster.

2. Register react-sinatra and configure.

class App < Sinatra::Base
  register React::Sinatra

  configure do
    React::Sinatra.configure do |config|
      # configures for bundled React.js
      config.use_bundled_react = true
      config.env = ENV['RACK_ENV'] || :development
      config.addon = true

      # The asset should be able to be compiled by your server side runtime.
      # react-sinatra does not transform jsx into js, also ES2015 may not be worked through.
      config.asset_path = File.join('client', 'dist', 'server.js')
      config.runtime = :execjs

3. Use react_component on your view or sinatra application.

<%= react_component('Hello', { name: 'namusyaka' }, prerender: true) %>
get '/:name' do |name|
  component = react_component('Hello', { name: name }, prerender: true)
  # ...

The react component must be able to be referred from global scope, so you should be careful for your asset javascript. In the above example, you need to provide an asset that puts the component called Hello in a state that it can be referred to from the global.

class Hello extends React.Component {
  render() {
    return (
      <div className="hello">
        Hello, {}!

global.Hello = Hello;


Bundled React.js

You can use bundled React.js by specifying configurations.

React::Sinatra.configure do |config|
  config.use_bundled_react = true # Defaults to false

You can also specify addon and env for each environments.

React::Sinatra.configure do |config|
  config.addon = false # Defaults to false
  config.env = ENV['RACK_ENV'] || :development


If you want to use your own react, you must include React.js and react-server source code in the asset.

React::Sinatra.configure do |config|
  config.asset_path = 'client/dist/*.js'


  • Support nodejs as a runtime


Bug reports and pull requests are welcome on GitHub at namusyaka/react-sinatra.


The gem is available as open source under the terms of the MIT License.

Popular Rendering Projects
Popular Sinatra Projects
Popular Graphics Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.