Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

removed options from generator #364

Merged
merged 1 commit into from
Apr 8, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,19 @@ All notable changes to this project will be documented in this file. Items under
Contributors: please follow the recommendations outlined at [keepachangelog.com](http://keepachangelog.com/). Please use the existing headings and styling as a guide, and add a link for the version diff at the bottom of the file. Also, please update the `Unreleased` link to compare to the latest release version.
## [Unreleased]

## [5.2.0] - 2016-04-08
##### Added
- [React 15.0] Added React 15.0 to react_on_rails. See [#379](https://github.com/shakacode/react_on_rails/pull/379) by [brucek](https://github.com/brucek).

##### Removed
- Generator removals to simplify installer. See [#363](https://github.com/shakacode/react_on_rails/pull/363) by [jbhatab](https://github.com/jbhatab).
- Removed heroku from installer.
- Removed bootstrap from generator.
- Removed express server from generator.
- Removed hot module replacement from generator.
- Removed ruby and js linting from generator.
- Documentation related to installer options have been added to separate documentation files.

## [5.1.1] - 2016-04-04
##### Fixed
- [Security] Address failure to sanitize console messages when server rendering and displaying in the browser console. See [#366](https://github.com/shakacode/react_on_rails/pull/366) and [#370](https://github.com/shakacode/react_on_rails/pull/370) by [justin808](https://github.com/justin808)
Expand Down
77 changes: 1 addition & 76 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
[![Build Status](https://travis-ci.org/shakacode/react_on_rails.svg?branch=master)](https://travis-ci.org/shakacode/react_on_rails) [![Dependency Status](https://gemnasium.com/shakacode/react_on_rails.svg)](https://gemnasium.com/shakacode/react_on_rails) [![Gem Version](https://badge.fury.io/rb/react_on_rails.svg)](https://badge.fury.io/rb/react_on_rails) [![npm version](https://badge.fury.io/js/react-on-rails.svg)](https://badge.fury.io/js/react-on-rails) [![Code Climate](https://codeclimate.com/github/shakacode/react_on_rails/badges/gpa.svg)](https://codeclimate.com/github/shakacode/react_on_rails) [![Coverage Status](https://coveralls.io/repos/shakacode/react_on_rails/badge.svg?branch=master&service=github)](https://coveralls.io/github/shakacode/react_on_rails?branch=master)

# NEWS
* 5.1.1 has shipped! Please see the [CHANGELOG.md](./CHANGELOG.md) for details on the latest release and any breaking changes.
* [New slides on React on Rails](http://www.slideshare.net/justingordon/react-on-rails-v4032).
* 2016-02-28: We added a [Projects page](./PROJECTS.md) and a [Kudos page](./KUDOS.md). Please edit the page your project or [email us](mailto:[email protected]) and we'll add you. We also love stars as it helps us attract new users and contributors.
* *See [NEWS.md](NEWS.md) for the full news history.*
Expand Down Expand Up @@ -74,23 +73,11 @@ Please see [Getting Started](#getting-started) for how to set up your Rails proj
- [Globally Exposing Your React Components](#globally-exposing-your-react-components)
- [ReactOnRails View Helpers API](#reactonrails-view-helpers-api)
- [ReactOnRails JavaScript API](#reactonrails-javascript-api)
- [Hot Reloading View Helpers](#hot-reloading-view-helpers)
- [React-Router](#react-router)
+ [Generator](#generator)
- [Understanding the Organization of the Generated Client Code](#understanding-the-organization-of-the-generated-client-code)
- [Redux](#redux)
- [Multiple React Components on a Page with One Store](#multiple-react-components-on-a-page-with-one-store)
- [Using Images and Fonts](#using-images-and-fonts)
- [Bootstrap Integration](#bootstrap-integration)
+ [Bootstrap via Rails Server](#bootstrap-via-rails-server)
+ [Bootstrap via Webpack HMR Dev Server](#bootstrap-via-webpack-hmr-dev-server)
+ [Keeping Custom Bootstrap Configurations Synced](#keeping-custom-bootstrap-configurations-synced)
+ [Skip Bootstrap Integration](#skip-bootstrap-integration)
- [Linters](#linters)
+ [JavaScript Linters](#javascript-linters)
+ [Ruby Linters](#ruby-linters)
+ [Running the Linters](#running-the-linters)
+ [Developing with the Webpack Dev Server](#developing-with-the-webpack-dev-server)
+ [Adding Additional Routes for the Dev Server](#adding-additional-routes-for-the-dev-server)
+ [Migrate From react-rails](#migrate-from-react-rails)
+ [Additional Reading](#additional-reading)
Expand All @@ -105,18 +92,14 @@ Please see [Getting Started](#getting-started) for how to set up your Rails proj
Like the [react-rails](https://github.com/reactjs/react-rails) gem, React on Rails is capable of server-side rendering with fragment caching and is compatible with [turbolinks](https://github.com/turbolinks/turbolinks). Unlike react-rails, which depends heavily on sprockets and jquery-ujs, React on Rails uses [webpack](http://webpack.github.io/) and does not depend on jQuery. While the initial setup is slightly more involved, it allows for advanced functionality such as:

+ [Redux](https://github.com/reactjs/redux)
+ [Webpack dev server](https://webpack.github.io/docs/webpack-dev-server.html) with [hot module replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html)
+ [Webpack optimization functionality](https://github.com/webpack/docs/wiki/optimization)
+ [React Router](https://github.com/reactjs/react-router)

See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) for an example of a live implementation and code.

## Why Webpack?

Webpack is used for 2 purposes:

1. Generate several JavaScript "bundles" for inclusion in `application.js`.
2. Providing the Webpack Dev Server for quick prototyping of components without needing to refresh your browser to see updates.
Webpack is used to generate several JavaScript "bundles" for inclusion in `application.js` or directly in your layout.

This usage of webpack fits neatly and simply into the existing Rails sprockets system and you can include React components on a Rails view with a simple helper.

Expand Down Expand Up @@ -468,10 +451,6 @@ Usage:
Options:
-R, [--redux], [--no-redux] # Install Redux gems and Redux version of Hello World Example
-S, [--server-rendering], [--no-server-rendering] # Add necessary files and configurations for server-side rendering
-j, [--skip-js-linters], [--no-skip-js-linters] # Skip installing JavaScript linting files
-L, [--ruby-linters], [--no-ruby-linters] # Install ruby linting files, tasks, and configs
-H, [--heroku-deployment], [--no-heroku-deployment] # Install files necessary for deploying to Heroku
-b, [--skip-bootstrap], [--no-skip-bootstrap] # Skip installing files for bootstrap support

Runtime options:
-f, [--force] # Overwrite files that already exist
Expand Down Expand Up @@ -506,60 +485,6 @@ The generator has amended the folders created in `client/assets/` to Rails's ass

Alternatively, if you have many existing assets and don't wish to move them, you could consider creating symlinks from client/assets that point to your Rails assets folders inside of `app/assets/`. The assets there will then be visible to both Rails and webpack.

### Bootstrap Integration
React on Rails ships with Twitter Bootstrap already integrated into the build. Note that the generator removes `require_tree` in both the application.js and application.css.scss files. This is to ensure the correct load order for the bootstrap integration, and is usually a good idea in general. You will therefore need to explicitly require your files.

How the Bootstrap library is loaded depends upon whether one is using the Rails server or the HMR development server.

#### Bootstrap via Rails Server
In the former case, the Rails server loads `bootstrap-sprockets`, provided by the `bootstrap-sass` ruby gem (added automatically to your Gemfile by the generator) via the `app/assets/stylesheets/_bootstrap-custom.scss` partial.

This allows for using Bootstrap in your regular Rails stylesheets. If you wish to customize any of the Bootstrap variables, you can do so via the `client/assets/stylesheets/_pre-bootstrap.scss` partial.

#### Bootstrap via Webpack HMR Dev Server
When using the webpack dev server, which does not go through Rails, bootstrap is loaded via the [bootstrap-sass-loader](https://github.com/shakacode/bootstrap-sass-loader) which uses the `client/bootstrap-sass-config.js` file.

#### Keeping Custom Bootstrap Configurations Synced
Because the webpack dev server and Rails each load Bootstrap via a different file (explained in the two sections immediately above), any changes to the way components are loaded in one file must also be made to the other file in order to keep styling consistent between the two. For example, if an import is excluded in `_bootstrap-custom.scss`, the same import should be excluded in `bootstrap-sass-config.js` so that styling in the Rails server and the webpack dev server will be the same.

#### Skip Bootstrap Integration
Bootstrap integration is enabled by default, but can be disabled by passing the `--skip-bootstrap` flag (alias `-b`). When you don't need Bootstrap in your existing project, just skip it as needed.

### Linters
The React on Rails generator can add linters and their recommended accompanying configurations to your project. There are two classes of linters: ruby linters and JavaScript linters.

##### JavaScript Linters
JavaScript linters are **enabled by default**, but can be disabled by passing the `--skip-js-linters` flag (alias `j`) , and those that run in Node have been added to `client/package.json` under `devDependencies`.

##### Ruby Linters
Ruby linters are **disabled by default**, but can be enabled by passing the `--ruby-linters` flag when generating. These linters have been added to your Gemfile in addition to the appropriate Rake tasks.

We really love using all the linters! Give them a try.

#### Running the Linters
To run the linters (runs all linters you have installed, even if you installed both Ruby and Node):

```bash
rake lint
```

Run this command to see all the linters available

```bash
rake -T lint
```

**Here's the list:**
```bash
rake lint # Runs all linters
rake lint:eslint # eslint
rake lint:js # JS Linting
rake lint:jscs # jscs
rake lint:rubocop[fix] # Run Rubocop lint in shell
rake lint:ruby # Run ruby-lint as shell
rake lint:scss # See docs for task 'scss_lint'
```

## Multiple React Components on a Page with One Store
You may wish to have 2 React components share the same the Redux store. For example, if your navbar is a React component, you may want it to use the same store as your component in the main area of the page. You may even want multiple React components in the main area, which allows for greater modularity. In addition, you may want this to work with Turbolinks to minimize reloading the JavaScript. A good example of this would be something like an a notifications counter in a header. As each notifications is read in the body of the page, you would like to update the header. If both the header and body share the same Redux store, then this is trivial. Otherwise, we have to rely on other solutions, such as the header polling the server to see how many unread notifications exist.

Expand Down
30 changes: 30 additions & 0 deletions docs/additional-reading/heroku-deployment.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,5 +65,35 @@ bin/rake db:migrate
bin/rake db:setup
```

3. Create a rake file to add webpack compilation to asset precompilation. You may already have this file if you used the React on Rails generator.

```ruby
# lib/tasks/assets.rake
# The webpack task must run before assets:environment task.
# Otherwise Sprockets cannot find the files that webpack produces.
# This is the secret sauce for how a Heroku deployment knows to create the webpack generated JavaScript files.
Rake::Task["assets:precompile"]
.clear_prerequisites
.enhance(["assets:compile_environment"])

namespace :assets do
# In this task, set prerequisites for the assets:precompile task
task compile_environment: :webpack do
Rake::Task["assets:environment"].invoke
end

desc "Compile assets with webpack"
task :webpack do
sh "cd client && npm run build:client"
# If you are doing server rendering
# sh "cd client && npm run build:server"
end

task :clobber do
rm_r Dir.glob(Rails.root.join("app/assets/webpack/*"))
end
end
```



4 changes: 3 additions & 1 deletion docs/tutorial.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# Tutorial for React on Rails
# Tutorial for React on Rails (THIS ONLY WORKS UP TO VERSION 5.1.1)

*Version 5.2 and greater have removed the non-essential options. See the [changelog](../CHANGELOG.md) for details on what was removed.*

This tutorial setups up a new Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering.

Expand Down
57 changes: 0 additions & 57 deletions lib/generators/react_on_rails/base_generator.rb
Original file line number Diff line number Diff line change
Expand Up @@ -21,37 +21,11 @@ class BaseGenerator < Rails::Generators::Base # rubocop:disable Metrics/ClassLen
default: false,
desc: "Configure for server-side rendering of webpack JavaScript",
aliases: "-S"
# --skip-js-linters
class_option :skip_js_linters,
type: :boolean,
default: false,
desc: "Skip installing JavaScript linting files",
aliases: "-j"
# --ruby-linters
class_option :ruby_linters,
type: :boolean,
default: false,
desc: "Install ruby linting files, tasks, and configs",
aliases: "-L"

# --skip-bootstrap
class_option :skip_bootstrap,
type: :boolean,
default: false,
desc: "Skip integrating Bootstrap and don't initialize files and regarding configs",
aliases: "-b"

def add_hello_world_route
route "get 'hello_world', to: 'hello_world#index'"
end

def create_client_assets_directories
empty_directory("client/assets")
empty_directory("client/assets/stylesheets")
empty_directory_with_keep_file("client/assets/fonts")
empty_directory_with_keep_file("client/assets/images")
end

def update_git_ignore
data = <<-DATA.strip_heredoc
# React on Rails
Expand Down Expand Up @@ -112,8 +86,6 @@ def copy_base_files
base_path = "base/base/"
base_files = %w(app/controllers/hello_world_controller.rb
client/.babelrc
client/index.jade
client/server.js
client/webpack.client.base.config.js
client/webpack.client.rails.config.js
REACT_ON_RAILS.md
Expand All @@ -125,11 +97,9 @@ def template_base_files
base_path = "base/base/"
%w(config/initializers/react_on_rails.rb
Procfile.dev
Procfile.dev-hot
app/views/hello_world/index.html.erb
package.json
client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx
client/webpack.client.hot.config.js
client/package.json).each { |file| template(base_path + file + ".tt", file) }
end

Expand All @@ -153,11 +123,6 @@ def install_server_rendering_files_if_enabled
end
end

def template_linter_files_if_appropriate
return if !options.ruby_linters? && options.skip_js_linters?
template("base/base/lib/tasks/linters.rake.tt", "lib/tasks/linters.rake")
end

def template_assets_rake_file
template("base/base/lib/tasks/assets.rake.tt", "lib/tasks/assets.rake")
end
Expand All @@ -167,9 +132,6 @@ def template_assets_rake_file
# If you do not want to move existing images and fonts from your Rails app
# you could also consider creating symlinks there that point to the original
# rails directories. In that case, you would not add these paths here.
Rails.application.config.assets.paths << Rails.root.join("client", "assets", "stylesheets")
Rails.application.config.assets.paths << Rails.root.join("client", "assets", "images")
Rails.application.config.assets.paths << Rails.root.join("client", "assets", "fonts")
Rails.application.config.assets.precompile += %w( server-bundle.js )

# Add folder with webpack generated assets to assets.paths
Expand Down Expand Up @@ -211,19 +173,6 @@ def append_to_spec_rails_helper
ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
STR

# rename to application.scss from application.css or application.css.scss
def force_application_scss_naming_if_necessary
base_path = "app/assets/stylesheets/"
application_css = "#{base_path}application.css"
application_css_scss = "#{base_path}application.css.scss"

bad_name = dest_file_exists?(application_css) || dest_file_exists?(application_css_scss)
return unless bad_name

new_name = File.join(destination_root, "#{base_path}application.scss")
File.rename(bad_name, new_name)
end

def print_helpful_message
message = <<-MSG.strip_heredoc

Expand All @@ -238,12 +187,6 @@ def print_helpful_message
npm run rails-server

- Visit http://localhost:3000/hello_world and see your React On Rails app running!

- Run the npm express-server command to load the node server with hot reloading support.

npm run express-server

- Visit http://localhost:4000 and see your React On Rails app running using the Webpack Dev server.
MSG
GeneratorMessages.add_info(message)
end
Expand Down
Loading