an example app for using Sinatra with React and Webpack
for Heroku deployment
This is a simple starter to get you up and running with React & Sinatra. This is intended to provide:
This starter has been a surprisingly valuable tool. Sinatra provides a really simple web framework for serving our React frontend. You can quickly add some API endpoints (and/or GraphQL) and connect ActiveRecord. We get all the benefits of using Ruby's simple syntax and predicability, and React's powerful rendering.
$ bundle install
$ npm install
or $ yarn
$ npm run dev
or $ yarn dev
http://localhost:8080
in your browserWhen you run npm run dev
, webpack is transpiling all your JS and CSS into a ghost file, lib/app/public/bundle.js
. It then serves up the HTML file, lib/app/views/index.html
on a ghost Express server on port 8080.
That's correct. To use the Puma server for Sinatra with the transpiled assets, take a look at the Production Build section
To run the linter once:
$ npm run lint
// or
$ yarn lint
To run the watch task:
$ npm run lint:watch
// or
$ yarn lint:watch
To run the tests:
$ npm test
// or
$ yarn test
$ npm run build
or $ yarn build
ruby lib/app.rb
(We're using Puma by default)This creates a transpiled asset file (bundle.js
) of your JS and CSS in the lib/app/public/
directory. This is great for production, but not so hot for development workflow as you would need to transpile every time you made a change to the JS.
This app is set up for deployment to Heroku!
This assumes you have already have a Heroku account and have the Heroku CLI installed
🚨 Be sure to run the build script before deploying. 🚨
$ heroku login
$ heroku create -a name-of-your-app
$ git push heroku master
$ heroku open
If you're unfamiliar with Heroku deployment (or just need a refresher), they have a really great walkthrough here.
This app has been updated to use React v15.5 and Webpack 2.3! 🎉
Major Changes:
Minor Changes:
Initial release. Basic setup for a React + Sinatra integration