Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 410bac6

Browse files
Fix testing issues with Rails hot reloading setup
Configured testing so that: * If we're not running a webpack process to watch the client JS files, then we build the client or server files. * Test will let you know if it's skipping building. Expression used to see if a watch process is running: `pgrep -fl '\\-w \\-\\-config webpack\\.#{type}\\.rails\\.build\\.config\\.js'` * Renamed asset helpers so usage is like this: <%= env_stylesheet_link_tag 'application_prod', 'application_dev', media: 'all', 'data-turbolinks-track' => true %> <%= env_javascript_include_tag nil, 'http://localhost:3500/vendor-bundle.js' %> <%= env_javascript_include_tag nil, 'http://localhost:3500/app-bundle.js' %> <%= env_javascript_include_tag 'application_prod', 'application_dev', 'data-turbolinks-track' => true %> TODO: Should we consider having tests use the Rails hot reload server?
1 parent 5396a79 commit 410bac6

File tree

19 files changed

+103
-30
lines changed

19 files changed

+103
-30
lines changed

‎Procfile.dev‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
web: rails s
2+
3+
# Run the hot reload server for client development
24
client: sh -c 'rm app/assets/webpack/* || true && cd client && HOT_RAILS_PORT=3500 npm run build:dev:client'
5+
6+
# Keep the JS fresh for specs
7+
client-spec: sh -c 'cd client && npm run build:test:client'
8+
9+
# Keep the JS fresh for server rendering
310
server: sh -c 'cd client && npm run build:dev:server'
411
hot: sh -c 'cd client && HOT_PORT=4000 npm start'

‎README.md‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -127,11 +127,14 @@ Note that it's important to run the Rails server on a different port than the no
127127

128128
# Webpack configuration
129129
## Config Files
130+
130131
- `webpack.client.base.config.js`: Common configuration file to minimize code duplication for client.rails and client.hot.
131-
- `webpack.client.rails.config.js`: Used to generate the Rails bundles for Rails use.
132-
- `webpack.client.hot.config.js`: Used by server.js to run the Webpack Dev server.
133-
- `webpack.server.rails.config.js`: Common configuration file to minimize code duplication
134-
between the HMR and Rails configurations.
132+
- `webpack.client.rails.build.config.js`: Client side js bundle.
133+
- `webpack.server.rails.build.config.js`: Server side js bundle
134+
135+
These are used for hot reloading (Webpack Dev Server):
136+
- `webpack.client.rails.hot.config.js`: Used to generate the Rails bundles for Rails use so you get hot reloading within your Rails app.
137+
- `webpack.client.hot.config.js`: Used by server.js to run the Webpack Dev server for stubbing the api end points
135138

136139
## Webpack Resources
137140
- Good overview: [Pete Hunt's Webpack Howto](https://github.com/petehunt/webpack-howto)

‎app/assets/javascripts/application_dev.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
// This one depend on jQuery
1818
//= require turbolinks
1919

20+
// This will soon be removed as it will be in vendor-bundle with react_on_rails 2.0
2021
//= require react_on_rails
2122

2223
//= require rails_startup

‎app/helpers/application_helper.rb‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
module ApplicationHelper
2-
def javascript_include_env_tag(asset, dev_asset, params = {})
3-
asset_file = Rails.env.production? ? asset : dev_asset
2+
# TODO: MOVE TO helper in react_on_rails
3+
# See application.html.erb for usage example
4+
def env_javascript_include_tag(prod_asset, dev_asset, params = {})
5+
asset_file = !Rails.env.development? ? prod_asset : dev_asset
46
return javascript_include_tag(asset_file, params) if asset_file
57
end
68

7-
def stylesheet_link_env_tag(asset, dev_asset, params = {})
8-
asset_file = Rails.env.production? ? asset : dev_asset
9+
# TODO: MOVE TO helper in react_on_rails
10+
def env_stylesheet_link_tag(prod_asset, dev_asset, params = {})
11+
asset_file = !Rails.env.development? ? prod_asset : dev_asset
912
return stylesheet_link_tag(asset_file, params) if asset_file
1013
end
1114
end

‎app/views/comments/show.html.erb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<div class="comment">
22
<p id="notice"><%= notice %></p>
33

4-
<p>
4+
<pclass="js-comment-author">
55
<strong>Author:</strong>
66
<%= @comment.author %>
77
</p>
88

9-
<p>
9+
<pclass="js-comment-text">
1010
<strong>Text:</strong>
1111
<%= @comment.text %>
1212
</p>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<html>
33
<head>
44
<title>RailsReactTutorial</title>
5-
<%= stylesheet_link_env_tag 'application_prod', 'application_dev', media: 'all', 'data-turbolinks-track' => true %>
6-
<%= javascript_include_env_tag nil, 'http://localhost:3500/vendor-bundle.js' %>
7-
<%= javascript_include_env_tag nil, 'http://localhost:3500/app-bundle.js' %>
8-
<%= javascript_include_env_tag 'application_prod', 'application_dev', 'data-turbolinks-track' => true %>
5+
<%= env_stylesheet_link_tag 'application_prod', 'application_dev', media: 'all', 'data-turbolinks-track' => true %>
6+
<%= env_javascript_include_tag nil, 'http://localhost:3500/vendor-bundle.js' %>
7+
<%= env_javascript_include_tag nil, 'http://localhost:3500/app-bundle.js' %>
8+
<%= env_javascript_include_tag 'application_prod', 'application_dev', 'data-turbolinks-track' => true %>
99
<%= csrf_meta_tags %>
1010
</head>
1111
<body>

‎app/views/pages/no_router.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@
33
<%= render "header" %>
44

55
<%= react_component('App', render(template: "/comments/index.json.jbuilder"),
6-
generator_function: true, prerender: true) %>
6+
generator_function: true, prerender: false) %>

‎client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ export default class Comment extends React.Component {
1616

1717
return (
1818
<div className={css.comment}>
19-
<h2 className={css.commentAuthor}>
19+
<h2 className={`${css.commentAuthor} js-comment-author`}>
2020
{author}
2121
</h2>
2222
<span
2323
dangerouslySetInnerHTML={{ __html: rawMarkup }}
24-
className="comment-text"
24+
className="js-comment-text"
2525
/>
2626
</div>
2727
);

‎client/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,10 @@
2828
"test:debug": "npm run test -- --debug-brk",
2929
"start": "node server.js",
3030
"build:client": "NODE_ENV=production webpack --config webpack.client.rails.build.config.js",
31-
"build:server": "NODE_ENV=production webpack --config webpack.server.rails.config.js",
31+
"build:server": "NODE_ENV=production webpack --config webpack.server.rails.build.config.js",
3232
"build:dev:client": "babel-node server.rails.hot.js",
33-
"build:dev:server": "webpack -w --config webpack.server.rails.config.js",
33+
"build:dev:server": "webpack -w --config webpack.server.rails.build.config.js",
34+
"build:test:client": "webpack -w --config webpack.client.rails.build.config.js",
3435
"lint": "npm run eslint && npm run jscs",
3536
"eslint": "eslint --ext .js,.jsx .",
3637
"jscs": "jscs --verbose ."

‎client/webpack.client.base.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ module.exports = {
6262
// React is necessary for the client rendering
6363
{ test: require.resolve('react'), loader: 'expose?React' },
6464
{ test: require.resolve('react-dom'), loader: 'expose?ReactDOM' },
65+
{ test: require.resolve('jquery-ujs'), loader: 'imports?jQuery=jquery' },
6566
{ test: require.resolve('jquery'), loader: 'expose?jQuery' },
6667
{ test: require.resolve('jquery'), loader: 'expose?$' },
6768

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /