alanbsmith/react-webpack-rails

A simple tool for getting up and running with React-Webpack in Rails.

React::Webpack::Rails

A simple installation tool for getting up and running with React + Webpack in Rails.

* This is still in the early stages of development, and is experimental. Feedback is appreciated, and pull requests are welcome.

OVERVIEW

This is a minimalist approach to integrating React and Webpack with Rails. There's nothing really hidden in the gem. The point is to be transparent about what is being added to your app and why.

There are several goals for this gem:

• Provide a lightweight gem for integrating React and Webpack to Rails
• Easy asset compiling for development and production
• Fluid development workflow
• Easy npm module integration
• single step server for development
• single asset compilation for deployment

INSTALLATION

Add this line to your application's Gemfile:

gem 'react-webpack-rails'

And then execute:

$ bundle

Or install it yourself as:

$ gem install react-webpack-rails

GENERATOR TOOL

* not currently supporting HAML

$ rails g react:webpack:install

WHAT THIS GENERATES

EMPTY DIRECTORIES

• client/components
• app/assets/webpack

BASE FILES

• webpack.config.js
• .babelrc
• app/helpers/react_helper.rb
• client/index.js
• Procfile
• lib/tasks/assets.rake

GEMS

• foreman

* you can skip immediate installation

NODE MODULES

• babel-core
• babel-loader
• babel-preset-es2015
• babel-preset-react
• classnames
• react
• react-dom
• webpack

* you can skip immediate installation

APPENDING WEBPACK WATCH TASK

• "watch": "webpack --watch --colors --progress"

APPENDING ASSETS INTO THE PIPELINE

• javascript_include_tag to app/views/layouts/application.html.erb
• Rails.application.config.assets.precompile += %w( bundle.js ) to config/initializers/assets.rb

DEVELOPMENT

The generator installs Foreman and adds a Procfile to fire up Webpack and the Rails server in a single command:

$ foreman start

You can also run these separately if you'd like.

npm run watch

rails server

If everything went well, you should be able to view your app at http://localhost:3000

You can add your components to client/components/ and be sure to list them in client/index.js

You can call components in the view with an erb tag for your components and props: <%= react_component :Dropdown, listItems: [1,2,3,4] %>

PRODUCTION

A rake task for precompiling the webpack assets is added by the generator. This essentially adds the Webpack/Babel transpiling to the precompilation task that runs when you deploy to production. So you should never need to have two separate build tasks.

CONTRIBUTING

Bug reports and pull requests are welcome on GitHub at https://github.com/alanbsmith/react-webpack-rails. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

LICENSE

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

react-webpack-rails's Issues

Sourcemaps

Hi,

I'm trying to integrate Sentry in my app, and it requires Sourcemaps to be served in a specific way : https://docs.sentry.io/clients/javascript/sourcemaps/

I'm having difficulty setting this up, has anyone done it before? Could it be part of the default configuration / documentation?

Thanks!

Add tests

I've never tested generators, but I need a way to verify functionality is solid before releasing a new gem version.

Add a changelog.md

For documenting updates and fixes.

React Hot Loader support

Is it on your roadmap to provide support for React Hot Loader 3 ?
https://github.com/gaearon/react-hot-loader/tree/next-docs/docs

Thanks !

Add a contributing.md

Support HAML

Overview

The install generator has trouble adding the javascript_include_tag if application.html has a .haml extension. The tag also needs to be written differently for HAML.

Why should this exist?

Supporting HAML allows for a more robust installation process.

Suggested Solution

There should be a check in inject_assets_into_pipeline for whether application.html has a HAML extension.

Check for preexisting foreman gem and Procfile

Overview

The install generator is currently adding foreman (and asking to bundle install) regardless of whether foreman is there already or not. It should skip this step of it already exists. It should also append tasks to the Procfile if one already exists.

Why should this exist?

Create a more robust installation process.

Suggested Solution

There should be a check for the foreman gem and/or a Procfile in the install_foreman method.