Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
kaizencodes authored and justin808 committed Apr 30, 2017
1 parent ee0f504 commit 95765e3
Show file tree
Hide file tree
Showing 5 changed files with 21 additions and 15 deletions.
14 changes: 9 additions & 5 deletions README.md
Expand Up @@ -2,7 +2,7 @@

**For a complete example of this gem, see our live demo at [www.reactrails.com](http://www.reactrails.com). ([Source Code](https://github.com/shakacode/react-webpack-rails-tutorial))**

**Speaking!**: Justin is speaking [GORUCO](http://goruco.com/#speakers) on Saturday, June 24, 2017 in NYC: "Front-End Sadness to Happiness: The React on Rails Story". [Email Justin](mailto:justin@shakacode.com) to give this talk at your local meetup or company. [Subscribe](https://app.mailerlite.com/webforms/landing/l1d9x5) to be notified of local and *online* presentations of this talk.
**Speaking!**: Justin is speaking [GORUCO](http://goruco.com/#speakers) on Saturday, June 24, 2017 in NYC: "Front-End Sadness to Happiness: The React on Rails Story". [Email Justin](mailto:justin@shakacode.com) to give this talk at your local meetup or company. [Subscribe](https://app.mailerlite.com/webforms/landing/l1d9x5) to be notified of local and *online* presentations of this talk.

**Aloha from Justin Gordon** ([bio](http://www.railsonmaui.com/about)) and the [ShakaCode](http://www.shakacode.com) Team! We're actively looking for new projects involving React, React-Native, and Rails, including conversion of AngularJs to React. Please [contact me](mailto:justin@shakacode.com) if we could potentially help you in any way. Besides consulting on bigger projects, [ShakaCode](http://www.shakacode.com) is doing ScreenHero plus Slack/Github based [coaching](http://www.shakacode.com/work/shakacode-coaching-plan.pdf) for React on Rails. See our blog post [Can ShakaCode Help You?](https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9) for more information.

Expand Down Expand Up @@ -49,7 +49,7 @@ For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](./KUDOS.md).
* [284 Ruby Rogues: React on Rails with Justin Gordon and Rob Wise](https://devchat.tv/ruby-rogues/284-rr-react-on-rails-with-justin-gordon-and-rob-wise)

# NEWS
* 2017-04-25: 7.0.0 Shipped! Performance improvements! Please upgrade! Only "breaking" change is that you have to update both the node module and the Ruby gem.
* 2017-04-25: 7.0.0 Shipped! Performance improvements! Please upgrade! Only "breaking" change is that you have to update both the node module and the Ruby gem.
* 2017-04-09: 8.0.0 beta work to include webpacker_lite gem has begun. See [#786](https://github.com/shakacode/react_on_rails/issues/786).
* *See [NEWS.md](NEWS.md) for more notes over time.*

Expand Down Expand Up @@ -106,6 +106,10 @@ Universal React with Rails: Part I](https://medium.com/@alexfedoseev/isomorphic-

We're definitely not doing that. With react_on_rails, webpack is mainly generating a nice JavaScript file for inclusion into `application.js`. We're going to KISS. And that's all relative given how much there is to get right in an enterprise class web application.

## Upgrade

To upgrade existing apps to react on rails 7 see the [Installation Overview](docs/basics/installation-overview.md)

## Getting Started

**For more detailed instructions**, see the [React on Rails Basic Tutorial](docs/tutorial.md).
Expand Down Expand Up @@ -144,9 +148,9 @@ We're definitely not doing that. With react_on_rails, webpack is mainly generati
foreman start -f Procfile.dev
```

8. Visit [localhost:5000/hello_world](http://localhost:5000/hello_world). Note, `foreman` defaults to PORT 5000 unless you set the value of PORT in your environment. For example, you can `export PORT=3000` to use the Rails default port of 3000.
8. Visit [localhost:3000/hello_world](http://localhost:3000/hello_world). Note, `foreman` defaults to PORT 5000 unless you set the value of PORT in your environment. For example, you can `export PORT=3000` to use the Rails default port of 3000. For the hello_world example this is already set.

### Installation Summary
### Installation Overview

See the [Installation Overview](docs/basics/installation-overview.md) for a concise set summary of what's in a React on Rails installation.

Expand Down Expand Up @@ -222,7 +226,7 @@ In the following screenshot you can see the 3 parts of React on Rails rendering:
2. The wrapper div `<div id="HelloWorld-react-component-0">` specifies the div where to place the React rendering. It encloses the server-rendered HTML for the React component
3. Additional JavaScript is placed to console log any messages, such as server rendering errors. Note, these server side logs can be configured to only be sent to the server logs.
**Note**:
**Note**:
* If server rendering is not used (prerender: false), then the major difference is that the HTML rendered for the React component only contains the outer div: `<div id="HelloWorld-react-component-0"/>`. The first specification of the React component is just the same.
* The below image is not yet updated for version 7.0.0 which uses a `<script>` tag for the props. Instead of a hidden div, we have the props inside of the a `<script>` tag.
Expand Down
11 changes: 7 additions & 4 deletions docs/basics/installation-overview.md
@@ -1,6 +1,6 @@
# Installation Overview

Here's an overview of installation if you're not using the generator.
Here's an overview of installation if you're not using the generator.

Note, the best way to understand how to use ReactOnRails is to study the examples:

Expand All @@ -9,23 +9,26 @@ Note, the best way to understand how to use ReactOnRails is to study the example

## Configure the `/client` Directory

This directory has no references to Rails outside of the destination directory for the files created by the various Webpack config files.
This directory has no references to Rails outside of the destination directory for the files created by the various Webpack config files.

The only requirements within this directory for basic React on Rails integration are:

1. Your webpack configuration files:
1. Create outputs in a directory like `/app/assets/webpack`, which is customizable in your `config/initializers/react_on_rails.rb`.
1. Create outputs in a directory like `/public/webpack`, which is customizable in your `config/initializers/react_on_rails.rb`.
1. Provide server rendering if you wish to use that feature.
1. Your JavaScript code "registers" any components and stores per the ReactOnRails APIs of ReactOnRails.register(components) and ReactOnRails.registerStore(stores). See API docs in [README.md](../../README.md) and the [ReactOnRails.js source](../../node_package/src/ReactOnRails.js).
1. Set your registration file as an "entry" point in your Webpack configs.
1. Add the [Manifest plugin](https://github.com/danethurber/webpack-manifest-plugin) to your config. For examples see [dummy config](../../spec/dummy/client/webpack.client.base.config.js).
The default path: `public/webpack` can be loaded with webpackConfigLoader as shown in the dummy example.
1. You create scripts in `client/package.json` per the example apps. These are used for building your Webpack assets. Also do this for your top level `package.json`.

## Rails Steps (outside of /client)
1. Add `gem "webpacker_lite"` to the Gemfile, run bundle. The gem provides the `stylesheet_pack_tag` and `javascript_pack_tag` helpers which is used to load the bundled assets to your layouts.[Dummy Example](../../spec/dummy/app/views/layouts/application.html.erb)
1. Configure the `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [spec/dummy/config/initializers/react_on_rails.rb](../../spec/dummy/config/initializers/react_on_rails.rb) for a detailed example of configuration, including comments on the different values to configure.
1. Configure your Procfiles per the example apps. These are at the root of your Rails installation.
1. Configure `config/initializers/assets.rb` probably like [spec/dummy/config/initializers/assets.rb](../../spec/dummy/config/initializers/assets.rb). This example shows what's necessary if you're enabling the hot-reloading Rails development option.
1. Configure your top level JavaScript files for inclusion in your layout. You'll want a version that you use for static assets, and you want a file for any files in your setup that are not part of your webpack build. The reason for this is for use with hot-reloading. If you are not using hot reloading, then you only need to configure your `application.js` file to include your Webpack generated files. For more information on hot reloading, see [Hot Reloading of Assets For Rails Development](../additional-reading/hot-reloading-rails-development.md)

1. Configure your `lib/tasks/assets.rake` file to run webpack during asset precompilation.
1. If you are deploying to Heroku, see [heroku-deployment.md](/docs/additional-reading/heroku-deployment.md)

Expand Down
@@ -1,2 +1,2 @@
web: rails s -p 3000
client: sh -c 'rm app/assets/webpack/* || true && cd client && bundle exec rake react_on_rails:locale && yarn run build:development'
client: sh -c 'rm -rf public/webpack/* || true && cd client && bundle exec rake react_on_rails:locale && yarn run build:development'
2 changes: 1 addition & 1 deletion lib/react_on_rails/configuration.rb
Expand Up @@ -4,7 +4,7 @@ def self.configure
setup_config_values
end

DEFAULT_GENERATED_ASSETS_DIR = File.join(%w[public webpack], Rails.env).freeze
DEFAULT_GENERATED_ASSETS_DIR = File.join(%w(public webpack), Rails.env).freeze

def self.setup_config_values
ensure_webpack_generated_files_exists
Expand Down
7 changes: 3 additions & 4 deletions spec/dummy/Gemfile.lock
Expand Up @@ -269,9 +269,8 @@ GEM
thread_safe (0.3.6)
tilt (2.0.6)
tins (1.13.2)
turbolinks (5.0.1)
turbolinks-source (~> 5)
turbolinks-source (5.0.0)
turbolinks (2.5.3)
coffee-rails
tzinfo (1.2.2)
thread_safe (~> 0.1)
uglifier (3.1.4)
Expand Down Expand Up @@ -326,7 +325,7 @@ DEPENDENCIES
selenium-webdriver
spring
sqlite3
turbolinks (~> 5.0)
turbolinks (= 2.5.3)
uglifier
webpacker_lite (= 0.0.5)

Expand Down

0 comments on commit 95765e3

Please sign in to comment.