Skip to content

Commit 1ab76f5

Browse files
justin808justin808
committed
rails generate react_on_rails:install
1 parent 58c7c55 commit 1ab76f5

File tree

14 files changed

+219
-3
lines changed

14 files changed

+219
-3
lines changed

‎Gemfile

+2
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,5 @@ gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
5050
gem "webpacker", "~> 5.1"
5151

5252
gem "react_on_rails", "12.0.1"
53+
54+
gem 'mini_racer', platforms: :ruby

‎Gemfile.lock

+4
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ GEM
8484
concurrent-ruby (~> 1.0)
8585
jbuilder (2.10.0)
8686
activesupport (>= 5.0.0)
87+
libv8 (7.3.492.27.1-x86_64-darwin-19)
8788
listen (3.2.1)
8889
rb-fsevent (~> 0.10, >= 0.10.3)
8990
rb-inotify (~> 0.9, >= 0.9.10)
@@ -98,6 +99,8 @@ GEM
9899
mimemagic (0.3.5)
99100
mini_mime (1.0.2)
100101
mini_portile2 (2.4.0)
102+
mini_racer (0.2.14)
103+
libv8 (> 7.3)
101104
minitest (5.14.1)
102105
msgpack (1.3.3)
103106
nio4r (2.5.2)
@@ -201,6 +204,7 @@ DEPENDENCIES
201204
capybara (>= 2.15)
202205
jbuilder (~> 2.7)
203206
listen (~> 3.2)
207+
mini_racer
204208
puma (~> 4.1)
205209
rails (~> 6.0.3, >= 6.0.3.1)
206210
react_on_rails (= 12.0.1)

‎Procfile.dev

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# You can run these commands in separate shells
2+
web: rails s -p 3000
3+
4+
# Next line runs a watch process with webpack to compile the changed files.
5+
# When making frequent changes to client side assets, you will prefer building webpack assets
6+
# upon saving rather than when you refresh your browser page.
7+
# Note, if using React on Rails localization you will need to run
8+
# `bundle exec rake react_on_rails:locale` before you run bin/webpack
9+
client: sh -c 'rm -rf public/packs/* || true && bin/webpack -w'

‎Procfile.dev-hmr

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Procfile for development using HMR
2+
3+
web: rails s -p 3000
4+
5+
# Note, hot and live reloading don't work with the default generator setup on
6+
# top of the rails/webpacker Webpack config with server rendering.
7+
# If you have server rendering enabled (prerender is true), you either need to
8+
# a. Ensure that you have dev_server.hmr and dev_server.inline BOTH set to false,
9+
# and you have this option in your config/initializers/react_on_rails.rb:
10+
# config.same_bundle_for_client_and_server = true
11+
# If you have either config/webpacker.yml option set to true, you'll see errors like
12+
# "ReferenceError: window is not defined" (if hmr is true)
13+
# "TypeError: Cannot read property 'prototype' of undefined" (if inline is true)
14+
# b. Skip using the webpack-dev-server. bin/webpack --watch is typically
15+
fast enough.
16+
# c. See the React on Rails README for a link to documentation for how to setup
17+
# SSR with HMR and React hot loading using the webpack-dev-server only for the
18+
# client bundles and a static file for the server bundle.
19+
20+
# Run the webpack-dev-server for client and maybe server files
21+
webpack-dev-server: bin/webpack-dev-server
22+
23+
# Keep the JS fresh for server rendering. Remove if not server rendering.
24+
# Especially if you have not configured generation of a server bundle without a hash.
25+
# as that will conflict with the manifest created by the bin/webpack-dev-server
26+
# rails-server-assets: SERVER_BUNDLE_ONLY=yes bin/webpack --watch

‎app/controllers/hello_world_controller.rb

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# frozen_string_literal: true
2+
3+
class HelloWorldController < ApplicationController
4+
layout "hello_world"
5+
6+
def index
7+
@hello_world_props = { name: "Stranger" }
8+
end
9+
end

‎app/javascript/bundles/HelloWorld/components/HelloWorld.jsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import PropTypes from 'prop-types';
2+
import React, { useState } from 'react';
3+
4+
const HelloWorld = (props) => {
5+
const [name, setName] = useState(props.name);
6+
7+
return (
8+
<div>
9+
<h3>Hello, {name}!</h3>
10+
<hr />
11+
<form>
12+
<label htmlFor="name">
13+
Say hello to:
14+
<input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
15+
</label>
16+
</form>
17+
</div>
18+
);
19+
};
20+
21+
HelloWorld.propTypes = {
22+
name: PropTypes.string.isRequired, // this is passed from the Rails view
23+
};
24+
25+
export default HelloWorld;

‎app/javascript/packs/hello-world-bundle.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import ReactOnRails from 'react-on-rails';
2+
3+
import HelloWorld from '../bundles/HelloWorld/components/HelloWorld';
4+
5+
// This is how react_on_rails can see the HelloWorld in the browser.
6+
ReactOnRails.register({
7+
HelloWorld,
8+
});

‎app/views/hello_world/index.html.erb

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<h1>Hello World</h1>
2+
<%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>

‎app/views/layouts/hello_world.html.erb

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>ReactOnRailsWithWebpacker</title>
5+
<%= csrf_meta_tags %>
6+
<%= javascript_pack_tag 'hello-world-bundle' %>
7+
</head>
8+
9+
<body>
10+
<%= yield %>
11+
</body>
12+
</html>

‎config/initializers/react_on_rails.rb

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# frozen_string_literal: true
2+
3+
# See https://github.com/shakacode/react_on_rails/blob/master/docs/basics/configuration.md
4+
# for many more options.
5+
6+
ReactOnRails.configure do |config|
7+
# This configures the script to run to build the production assets by webpack. Set this to nil
8+
# if you don't want react_on_rails building this file for you.
9+
# If nil, then the standard rails/webpacker assets:precompile will run
10+
# config.build_production_command = nil
11+
12+
################################################################################
13+
################################################################################
14+
# TEST CONFIGURATION OPTIONS
15+
# Below options are used with the use of this test helper:
16+
# ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
17+
################################################################################
18+
19+
# If you are using this in your spec_helper.rb (or rails_helper.rb):
20+
#
21+
# ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
22+
#
23+
# with rspec then this controls what yarn command is run
24+
# to automatically refresh your webpack assets on every test run.
25+
#
26+
# Alternately, you can remove the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`
27+
# and set the config/webpacker.yml option for test to true.
28+
config.build_test_command = "RAILS_ENV=test bin/webpack"
29+
30+
################################################################################
31+
################################################################################
32+
# SERVER RENDERING OPTIONS
33+
################################################################################
34+
# This is the file used for server rendering of React when using `(prerender: true)`
35+
# If you are never using server rendering, you should set this to "".
36+
# Note, there is only one server bundle, unlike JavaScript where you want to minimize the size
37+
# of the JS sent to the client. For the server rendering, React on Rails creates a pool of
38+
# JavaScript execution instances which should handle any component requested.
39+
#
40+
# While you may configure this to be the same as your client bundle file, this file is typically
41+
# different. You should have ONE server bundle which can create all of your server rendered
42+
# React components.
43+
#
44+
config.server_bundle_js_file = "hello-world-bundle.js"
45+
end

‎config/routes.rb

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
Rails.application.routes.draw do
2+
get 'hello_world', to: 'hello_world#index'
23
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
34
end

‎config/webpacker.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ development:
5858
host: localhost
5959
port: 3035
6060
public: localhost:3035
61-
hmr: false
61+
hmr: true
6262
# Inline should be set to true if using HMR
6363
inline: true
6464
overlay: true

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
66
"prop-types": "^15.7.2",
77
"react": "^16.13.1",
8-
"react-dom": "^16.13.1"
8+
"react-dom": "^16.13.1",
9+
"react-on-rails": "12.0.1"
910
},
1011
"devDependencies": {
1112
"webpack-dev-server": "^3.11.0"

‎yarn.lock

+73-1
Original file line numberDiff line numberDiff line change
@@ -887,6 +887,14 @@
887887
"@babel/plugin-transform-react-jsx-source" "^7.10.4"
888888
"@babel/plugin-transform-react-pure-annotations" "^7.10.4"
889889

890+
"@babel/runtime-corejs3@^7.9.6":
891+
version "7.11.0"
892+
resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.11.0.tgz#db54a2251206f0f8579b41918acb14488b8dd2c0"
893+
integrity sha512-K0ioacsw8JgzDSPpUiGWokMvLzGvnZPXLrTsJfyHPrFsnp4yoKn+Ap/8NNZgWKZG9o5+qotH8tAa8AXn8gTN5A==
894+
dependencies:
895+
core-js-pure "^3.0.0"
896+
regenerator-runtime "^0.13.4"
897+
890898
"@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
891899
version "7.11.0"
892900
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.0.tgz#f10245877042a815e07f7e693faff0ae9d3a2aac"
@@ -2082,6 +2090,21 @@ concat-stream@^1.5.0:
20822090
readable-stream "^2.2.2"
20832091
typedarray "^0.0.6"
20842092

2093+
concurrently@^5.1.0:
2094+
version "5.2.0"
2095+
resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-5.2.0.tgz#ead55121d08a0fc817085584c123cedec2e08975"
2096+
integrity sha512-XxcDbQ4/43d6CxR7+iV8IZXhur4KbmEJk1CetVMUqCy34z9l0DkszbY+/9wvmSnToTej0SYomc2WSRH+L0zVJw==
2097+
dependencies:
2098+
chalk "^2.4.2"
2099+
date-fns "^2.0.1"
2100+
lodash "^4.17.15"
2101+
read-pkg "^4.0.1"
2102+
rxjs "^6.5.2"
2103+
spawn-command "^0.0.2-1"
2104+
supports-color "^6.1.0"
2105+
tree-kill "^1.2.2"
2106+
yargs "^13.3.0"
2107+
20852108
connect-history-api-fallback@^1.6.0:
20862109
version "1.6.0"
20872110
resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
@@ -2156,6 +2179,11 @@ core-js-compat@^3.6.2:
21562179
browserslist "^4.8.5"
21572180
semver "7.0.0"
21582181

2182+
core-js-pure@^3.0.0:
2183+
version "3.6.5"
2184+
resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813"
2185+
integrity sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA==
2186+
21592187
core-js@^3.6.4:
21602188
version "3.6.5"
21612189
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
@@ -2453,6 +2481,11 @@ dashdash@^1.12.0:
24532481
dependencies:
24542482
assert-plus "^1.0.0"
24552483

2484+
date-fns@^2.0.1:
2485+
version "2.15.0"
2486+
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.15.0.tgz#424de6b3778e4e69d3ff27046ec136af58ae5d5f"
2487+
integrity sha512-ZCPzAMJZn3rNUvvQIMlXhDr4A+Ar07eLeGsGREoWU19a3Pqf5oYa+ccd+B3F6XVtQY6HANMFdOQ8A+ipFnvJdQ==
2488+
24562489
[email protected], debug@^2.2.0, debug@^2.3.3:
24572490
version "2.6.9"
24582491
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -5147,6 +5180,11 @@ pify@^2.0.0, pify@^2.3.0:
51475180
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
51485181
integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
51495182

5183+
pify@^3.0.0:
5184+
version "3.0.0"
5185+
resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
5186+
integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
5187+
51505188
pify@^4.0.1:
51515189
version "4.0.1"
51525190
resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
@@ -6030,6 +6068,14 @@ react-is@^16.8.1:
60306068
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
60316069
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
60326070

6071+
[email protected]:
6072+
version "12.0.1"
6073+
resolved "https://registry.yarnpkg.com/react-on-rails/-/react-on-rails-12.0.1.tgz#194e59b5910b883cb0b9fb5ec073dde388de02b5"
6074+
integrity sha512-9CG5dyQaq4GXBRyrS7lesaol3sNkpz5F59qxvMhrOjYEKxndVET0tlN3j0WDjlZ7sPU0Xax24jzvUpZZHxaBcA==
6075+
dependencies:
6076+
"@babel/runtime-corejs3" "^7.9.6"
6077+
concurrently "^5.1.0"
6078+
60336079
react@^16.13.1:
60346080
version "16.13.1"
60356081
resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
@@ -6063,6 +6109,15 @@ read-pkg@^1.0.0:
60636109
normalize-package-data "^2.3.2"
60646110
path-type "^1.0.0"
60656111

6112+
read-pkg@^4.0.1:
6113+
version "4.0.1"
6114+
resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-4.0.1.tgz#963625378f3e1c4d48c85872b5a6ec7d5d093237"
6115+
integrity sha1-ljYlN48+HE1IyFhytabsfV0JMjc=
6116+
dependencies:
6117+
normalize-package-data "^2.3.2"
6118+
parse-json "^4.0.0"
6119+
pify "^3.0.0"
6120+
60666121
"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
60676122
version "2.3.7"
60686123
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
@@ -6315,6 +6370,13 @@ run-queue@^1.0.0, run-queue@^1.0.3:
63156370
dependencies:
63166371
aproba "^1.1.1"
63176372

6373+
rxjs@^6.5.2:
6374+
version "6.6.2"
6375+
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.2.tgz#8096a7ac03f2cc4fe5860ef6e572810d9e01c0d2"
6376+
integrity sha512-BHdBMVoWC2sL26w//BCu3YzKT4s2jip/WhwsGEDmeKYBhKDZeYezVUnHatYB7L85v5xs0BAQmg6BEYJEKxBabg==
6377+
dependencies:
6378+
tslib "^1.9.0"
6379+
63186380
[email protected], safe-buffer@~5.1.0, safe-buffer@~5.1.1:
63196381
version "5.1.2"
63206382
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -6656,6 +6718,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
66566718
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
66576719
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
66586720

6721+
spawn-command@^0.0.2-1:
6722+
version "0.0.2-1"
6723+
resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2-1.tgz#62f5e9466981c1b796dc5929937e11c9c6921bd0"
6724+
integrity sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A=
6725+
66596726
spdx-correct@^3.0.0:
66606727
version "3.1.1"
66616728
resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
@@ -7100,6 +7167,11 @@ tough-cookie@~2.5.0:
71007167
psl "^1.1.28"
71017168
punycode "^2.1.1"
71027169

7170+
tree-kill@^1.2.2:
7171+
version "1.2.2"
7172+
resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
7173+
integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
7174+
71037175
trim-newlines@^1.0.0:
71047176
version "1.0.0"
71057177
resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
@@ -7597,7 +7669,7 @@ yargs-parser@^13.1.2:
75977669
camelcase "^5.0.0"
75987670
decamelize "^1.2.0"
75997671

7600-
yargs@^13.3.2:
7672+
yargs@^13.3.0, yargs@^13.3.2:
76017673
version "13.3.2"
76027674
resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
76037675
integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==

0 commit comments

Comments
 (0)