From 76f8eccbfce2cae254a2045d058209e2176a7eae Mon Sep 17 00:00:00 2001 From: Daniel Szatmari Date: Sun, 16 Apr 2017 09:53:54 +0200 Subject: [PATCH 01/24] add config to dummy app --- .gitignore | 2 +- spec/dummy/.gitignore | 2 +- spec/dummy/Gemfile | 2 ++ spec/dummy/Gemfile.lock | 5 +++ .../app/views/layouts/application.html.erb | 16 ++++----- spec/dummy/client/package.json | 13 ++++---- spec/dummy/client/server-rails-hot.js | 10 +++--- .../client/webpack.client.base.config.js | 27 +++++++++++++-- .../webpack.client.rails.build.config.js | 9 ++--- .../client/webpack.client.rails.hot.config.js | 13 ++++---- .../webpack.server.rails.build.config.js | 24 ++++++++++++-- spec/dummy/client/webpackConfigLoader.js | 22 +++++++++++++ spec/dummy/client/yarn.lock | 33 +++++++++++++++++-- spec/dummy/config/initializers/assets.rb | 2 +- .../config/initializers/react_on_rails.rb | 5 +-- .../config/webpack/development.server.yml | 8 +++++ spec/dummy/config/webpack/paths.yml | 19 +++++++++++ yarn.lock | 8 +++-- 18 files changed, 174 insertions(+), 46 deletions(-) create mode 100644 spec/dummy/client/webpackConfigLoader.js create mode 100644 spec/dummy/config/webpack/development.server.yml create mode 100644 spec/dummy/config/webpack/paths.yml diff --git a/.gitignore b/.gitignore index 3c55121fe..e170c797a 100644 --- a/.gitignore +++ b/.gitignore @@ -12,7 +12,7 @@ /spec/examples.txt /spec/dummy/client/node_modules -/spec/dummy/app/assets/webpack/ +/spec/dummy/public/webpack/ /spec/dummy/coverage/ /spec/react_on_rails/dummy-for-generators/ diff --git a/spec/dummy/.gitignore b/spec/dummy/.gitignore index 566dce6d9..83c2b2dd5 100644 --- a/spec/dummy/.gitignore +++ b/spec/dummy/.gitignore @@ -18,6 +18,6 @@ /node_modules -/app/assets/webpack +/public/assets/webpack/* /spec/examples.txt diff --git a/spec/dummy/Gemfile b/spec/dummy/Gemfile index 3d2282c8b..3c4bd6e9f 100644 --- a/spec/dummy/Gemfile +++ b/spec/dummy/Gemfile @@ -43,6 +43,8 @@ gem 'sdoc', '~> 0.4.0', group: :doc gem "react_on_rails", path: "../.." +gem "webpacker_lite", "0.0.5" + gem "mini_racer" group :development, :test do diff --git a/spec/dummy/Gemfile.lock b/spec/dummy/Gemfile.lock index e065a9771..f3b10a04c 100644 --- a/spec/dummy/Gemfile.lock +++ b/spec/dummy/Gemfile.lock @@ -277,6 +277,10 @@ GEM uglifier (3.1.4) execjs (>= 0.3.0, < 3) unicode-display_width (1.1.3) + webpacker_lite (0.0.5) + activesupport (>= 4.2) + multi_json (~> 1.2) + railties (>= 4.2) websocket (1.2.4) websocket-driver (0.6.5) websocket-extensions (>= 0.1.0) @@ -324,6 +328,7 @@ DEPENDENCIES sqlite3 turbolinks (~> 5.0) uglifier + webpacker_lite (= 0.0.5) BUNDLED WITH 1.14.6 diff --git a/spec/dummy/app/views/layouts/application.html.erb b/spec/dummy/app/views/layouts/application.html.erb index 178c4f080..9ec8f0f83 100644 --- a/spec/dummy/app/views/layouts/application.html.erb +++ b/spec/dummy/app/views/layouts/application.html.erb @@ -9,20 +9,18 @@ <%= yield :head %> - <%= env_stylesheet_link_tag(static: 'application_static', - hot: 'application_non_webpack', - media: 'all', - 'data-turbolinks-track' => true) %> + <%= stylesheet_pack_tag(static: ['vendor, app'], + media: 'all', + 'data-turbolinks-track' => true)) %> + - <%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js', - 'http://localhost:3500/app-bundle.js']) %> + <%= javascript_pack_tag hot: ['vendor', 'app'] %> - <%= env_javascript_include_tag(static: 'application_static', - hot: 'application_non_webpack', - 'data-turbolinks-track' => true) %> + <%= javascript_pack_tag(static: ['vendor', 'app'], + 'data-turbolinks-track' => true) %> <%= csrf_meta_tags %> diff --git a/spec/dummy/client/package.json b/spec/dummy/client/package.json index 654d10ff6..dd2724658 100644 --- a/spec/dummy/client/package.json +++ b/spec/dummy/client/package.json @@ -34,7 +34,7 @@ "react": "^15.5.4", "react-dom": "^15.5.4", "react-helmet": "^5.0.3", - "react-on-rails": "file:../../..", + "react-on-rails": "6.10.0", "react-proptypes": "^0.0.1", "react-redux": "^5.0.4", "react-router": "3.0.5", @@ -45,7 +45,8 @@ "sass-resources-loader": "1.2.1", "style-loader": "^0.16.1", "url-loader": "^0.5.8", - "webpack": "^2.3.3" + "webpack": "^2.3.3", + "webpack-manifest-plugin": "^1.1.0" }, "devDependencies": { "babel-plugin-react-transform": "^2.0.2", @@ -67,14 +68,14 @@ "scripts": { "lint": "eslint --ext .js,.jsx .", "test": "yarn run build:test && rspec", - "build:test": "yarn run build:client && yarn run build:server", + "build:test": "NODE_ENV=test yarn run build:client && NODE_ENV=test yarn run build:server", "build:production:client": "NODE_ENV=production webpack --config webpack.client.rails.build.config.js", "build:production:server": "NODE_ENV=production webpack --config webpack.server.rails.build.config.js", "build:client": "webpack --config webpack.client.rails.build.config.js", - "build:dev:client": "webpack -w --config webpack.client.rails.build.config.js", - "build:dev:server": "webpack -w --config webpack.server.rails.build.config.js", + "build:dev:client": "NODE_ENV=development webpack -w --config webpack.client.rails.build.config.js", + "build:dev:server": "NODE_ENV=development webpack -w --config webpack.server.rails.build.config.js", "build:server": "webpack --config webpack.server.rails.build.config.js", - "hot-assets": "babel-node server-rails-hot.js", + "hot-assets": "NODE_ENV=development babel-node server-rails-hot.js", "install-react-on-rails": "rm -rf node_modules/react-on-rails && npm i 'file:../../..'" }, "author": "", diff --git a/spec/dummy/client/server-rails-hot.js b/spec/dummy/client/server-rails-hot.js index eb1c6c62d..97b011643 100644 --- a/spec/dummy/client/server-rails-hot.js +++ b/spec/dummy/client/server-rails-hot.js @@ -19,13 +19,13 @@ import WebpackDevServer from 'webpack-dev-server'; import webpackConfig from './webpack.client.rails.hot.config'; -const hotRailsPort = process.env.HOT_RAILS_PORT || 3500; +const { devServer: devServerConfig, publicPath } = require('./webpackConfigLoader.js'); const compiler = webpack(webpackConfig); const devServer = new WebpackDevServer(compiler, { - contentBase: `http://lvh.me:${hotRailsPort}`, - publicPath: webpackConfig.output.publicPath, + contentBase: `http://lvh.me:${devServerConfig.port}`, + publicPath, hot: true, inline: true, historyApiFallback: true, @@ -41,9 +41,9 @@ const devServer = new WebpackDevServer(compiler, { }, }); -devServer.listen(hotRailsPort, 'localhost', err => { +devServer.listen(devServerConfig.port, 'localhost', err => { if (err) console.error(err); console.log( - `=> 🔥 Webpack development server is running on port ${hotRailsPort}` + `=> 🔥 Webpack development server is running on port ${devServerConfig.port}` ); }); diff --git a/spec/dummy/client/webpack.client.base.config.js b/spec/dummy/client/webpack.client.base.config.js index 3b59e200c..8e2c33551 100644 --- a/spec/dummy/client/webpack.client.base.config.js +++ b/spec/dummy/client/webpack.client.base.config.js @@ -2,16 +2,28 @@ // webpack.client.rails.hot.config and webpack.client.rails.build.config. const webpack = require('webpack'); -const path = require('path'); +const { resolve, join } = require('path'); const webpackCommon = require('./webpack.common'); const { assetLoaderRules } = webpackCommon; +const ManifestPlugin = require('webpack-manifest-plugin'); +const { env, paths, publicPath } = require('./webpackConfigLoader.js'); +const manifestPath = resolve('..', paths.output, paths.assets, paths.manifest); + const devBuild = process.env.NODE_ENV !== 'production'; +let sharedManifest = {}; +try { + sharedManifest = require(manifestPath); +} catch (ex) { + console.error(ex); + console.log('Make sure the client build (client.base.build or client.rails.build) creates a manifest in:', manifestPath); +} + module.exports = { // the project dir - context: __dirname, + context: resolve(__dirname), entry: { // This will contain the app entry points defined by // webpack.client.rails.hot.config and webpack.client.rails.build.config @@ -21,11 +33,19 @@ module.exports = { }, resolve: { extensions: ['.js', '.jsx'], + // modules: [ + // paths.source, + // paths.node_modules, + // ], alias: { - images: path.join(process.cwd(), 'app', 'assets', 'images'), + images: join(process.cwd(), 'app', 'assets', 'images'), }, }, + resolveLoader: { + modules: [paths.node_modules], + }, + plugins: [ new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }), new webpack.DefinePlugin({ @@ -40,6 +60,7 @@ module.exports = { return module.context && module.context.indexOf('node_modules') !== -1; }, }), + new ManifestPlugin({ fileName: paths.manifest, publicPath, writeToFileEmit: true, cache: sharedManifest }), ], module: { diff --git a/spec/dummy/client/webpack.client.rails.build.config.js b/spec/dummy/client/webpack.client.rails.build.config.js index 117309604..8c7ef90ab 100644 --- a/spec/dummy/client/webpack.client.rails.build.config.js +++ b/spec/dummy/client/webpack.client.rails.build.config.js @@ -6,15 +6,16 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin'); const config = require('./webpack.client.base.config'); -const path = require('path'); +const { resolve } = require('path'); +const { paths, publicPath } = require('./webpackConfigLoader.js'); const devBuild = process.env.NODE_ENV !== 'production'; config.output = { filename: '[name]-bundle.js', - path: path.resolve(__dirname, '../app/assets/webpack'), - publicPath: '/assets/', -}; + path: resolve('..', paths.output, paths.assets), + publicPath, +}, // See webpack.client.base.config for adding modules common to both the webpack dev server and rails diff --git a/spec/dummy/client/webpack.client.rails.hot.config.js b/spec/dummy/client/webpack.client.rails.hot.config.js index 2cc9feb50..feb2d0f48 100644 --- a/spec/dummy/client/webpack.client.rails.hot.config.js +++ b/spec/dummy/client/webpack.client.rails.hot.config.js @@ -4,22 +4,21 @@ // Note that Foreman (Procfile.dev) has also been configured to take care of this. /* eslint-disable comma-dangle */ -const path = require('path'); +const { resolve } = require('path'); const webpack = require('webpack'); const config = require('./webpack.client.base.config'); - -const hotRailsPort = process.env.HOT_RAILS_PORT || 3500; +const { devServer, paths, publicPath } = require('./webpackConfigLoader.js'); config.entry.app.push( - `webpack-dev-server/client?http://localhost:${hotRailsPort}`, + `webpack-dev-server/client?${devServer.host}:${devServer.port}`, 'webpack/hot/only-dev-server' ); config.output = { filename: '[name]-bundle.js', - path: path.join(__dirname, 'public'), - publicPath: `http://localhost:${hotRailsPort}/`, + path: resolve('..', paths.output, paths.assets), + publicPath, }; config.module.rules.push( @@ -106,7 +105,7 @@ config.module.rules.push( config.plugins.push( new webpack.HotModuleReplacementPlugin(), - new webpack.NoErrorsPlugin() + new webpack.NoEmitOnErrorsPlugin() ); config.devtool = 'eval-source-map'; diff --git a/spec/dummy/client/webpack.server.rails.build.config.js b/spec/dummy/client/webpack.server.rails.build.config.js index 834eadcaa..ac97b6a47 100644 --- a/spec/dummy/client/webpack.server.rails.build.config.js +++ b/spec/dummy/client/webpack.server.rails.build.config.js @@ -2,14 +2,26 @@ /* eslint-disable comma-dangle */ const webpack = require('webpack'); -const path = require('path'); +const { resolve, join } = require('path'); const { imageLoaderRules } = require('./webpack.common'); const webpackCommon = require('./webpack.common'); const { assetLoaderRules } = webpackCommon; +const ManifestPlugin = require('webpack-manifest-plugin'); +const { paths, publicPath } = require('./webpackConfigLoader.js'); +const manifestPath = resolve('..', paths.output, paths.assets, paths.manifest); + const devBuild = process.env.NODE_ENV !== 'production'; const nodeEnv = devBuild ? 'development' : 'production'; +let sharedManifest = {}; +try { + sharedManifest = require(manifestPath); +} catch (ex) { + console.error(ex); + console.log('Make sure the client build (client.base.build or client.rails.build) creates a manifest in:', manifestPath); +} + module.exports = { // the project dir @@ -19,12 +31,12 @@ module.exports = { ], output: { filename: 'server-bundle.js', - path: path.resolve(__dirname, '../app/assets/webpack'), + path: resolve('..', paths.output, paths.assets), }, resolve: { extensions: ['.js', '.jsx'], alias: { - images: path.join(process.cwd(), 'app', 'assets', 'images'), + images: join(process.cwd(), 'app', 'assets', 'images'), }, }, plugins: [ @@ -33,6 +45,12 @@ module.exports = { NODE_ENV: JSON.stringify(nodeEnv), }, }), + new ManifestPlugin({ + fileName: paths.manifest, + publicPath, + writeToFileEmit: true, + cache: sharedManifest, + }), ], module: { rules: [ diff --git a/spec/dummy/client/webpackConfigLoader.js b/spec/dummy/client/webpackConfigLoader.js new file mode 100644 index 000000000..6d6cc0e5b --- /dev/null +++ b/spec/dummy/client/webpackConfigLoader.js @@ -0,0 +1,22 @@ +const { join, resolve } = require('path'); +const { env } = require('process'); +const { safeLoad } = require('js-yaml'); +const { readFileSync } = require('fs'); + +const configPath = resolve('..', 'config', 'webpack'); +const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV]; + +const devServerConfig = join(configPath, 'development.server.yml'); +const devServer = safeLoad(readFileSync(devServerConfig, 'utf8')).development; + +const productionBuild = env.NODE_ENV === 'production'; + +const publicPath = !productionBuild && devServer.enabled ? + `http://${devServer.host}:${devServer.port}/` : `/${paths.assets}/`; + +module.exports = { + devServer, + env, + paths, + publicPath, +}; diff --git a/spec/dummy/client/yarn.lock b/spec/dummy/client/yarn.lock index 8574f73e5..fe3fa90b4 100644 --- a/spec/dummy/client/yarn.lock +++ b/spec/dummy/client/yarn.lock @@ -2259,6 +2259,16 @@ fresh@0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f" +fs-extra@^0.30.0: + version "0.30.0" + resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0" + dependencies: + graceful-fs "^4.1.2" + jsonfile "^2.1.0" + klaw "^1.0.0" + path-is-absolute "^1.0.0" + rimraf "^2.2.8" + fs-readdir-recursive@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.0.0.tgz#8cd1745c8b4f8a29c8caec392476921ba195f560" @@ -2392,7 +2402,7 @@ globule@^1.0.0: lodash "~4.16.4" minimatch "~3.0.2" -graceful-fs@^4.1.2, graceful-fs@^4.1.4: +graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9: version "4.1.11" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658" @@ -2965,6 +2975,12 @@ json5@^0.5.0: version "0.5.1" resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821" +jsonfile@^2.1.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8" + optionalDependencies: + graceful-fs "^4.1.6" + jsonify@~0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73" @@ -2999,6 +3015,12 @@ kind-of@^3.0.2: dependencies: is-buffer "^1.0.2" +klaw@^1.0.0: + version "1.3.1" + resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439" + optionalDependencies: + graceful-fs "^4.1.9" + lazy-cache@^0.2.3: version "0.2.7" resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-0.2.7.tgz#7feddf2dcb6edb77d11ef1d117ab5ffdf0ab1b65" @@ -3161,7 +3183,7 @@ lodash.uniq@^4.3.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" -lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1: +"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" @@ -5222,6 +5244,13 @@ webpack-dev-server@^2.4.2: webpack-dev-middleware "^1.9.0" yargs "^6.0.0" +webpack-manifest-plugin@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-1.1.0.tgz#6b6c718aade8a2537995784b46bd2e9836057caa" + dependencies: + fs-extra "^0.30.0" + lodash ">=3.5 <5" + webpack-sources@^0.1.0: version "0.1.4" resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.4.tgz#ccc2c817e08e5fa393239412690bb481821393cd" diff --git a/spec/dummy/config/initializers/assets.rb b/spec/dummy/config/initializers/assets.rb index 1e210fb3b..6d0adcdf0 100644 --- a/spec/dummy/config/initializers/assets.rb +++ b/spec/dummy/config/initializers/assets.rb @@ -11,7 +11,7 @@ # Rails.application.config.assets.precompile += %w( search.js ) # Add folder with webpack generated assets to assets.paths -Rails.application.config.assets.paths << Rails.root.join("app", "assets", "webpack") +Rails.application.config.assets.paths << Rails.root.join("public", "webpack") # Precompile additional assets. # application.js, application.css, and all non-JS/CSS in app/assets folder are already added. diff --git a/spec/dummy/config/initializers/react_on_rails.rb b/spec/dummy/config/initializers/react_on_rails.rb index dbd916d72..87fab8d2c 100644 --- a/spec/dummy/config/initializers/react_on_rails.rb +++ b/spec/dummy/config/initializers/react_on_rails.rb @@ -15,10 +15,11 @@ def self.custom_context(view_context) ReactOnRails.configure do |config| # Directory where your generated assets go. All generated assets must go to the same directory. # Configure this in your webpack config files. This relative to your Rails root directory. - config.generated_assets_dir = File.join(%w(app assets webpack)) + config.generated_assets_dir = File.join(%w[public webpack], Rails.env) # Define the files we need to check for webpack compilation when running tests. - config.webpack_generated_files = %w(app-bundle.js vendor-bundle.js server-bundle.js) + config.webpack_generated_files = %w(app-bundle.js vendor-bundle.js server-bundle.js + app-bundle.css vendor-bundle.css) # This is the file used for server rendering of React when using `(prerender: true)` # If you are never using server rendering, you may set this to "". diff --git a/spec/dummy/config/webpack/development.server.yml b/spec/dummy/config/webpack/development.server.yml new file mode 100644 index 000000000..0174fdd68 --- /dev/null +++ b/spec/dummy/config/webpack/development.server.yml @@ -0,0 +1,8 @@ +default: &default + enabled: false + host: localhost + port: 3500 + +development: + <<: *default + # enabled: true diff --git a/spec/dummy/config/webpack/paths.yml b/spec/dummy/config/webpack/paths.yml new file mode 100644 index 000000000..682443808 --- /dev/null +++ b/spec/dummy/config/webpack/paths.yml @@ -0,0 +1,19 @@ +default: &default + config: client/webpack + output: public + assets: webpack + manifest: manifest.json + node_modules: client/node_modules + source: client/app + +development: + <<: *default + assets: webpack/development + +test: + <<: *default + assets: webpack/test + +production: + <<: *default + assets: webpack/production diff --git a/yarn.lock b/yarn.lock index 63eefbdfa..df45a2a96 100644 --- a/yarn.lock +++ b/yarn.lock @@ -877,6 +877,10 @@ babel-types@^6.15.0, babel-types@^6.19.0, babel-types@^6.24.1: lodash "^4.2.0" to-fast-properties "^1.0.1" +babel@^6.23.0: + version "6.23.0" + resolved "https://registry.yarnpkg.com/babel/-/babel-6.23.0.tgz#d0d1e7d803e974765beea3232d4e153c0efb90f4" + babelify@^7.3.0: version "7.3.0" resolved "https://registry.yarnpkg.com/babelify/-/babelify-7.3.0.tgz#aa56aede7067fd7bd549666ee16dc285087e88e5" @@ -2721,11 +2725,11 @@ oauth-sign@~0.8.1: version "0.8.2" resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43" -object-assign@^4.0.0, object-assign@^4.0.1, object-assign@^4.1.0: +object-assign@^4.0.0, object-assign@^4.0.1: version "4.1.0" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0" -object-assign@^4.1.1: +object-assign@^4.1.0, object-assign@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" From 42c8f0dd6bb1d178fa489c65ac4b59d799de9999 Mon Sep 17 00:00:00 2001 From: Daniel Szatmari Date: Sun, 16 Apr 2017 10:39:47 +0200 Subject: [PATCH 02/24] update generators --- .../react_on_rails/base_generator.rb | 28 ++++--------------- .../base/base/client/package.json.tt | 8 ++++-- .../base/base/client/webpack.config.js | 24 +++++++++++++--- .../base/base/client/webpackConfigLoader.js | 15 ++++++++++ .../config/initializers/react_on_rails.rb.tt | 2 +- .../base/base/config/webpack/paths.yml | 19 +++++++++++++ 6 files changed, 66 insertions(+), 30 deletions(-) create mode 100644 lib/generators/react_on_rails/templates/base/base/client/webpackConfigLoader.js create mode 100644 lib/generators/react_on_rails/templates/base/base/config/webpack/paths.yml diff --git a/lib/generators/react_on_rails/base_generator.rb b/lib/generators/react_on_rails/base_generator.rb index 886f081a2..cda9454db 100644 --- a/lib/generators/react_on_rails/base_generator.rb +++ b/lib/generators/react_on_rails/base_generator.rb @@ -27,7 +27,7 @@ def update_git_ignore node_modules # Generated js bundles - /app/assets/webpack/* + /public/webpack/* DATA if dest_file_exists?(".gitignore") @@ -37,25 +37,7 @@ def update_git_ignore end end - def update_application_js - data = <<-DATA.strip_heredoc - //= require webpack-bundle - - DATA - - app_js_path = "app/assets/javascripts/application.js" - found_app_js = dest_file_exists?(app_js_path) || dest_file_exists?("#{app_js_path}.coffee") - if found_app_js - prepend_to_file(found_app_js, data) - else - create_file(app_js_path, data) - end - end - - def strip_application_js_of_double_blank_lines - application_js = File.join(destination_root, "app/assets/javascripts/application.js") - gsub_file(application_js, /^\n^\n/, "\n") - end + # TODO: prepend javacript_pack_tag to application layout def create_react_directories dirs = %w(components containers startup) @@ -65,8 +47,10 @@ def create_react_directories def copy_base_files base_path = "base/base/" base_files = %w(app/controllers/hello_world_controller.rb + config/webpack/paths.yml client/.babelrc client/webpack.config.js + client/webpackConfigLoader.js client/REACT_ON_RAILS_CLIENT_README.md) base_files.each { |file| copy_file("#{base_path}#{file}", file) } end @@ -80,7 +64,7 @@ def template_base_files end def add_base_gems_to_gemfile - append_to_file("Gemfile", "\ngem 'mini_racer', platforms: :ruby\n") + append_to_file("Gemfile", "\ngem 'mini_racer', platforms: :ruby\ngem 'webpacker_lite'\n") end ASSETS_RB_APPEND = <<-DATA.strip_heredoc @@ -93,7 +77,7 @@ def add_base_gems_to_gemfile # Rails.application.config.assets.precompile += %w( server-bundle.js ) # Add folder with webpack generated assets to assets.paths -Rails.application.config.assets.paths << Rails.root.join("app", "assets", "webpack") +Rails.application.config.assets.paths << Rails.root.join("public", "webpack") DATA def append_to_assets_initializer diff --git a/lib/generators/react_on_rails/templates/base/base/client/package.json.tt b/lib/generators/react_on_rails/templates/base/base/client/package.json.tt index 538444400..00e9ef0aa 100644 --- a/lib/generators/react_on_rails/templates/base/base/client/package.json.tt +++ b/lib/generators/react_on_rails/templates/base/base/client/package.json.tt @@ -8,9 +8,9 @@ "npm": "4.1.1" }, "scripts": { - "build:test": "webpack --config webpack.config.js", + "build:test": "NODE_ENV=test webpack --config webpack.config.js", "build:production": "NODE_ENV=production webpack --config webpack.config.js", - "build:development": "webpack -w --config webpack.config.js" + "build:development": "NODE_ENV=development webpack -w --config webpack.config.js" }, "cacheDirectories": ["node_modules", "client/node_modules"], "dependencies": { @@ -25,6 +25,7 @@ "es5-shim": "^4.5.9", "expose-loader": "^0.7.3", "imports-loader": "^0.7.1", + "js-yaml": "^3.8.2", "react": "^15.5.4", "react-dom": "^15.5.4", "react-on-rails": "<%= VersionSyntaxConverter.new.rubygem_to_npm %>", @@ -32,7 +33,8 @@ "react-redux": "^5.0.4", "redux": "^3.6.0", <%- end -%> - "webpack": "^2.3.3" + "webpack": "^2.3.3", + "webpack-manifest-plugin": "^1.1.0" }, "devDependencies": { } diff --git a/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js b/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js index 7266ac43d..0439f4700 100644 --- a/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js +++ b/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js @@ -3,11 +3,16 @@ "only-multiline"} ] */ const webpack = require('webpack'); -const pathLib = require('path'); +const { resolve } = require('path'); +const ManifestPlugin = require('webpack-manifest-plugin'); +const { env, paths, publicPath } = require('./webpackConfigLoader.js'); -const devBuild = process.env.NODE_ENV !== 'production'; +const devBuild = env !== 'production'; const config = { + + context: resolve(__dirname), + entry: [ 'es5-shim/es5-shim', 'es5-shim/es5-sham', @@ -17,15 +22,26 @@ const config = { output: { filename: 'webpack-bundle.js', - path: pathLib.resolve(__dirname, '../app/assets/webpack'), + path: resolve('..', paths.output, paths.assets), }, resolve: { extensions: ['.js', '.jsx'], + modules: [ + paths.source, + paths.node_modules, + ], }, + + resolveLoader: { + modules: [paths.node_modules], + }, + plugins: [ - new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }), + new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))), + new ManifestPlugin({ fileName: paths.manifest, publicPath, writeToFileEmit: true }), ], + module: { rules: [ { diff --git a/lib/generators/react_on_rails/templates/base/base/client/webpackConfigLoader.js b/lib/generators/react_on_rails/templates/base/base/client/webpackConfigLoader.js new file mode 100644 index 000000000..30b771bb9 --- /dev/null +++ b/lib/generators/react_on_rails/templates/base/base/client/webpackConfigLoader.js @@ -0,0 +1,15 @@ +const { join, resolve } = require('path'); +const { env } = require('process'); +const { safeLoad } = require('js-yaml'); +const { readFileSync } = require('fs'); + +const configPath = resolve('..', 'config', 'webpack'); +const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV]; + +const publicPath = `/${paths.assets}/`; + +module.exports = { + env, + paths, + publicPath, +}; diff --git a/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb.tt b/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb.tt index f180c73e4..4a1ba9b70 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb.tt +++ b/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb.tt @@ -4,7 +4,7 @@ ReactOnRails.configure do |config| # Directory where your generated assets go. All generated assets must go to the same directory. # Configure this in your webpack config files. This relative to your Rails root directory. - config.generated_assets_dir = File.join(%w(app assets webpack)) + config.generated_assets_dir = File.join(%w[public webpack], Rails.env) # Define the files we need to check for webpack compilation when running tests. config.webpack_generated_files = %w( webpack-bundle.js ) diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/paths.yml b/lib/generators/react_on_rails/templates/base/base/config/webpack/paths.yml new file mode 100644 index 000000000..682443808 --- /dev/null +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/paths.yml @@ -0,0 +1,19 @@ +default: &default + config: client/webpack + output: public + assets: webpack + manifest: manifest.json + node_modules: client/node_modules + source: client/app + +development: + <<: *default + assets: webpack/development + +test: + <<: *default + assets: webpack/test + +production: + <<: *default + assets: webpack/production From 697ebad6b0917faebb475c945799ef76f0412903 Mon Sep 17 00:00:00 2001 From: Daniel Szatmari Date: Wed, 19 Apr 2017 11:14:15 +0200 Subject: [PATCH 03/24] update specs --- lib/generators/react_on_rails/base_generator.rb | 4 ++++ spec/dummy/app/views/layouts/application.html.erb | 13 ++++++++----- spec/dummy/config/initializers/react_on_rails.rb | 2 +- .../generators/install_generator_spec.rb | 12 ++++++++++-- .../shared_examples/base_generator_examples.rb | 12 +----------- 5 files changed, 24 insertions(+), 19 deletions(-) diff --git a/lib/generators/react_on_rails/base_generator.rb b/lib/generators/react_on_rails/base_generator.rb index cda9454db..33ba97aa5 100644 --- a/lib/generators/react_on_rails/base_generator.rb +++ b/lib/generators/react_on_rails/base_generator.rb @@ -122,6 +122,10 @@ def print_helpful_message What to do next: + - Include your webpack assets to your application layout. + + <%= javascript_pack_tag 'main' %> + - Ensure your bundle and yarn installs of dependencies are up to date. bundle && yarn diff --git a/spec/dummy/app/views/layouts/application.html.erb b/spec/dummy/app/views/layouts/application.html.erb index 9ec8f0f83..29787f7d2 100644 --- a/spec/dummy/app/views/layouts/application.html.erb +++ b/spec/dummy/app/views/layouts/application.html.erb @@ -9,18 +9,21 @@ <%= yield :head %> - <%= stylesheet_pack_tag(static: ['vendor, app'], + <%= stylesheet_pack_tag(static: 'app', media: 'all', - 'data-turbolinks-track' => true)) %> + 'data-turbolinks-track': true) %> - <%= javascript_pack_tag hot: ['vendor', 'app'] %> + <%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js', + 'http://localhost:3500/app-bundle.js']) %> - <%= javascript_pack_tag(static: ['vendor', 'app'], - 'data-turbolinks-track' => true) %> + <%= javascript_pack_tag('vendor', + 'data-turbolinks-track': true) %> + <%= javascript_pack_tag('app', + 'data-turbolinks-track': true) %> <%= csrf_meta_tags %> diff --git a/spec/dummy/config/initializers/react_on_rails.rb b/spec/dummy/config/initializers/react_on_rails.rb index 87fab8d2c..c9c004cd9 100644 --- a/spec/dummy/config/initializers/react_on_rails.rb +++ b/spec/dummy/config/initializers/react_on_rails.rb @@ -97,5 +97,5 @@ def self.custom_context(view_context) # Client js uses assets not digested by rails. # For any asset matching this regex, a file is copied to the correct path to have a digest. # To disable creating digested assets, set this parameter to nil. - config.symlink_non_digested_assets_regex = /\.(png|jpg|jpeg|gif|tiff|woff|ttf|eot|svg|map)/ + config.symlink_non_digested_assets_regex = nil end diff --git a/spec/react_on_rails/generators/install_generator_spec.rb b/spec/react_on_rails/generators/install_generator_spec.rb index e524e3ec9..0b31d6f5b 100644 --- a/spec/react_on_rails/generators/install_generator_spec.rb +++ b/spec/react_on_rails/generators/install_generator_spec.rb @@ -73,7 +73,7 @@ node_modules # Generated js bundles - /app/assets/webpack/* + /public/webpack/* MSG expect(GeneratorMessages.output) @@ -87,6 +87,10 @@ What to do next: + - Include your webpack assets to your application layout. + + <%= javascript_pack_tag 'main' %> + - Ensure your bundle and yarn installs of dependencies are up to date. bundle && yarn @@ -111,6 +115,10 @@ What to do next: + - Include your webpack assets to your application layout. + + <%= javascript_pack_tag 'main' %> + - Ensure your bundle and yarn installs of dependencies are up to date. bundle && yarn @@ -120,7 +128,7 @@ foreman start -f Procfile.dev - Visit http://localhost:3000/hello_world and see your React On Rails app running! - MSG + MSG expect(GeneratorMessages.output) .to include(GeneratorMessages.format_info(expected)) end diff --git a/spec/react_on_rails/support/shared_examples/base_generator_examples.rb b/spec/react_on_rails/support/shared_examples/base_generator_examples.rb index fa5ed45ad..f3d2485dd 100644 --- a/spec/react_on_rails/support/shared_examples/base_generator_examples.rb +++ b/spec/react_on_rails/support/shared_examples/base_generator_examples.rb @@ -16,21 +16,11 @@ node_modules # Generated js bundles - /app/assets/webpack/* + /public/webpack/* MATCH assert_file ".gitignore", match end - it "updates application.js" do - match = <<-MATCH.strip_heredoc - //= require webpack-bundle - - MATCH - assert_file("app/assets/javascripts/application.js") do |contents| - assert_match(match, contents) - end - end - it "creates react directories" do dirs = %w(components containers startup) dirs.each { |dirname| assert_directory "client/app/bundles/HelloWorld/#{dirname}" } From f39838da5e5ee9ff76e5b1622c38e1745ed48b21 Mon Sep 17 00:00:00 2001 From: Daniel Szatmari Date: Thu, 20 Apr 2017 08:28:17 +0200 Subject: [PATCH 04/24] cleanup --- .../templates/base/base/config/webpack/paths.yml | 1 - spec/dummy/client/webpack.client.base.config.js | 7 +------ spec/dummy/client/webpack.server.rails.build.config.js | 2 +- 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/paths.yml b/lib/generators/react_on_rails/templates/base/base/config/webpack/paths.yml index 682443808..007cc8d6e 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/paths.yml +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/paths.yml @@ -1,5 +1,4 @@ default: &default - config: client/webpack output: public assets: webpack manifest: manifest.json diff --git a/spec/dummy/client/webpack.client.base.config.js b/spec/dummy/client/webpack.client.base.config.js index 8e2c33551..c24416dd8 100644 --- a/spec/dummy/client/webpack.client.base.config.js +++ b/spec/dummy/client/webpack.client.base.config.js @@ -16,8 +16,7 @@ let sharedManifest = {}; try { sharedManifest = require(manifestPath); } catch (ex) { - console.error(ex); - console.log('Make sure the client build (client.base.build or client.rails.build) creates a manifest in:', manifestPath); + console.log('No manifest found. It will be created at:', manifestPath); } module.exports = { @@ -33,10 +32,6 @@ module.exports = { }, resolve: { extensions: ['.js', '.jsx'], - // modules: [ - // paths.source, - // paths.node_modules, - // ], alias: { images: join(process.cwd(), 'app', 'assets', 'images'), }, diff --git a/spec/dummy/client/webpack.server.rails.build.config.js b/spec/dummy/client/webpack.server.rails.build.config.js index ac97b6a47..ba8a2209d 100644 --- a/spec/dummy/client/webpack.server.rails.build.config.js +++ b/spec/dummy/client/webpack.server.rails.build.config.js @@ -19,7 +19,7 @@ try { sharedManifest = require(manifestPath); } catch (ex) { console.error(ex); - console.log('Make sure the client build (client.base.build or client.rails.build) creates a manifest in:', manifestPath); + console.log('No manifest found. It will be created at:', manifestPath); } module.exports = { From 1eaaf37d1d2aaa4c1387781aebb1d6cfa0b183e7 Mon Sep 17 00:00:00 2001 From: Daniel Szatmari Date: Sat, 22 Apr 2017 09:21:13 +0200 Subject: [PATCH 05/24] fix dummy setup --- .../templates/base/base/client/webpack.config.js | 2 +- spec/dummy/Gemfile.lock | 7 +++---- spec/dummy/app/views/layouts/application.html.erb | 8 ++------ spec/dummy/client/package.json | 2 +- spec/dummy/client/webpack.client.base.config.js | 7 ++----- spec/dummy/client/webpack.server.rails.build.config.js | 4 ++-- spec/dummy/client/yarn.lock | 8 ++++---- spec/dummy/config/initializers/assets.rb | 2 +- spec/dummy/config/initializers/react_on_rails.rb | 2 +- spec/dummy/config/webpack/development.server.yml | 2 +- spec/dummy/spec/requests/server_render_check_spec.rb | 2 +- .../support/shared_examples/base_generator_examples.rb | 2 ++ 12 files changed, 21 insertions(+), 27 deletions(-) diff --git a/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js b/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js index 0439f4700..effb6faff 100644 --- a/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js +++ b/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js @@ -4,7 +4,7 @@ const webpack = require('webpack'); const { resolve } = require('path'); -const ManifestPlugin = require('webpack-manifest-plugin'); +const ManifestPlugin = require('webpack-manifest-plugin'); // eslint-disable-line import/no-unresolved const { env, paths, publicPath } = require('./webpackConfigLoader.js'); const devBuild = env !== 'production'; diff --git a/spec/dummy/Gemfile.lock b/spec/dummy/Gemfile.lock index f3b10a04c..f26cf2b56 100644 --- a/spec/dummy/Gemfile.lock +++ b/spec/dummy/Gemfile.lock @@ -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) @@ -326,7 +325,7 @@ DEPENDENCIES selenium-webdriver spring sqlite3 - turbolinks (~> 5.0) + turbolinks (= 2.5.3) uglifier webpacker_lite (= 0.0.5) diff --git a/spec/dummy/app/views/layouts/application.html.erb b/spec/dummy/app/views/layouts/application.html.erb index 29787f7d2..625e5af11 100644 --- a/spec/dummy/app/views/layouts/application.html.erb +++ b/spec/dummy/app/views/layouts/application.html.erb @@ -16,14 +16,10 @@ - <%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js', - 'http://localhost:3500/app-bundle.js']) %> - <%= javascript_pack_tag('vendor', - 'data-turbolinks-track': true) %> - <%= javascript_pack_tag('app', - 'data-turbolinks-track': true) %> + <%= javascript_pack_tag('vendor') %> + <%= javascript_pack_tag('app') %> <%= csrf_meta_tags %> diff --git a/spec/dummy/client/package.json b/spec/dummy/client/package.json index dd2724658..56d4a69b5 100644 --- a/spec/dummy/client/package.json +++ b/spec/dummy/client/package.json @@ -34,7 +34,7 @@ "react": "^15.5.4", "react-dom": "^15.5.4", "react-helmet": "^5.0.3", - "react-on-rails": "6.10.0", + "react-on-rails": "file:../../..", "react-proptypes": "^0.0.1", "react-redux": "^5.0.4", "react-router": "3.0.5", diff --git a/spec/dummy/client/webpack.client.base.config.js b/spec/dummy/client/webpack.client.base.config.js index c24416dd8..0f279ba11 100644 --- a/spec/dummy/client/webpack.client.base.config.js +++ b/spec/dummy/client/webpack.client.base.config.js @@ -16,7 +16,7 @@ let sharedManifest = {}; try { sharedManifest = require(manifestPath); } catch (ex) { - console.log('No manifest found. It will be created at:', manifestPath); + console.info('No manifest found. It will be created at:', manifestPath); } module.exports = { @@ -34,13 +34,10 @@ module.exports = { extensions: ['.js', '.jsx'], alias: { images: join(process.cwd(), 'app', 'assets', 'images'), + 'react-on-rails': resolve(__dirname, '..', '..', '..'), }, }, - resolveLoader: { - modules: [paths.node_modules], - }, - plugins: [ new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }), new webpack.DefinePlugin({ diff --git a/spec/dummy/client/webpack.server.rails.build.config.js b/spec/dummy/client/webpack.server.rails.build.config.js index ba8a2209d..e6bddfc2b 100644 --- a/spec/dummy/client/webpack.server.rails.build.config.js +++ b/spec/dummy/client/webpack.server.rails.build.config.js @@ -18,8 +18,7 @@ let sharedManifest = {}; try { sharedManifest = require(manifestPath); } catch (ex) { - console.error(ex); - console.log('No manifest found. It will be created at:', manifestPath); + console.info('No manifest found. It will be created at:', manifestPath); } module.exports = { @@ -37,6 +36,7 @@ module.exports = { extensions: ['.js', '.jsx'], alias: { images: join(process.cwd(), 'app', 'assets', 'images'), + 'react-on-rails': resolve(__dirname, '..', '..', '..'), }, }, plugins: [ diff --git a/spec/dummy/client/yarn.lock b/spec/dummy/client/yarn.lock index fe3fa90b4..4d1db74da 100644 --- a/spec/dummy/client/yarn.lock +++ b/spec/dummy/client/yarn.lock @@ -4454,8 +4454,8 @@ resolve-from@^1.0.0: resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226" resolve-pathname@^2.0.0: - version "2.0.2" - resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.0.2.tgz#e55c016eb2e9df1de98e85002282bfb38c630436" + version "2.1.0" + resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.1.0.tgz#e8358801b86b83b17560d4e3c382d7aef2100944" resolve-url-loader@^2.0.2: version "2.0.2" @@ -5162,8 +5162,8 @@ validate-npm-package-license@^3.0.1: spdx-expression-parse "~1.0.0" value-equal@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.2.0.tgz#4f41c60a3fc011139a2ec3d3340a8998ae8b69c0" + version "0.2.1" + resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.2.1.tgz#c220a304361fce6994dbbedaa3c7e1a1b895871d" vary@~1.1.0: version "1.1.0" diff --git a/spec/dummy/config/initializers/assets.rb b/spec/dummy/config/initializers/assets.rb index 6d0adcdf0..c2552cea4 100644 --- a/spec/dummy/config/initializers/assets.rb +++ b/spec/dummy/config/initializers/assets.rb @@ -11,7 +11,7 @@ # Rails.application.config.assets.precompile += %w( search.js ) # Add folder with webpack generated assets to assets.paths -Rails.application.config.assets.paths << Rails.root.join("public", "webpack") +Rails.application.config.assets.paths << Rails.root.join("public", "webpack", Rails.env) # Precompile additional assets. # application.js, application.css, and all non-JS/CSS in app/assets folder are already added. diff --git a/spec/dummy/config/initializers/react_on_rails.rb b/spec/dummy/config/initializers/react_on_rails.rb index c9c004cd9..cbbddb460 100644 --- a/spec/dummy/config/initializers/react_on_rails.rb +++ b/spec/dummy/config/initializers/react_on_rails.rb @@ -15,7 +15,7 @@ def self.custom_context(view_context) ReactOnRails.configure do |config| # Directory where your generated assets go. All generated assets must go to the same directory. # Configure this in your webpack config files. This relative to your Rails root directory. - config.generated_assets_dir = File.join(%w[public webpack], Rails.env) + config.generated_assets_dir = File.join(%w(public webpack), Rails.env) # Define the files we need to check for webpack compilation when running tests. config.webpack_generated_files = %w(app-bundle.js vendor-bundle.js server-bundle.js diff --git a/spec/dummy/config/webpack/development.server.yml b/spec/dummy/config/webpack/development.server.yml index 0174fdd68..d99cbbd95 100644 --- a/spec/dummy/config/webpack/development.server.yml +++ b/spec/dummy/config/webpack/development.server.yml @@ -5,4 +5,4 @@ default: &default development: <<: *default - # enabled: true + enabled: false diff --git a/spec/dummy/spec/requests/server_render_check_spec.rb b/spec/dummy/spec/requests/server_render_check_spec.rb index 6564d1e98..b66360df4 100644 --- a/spec/dummy/spec/requests/server_render_check_spec.rb +++ b/spec/dummy/spec/requests/server_render_check_spec.rb @@ -29,7 +29,7 @@ end describe "reloading the server bundle" do - let(:server_bundle) { File.expand_path("../../../app/assets/webpack/server-bundle.js", __FILE__) } + let(:server_bundle) { File.expand_path("../../../public/webpack/" + Rails.env + "/server-bundle.js", __FILE__) } let!(:original_bundle_text) { File.read(server_bundle) } before do diff --git a/spec/react_on_rails/support/shared_examples/base_generator_examples.rb b/spec/react_on_rails/support/shared_examples/base_generator_examples.rb index f3d2485dd..eed0c6e18 100644 --- a/spec/react_on_rails/support/shared_examples/base_generator_examples.rb +++ b/spec/react_on_rails/support/shared_examples/base_generator_examples.rb @@ -33,7 +33,9 @@ client/webpack.config.js client/.babelrc client/package.json + client/webpackConfigLoader.js config/initializers/react_on_rails.rb + config/webpack/paths.yml package.json Procfile.dev).each { |file| assert_file(file) } end From 7bc740711ba692dea0235e857ad859f1e5fa5e27 Mon Sep 17 00:00:00 2001 From: Daniel Szatmari Date: Sat, 22 Apr 2017 20:49:10 +0200 Subject: [PATCH 06/24] get examples work (wip) --- lib/generators/react_on_rails/base_generator.rb | 4 +--- .../app/views/layouts/application.html.erb.tt | 15 +++++++++++++++ .../templates/base/base/client/webpack.config.js | 7 ------- rakelib/example_type.rb | 4 ++-- spec/dummy/app/views/layouts/application.html.erb | 9 ++------- 5 files changed, 20 insertions(+), 19 deletions(-) create mode 100644 lib/generators/react_on_rails/templates/base/base/app/views/layouts/application.html.erb.tt diff --git a/lib/generators/react_on_rails/base_generator.rb b/lib/generators/react_on_rails/base_generator.rb index 33ba97aa5..4f6a119ef 100644 --- a/lib/generators/react_on_rails/base_generator.rb +++ b/lib/generators/react_on_rails/base_generator.rb @@ -37,8 +37,6 @@ def update_git_ignore end end - # TODO: prepend javacript_pack_tag to application layout - def create_react_directories dirs = %w(components containers startup) dirs.each { |name| empty_directory("client/app/bundles/HelloWorld/#{name}") } @@ -77,7 +75,7 @@ def add_base_gems_to_gemfile # Rails.application.config.assets.precompile += %w( server-bundle.js ) # Add folder with webpack generated assets to assets.paths -Rails.application.config.assets.paths << Rails.root.join("public", "webpack") +Rails.application.config.assets.paths << Rails.root.join("public", "webpack", Rails.env) DATA def append_to_assets_initializer diff --git a/lib/generators/react_on_rails/templates/base/base/app/views/layouts/application.html.erb.tt b/lib/generators/react_on_rails/templates/base/base/app/views/layouts/application.html.erb.tt new file mode 100644 index 000000000..8cbcf7494 --- /dev/null +++ b/lib/generators/react_on_rails/templates/base/base/app/views/layouts/application.html.erb.tt @@ -0,0 +1,15 @@ + + + + ReactOnRailsWithWebpacker + <%%= csrf_meta_tags %> + + <%%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> + <%%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> + <%%= javascript_pack_tag 'main' %> + + + + <%%= yield %> + + diff --git a/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js b/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js index effb6faff..6240a98e4 100644 --- a/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js +++ b/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js @@ -27,15 +27,8 @@ const config = { resolve: { extensions: ['.js', '.jsx'], - modules: [ - paths.source, - paths.node_modules, - ], }, - resolveLoader: { - modules: [paths.node_modules], - }, plugins: [ new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))), diff --git a/rakelib/example_type.rb b/rakelib/example_type.rb index 3cf14c2a7..2dfcb80dd 100644 --- a/rakelib/example_type.rb +++ b/rakelib/example_type.rb @@ -49,7 +49,7 @@ def node_modules_dir end def webpack_bundles_dir - File.join(dir, "app", "assets", "javascripts", "webpack") + File.join(dir, "public", "webpack", "test") end def webpack_bundles @@ -131,7 +131,7 @@ def clean_files def build_webpack_bundles_shell_commands webpack_command = File.join("$(yarn bin)", "webpack") shell_commands = [] - shell_commands << "#{webpack_command} --config webpack.config.js" + shell_commands << "NODE_ENV=test #{webpack_command} --config webpack.config.js" end # Assumes we are inside a rails app's folder and necessary gems have been installed diff --git a/spec/dummy/app/views/layouts/application.html.erb b/spec/dummy/app/views/layouts/application.html.erb index 625e5af11..bb14ab6ed 100644 --- a/spec/dummy/app/views/layouts/application.html.erb +++ b/spec/dummy/app/views/layouts/application.html.erb @@ -13,13 +13,8 @@ media: 'all', 'data-turbolinks-track': true) %> - - - - - - <%= javascript_pack_tag('vendor') %> - <%= javascript_pack_tag('app') %> + <%= javascript_pack_tag('vendor', 'data-turbolinks-track': true) %>) + <%= javascript_pack_tag('app', 'data-turbolinks-track': true) %>) <%= csrf_meta_tags %> From 469f7f28a5acdfcdcc8c3a797df5495aa007e252 Mon Sep 17 00:00:00 2001 From: Daniel Szatmari Date: Sun, 23 Apr 2017 09:59:05 +0200 Subject: [PATCH 07/24] add layout template - add alias for gen examples --- lib/generators/react_on_rails/base_generator.rb | 5 +++-- .../react_on_rails/dev_tests_generator.rb | 14 ++++++++++++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/lib/generators/react_on_rails/base_generator.rb b/lib/generators/react_on_rails/base_generator.rb index 4f6a119ef..04023013d 100644 --- a/lib/generators/react_on_rails/base_generator.rb +++ b/lib/generators/react_on_rails/base_generator.rb @@ -55,10 +55,11 @@ def copy_base_files def template_base_files base_path = "base/base/" - %w(config/initializers/react_on_rails.rb + %w(app/views/layouts/application.html.erb + config/initializers/react_on_rails.rb Procfile.dev package.json - client/package.json).each { |file| template("#{base_path}#{file}.tt", file) } + client/package.json).each { |file| template("#{base_path}#{file}.tt", file, force: true) } end def add_base_gems_to_gemfile diff --git a/lib/generators/react_on_rails/dev_tests_generator.rb b/lib/generators/react_on_rails/dev_tests_generator.rb index 54d2a14a5..a2deee736 100644 --- a/lib/generators/react_on_rails/dev_tests_generator.rb +++ b/lib/generators/react_on_rails/dev_tests_generator.rb @@ -45,6 +45,20 @@ def change_package_json_to_use_local_react_on_rails_module File.open(package_json, "w+") { |f| f.puts new_contents } end + # Since we use the local react-on-rails package, we need an alias for it + def add_alias_for_react_on_rails + config = File.join(destination_root, "client", "webpack.config.js") + old_contents = File.read(config) + new_contents = old_contents.gsub( + /extensions: \['\.js', '\.jsx'\],/, + 'extensions: [\'.js\', \'.jsx\'], + alias: { + \'react-on-rails\': resolve(__dirname, \'..\', \'..\', \'..\', \'..\'), + },' + ) + File.open(config, "w+") { |f| f.puts new_contents } + end + def change_webpack_client_base_config_to_include_fallback sentinel = /^\s\s},\n\s\splugins: \[\n/ config = File.join(destination_root, "client", "webpack.config.js") From 99d58b1c0ab38a1c8a68e00a7de2b93ae5f4f29e Mon Sep 17 00:00:00 2001 From: Daniel Szatmari Date: Sun, 23 Apr 2017 19:25:00 +0200 Subject: [PATCH 08/24] change layout --- lib/generators/react_on_rails/base_generator.rb | 4 ++-- .../base/base/app/controllers/hello_world_controller.rb | 2 ++ .../{application.html.erb.tt => hello_world.html.erb.tt} | 0 3 files changed, 4 insertions(+), 2 deletions(-) rename lib/generators/react_on_rails/templates/base/base/app/views/layouts/{application.html.erb.tt => hello_world.html.erb.tt} (100%) diff --git a/lib/generators/react_on_rails/base_generator.rb b/lib/generators/react_on_rails/base_generator.rb index 04023013d..f46d4768f 100644 --- a/lib/generators/react_on_rails/base_generator.rb +++ b/lib/generators/react_on_rails/base_generator.rb @@ -55,11 +55,11 @@ def copy_base_files def template_base_files base_path = "base/base/" - %w(app/views/layouts/application.html.erb + %w(app/views/layouts/hello_world.html.erb config/initializers/react_on_rails.rb Procfile.dev package.json - client/package.json).each { |file| template("#{base_path}#{file}.tt", file, force: true) } + client/package.json).each { |file| template("#{base_path}#{file}.tt", file) } end def add_base_gems_to_gemfile diff --git a/lib/generators/react_on_rails/templates/base/base/app/controllers/hello_world_controller.rb b/lib/generators/react_on_rails/templates/base/base/app/controllers/hello_world_controller.rb index a8f38ef25..91763aff4 100644 --- a/lib/generators/react_on_rails/templates/base/base/app/controllers/hello_world_controller.rb +++ b/lib/generators/react_on_rails/templates/base/base/app/controllers/hello_world_controller.rb @@ -1,4 +1,6 @@ class HelloWorldController < ApplicationController + layout "hello_world" + def index @hello_world_props = { name: "Stranger" } end diff --git a/lib/generators/react_on_rails/templates/base/base/app/views/layouts/application.html.erb.tt b/lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb.tt similarity index 100% rename from lib/generators/react_on_rails/templates/base/base/app/views/layouts/application.html.erb.tt rename to lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb.tt From e18cce979b9e33a654e955776d56a8d9ec5a9fac Mon Sep 17 00:00:00 2001 From: Daniel Szatmari Date: Sun, 23 Apr 2017 19:56:28 +0200 Subject: [PATCH 09/24] fix dev config when hot reloading --- .eslintignore | 2 ++ .../base/base/app/controllers/hello_world_controller.rb | 2 +- spec/dummy/client/webpackConfigLoader.js | 3 +++ 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/.eslintignore b/.eslintignore index e0b10d03b..4d94f20bb 100644 --- a/.eslintignore +++ b/.eslintignore @@ -7,7 +7,9 @@ node_package/tests/node_modules node_package/webpack.config.js **/node_modules/** **/assets/webpack/** +**/public/webpack/** **/generated/** **/app/assets/javascripts/application.js **/coverage/** **/cable.js +gen-examples/**/webpack.config.js diff --git a/lib/generators/react_on_rails/templates/base/base/app/controllers/hello_world_controller.rb b/lib/generators/react_on_rails/templates/base/base/app/controllers/hello_world_controller.rb index 91763aff4..1ae3ddaa4 100644 --- a/lib/generators/react_on_rails/templates/base/base/app/controllers/hello_world_controller.rb +++ b/lib/generators/react_on_rails/templates/base/base/app/controllers/hello_world_controller.rb @@ -1,6 +1,6 @@ class HelloWorldController < ApplicationController layout "hello_world" - + def index @hello_world_props = { name: "Stranger" } end diff --git a/spec/dummy/client/webpackConfigLoader.js b/spec/dummy/client/webpackConfigLoader.js index 6d6cc0e5b..854d69c22 100644 --- a/spec/dummy/client/webpackConfigLoader.js +++ b/spec/dummy/client/webpackConfigLoader.js @@ -9,6 +9,9 @@ const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env. const devServerConfig = join(configPath, 'development.server.yml'); const devServer = safeLoad(readFileSync(devServerConfig, 'utf8')).development; +if (env.REACT_ON_RAILS_ENV == "HOT") { + devServer.enabled = true +} const productionBuild = env.NODE_ENV === 'production'; const publicPath = !productionBuild && devServer.enabled ? From 327161fd1ec9557a648d4f47dbed7e046923b5fc Mon Sep 17 00:00:00 2001 From: Daniel Szatmari Date: Mon, 24 Apr 2017 19:08:12 +0200 Subject: [PATCH 10/24] put configLoader to npm package --- .eslintignore | 1 - .../react_on_rails/base_generator.rb | 2 +- .../react_on_rails/dev_tests_generator.rb | 30 ++++---------- .../base/base/client/webpack.config.js | 6 ++- .../base/base/client/webpackConfigLoader.js | 15 ------- .../config/webpack/development.server.yml | 8 ++++ node_package/src/ReactOnRails.js | 5 +++ node_package/src/webpackConfigLoader.js | 29 ++++++++++++++ package.json | 6 ++- spec/dummy/client/package.json | 2 +- .../client/webpack.client.base.config.js | 7 +++- .../webpack.client.rails.build.config.js | 3 +- .../client/webpack.client.rails.hot.config.js | 3 +- .../webpack.server.rails.build.config.js | 5 ++- spec/dummy/client/webpackConfigLoader.js | 25 ------------ spec/dummy/client/yarn.lock | 2 +- .../generators/dev_tests_generator_spec.rb | 12 +++--- .../base_generator_examples.rb | 1 - yarn.lock | 40 ++++++++++++++++--- 19 files changed, 114 insertions(+), 88 deletions(-) delete mode 100644 lib/generators/react_on_rails/templates/base/base/client/webpackConfigLoader.js create mode 100644 lib/generators/react_on_rails/templates/base/base/config/webpack/development.server.yml create mode 100644 node_package/src/webpackConfigLoader.js delete mode 100644 spec/dummy/client/webpackConfigLoader.js diff --git a/.eslintignore b/.eslintignore index 4d94f20bb..6d98106b6 100644 --- a/.eslintignore +++ b/.eslintignore @@ -12,4 +12,3 @@ node_package/webpack.config.js **/app/assets/javascripts/application.js **/coverage/** **/cable.js -gen-examples/**/webpack.config.js diff --git a/lib/generators/react_on_rails/base_generator.rb b/lib/generators/react_on_rails/base_generator.rb index f46d4768f..e3ebf051a 100644 --- a/lib/generators/react_on_rails/base_generator.rb +++ b/lib/generators/react_on_rails/base_generator.rb @@ -46,9 +46,9 @@ def copy_base_files base_path = "base/base/" base_files = %w(app/controllers/hello_world_controller.rb config/webpack/paths.yml + config/webpack/development.server.yml client/.babelrc client/webpack.config.js - client/webpackConfigLoader.js client/REACT_ON_RAILS_CLIENT_README.md) base_files.each { |file| copy_file("#{base_path}#{file}", file) } end diff --git a/lib/generators/react_on_rails/dev_tests_generator.rb b/lib/generators/react_on_rails/dev_tests_generator.rb index a2deee736..9c473e518 100644 --- a/lib/generators/react_on_rails/dev_tests_generator.rb +++ b/lib/generators/react_on_rails/dev_tests_generator.rb @@ -45,28 +45,14 @@ def change_package_json_to_use_local_react_on_rails_module File.open(package_json, "w+") { |f| f.puts new_contents } end - # Since we use the local react-on-rails package, we need an alias for it - def add_alias_for_react_on_rails - config = File.join(destination_root, "client", "webpack.config.js") - old_contents = File.read(config) - new_contents = old_contents.gsub( - /extensions: \['\.js', '\.jsx'\],/, - 'extensions: [\'.js\', \'.jsx\'], - alias: { - \'react-on-rails\': resolve(__dirname, \'..\', \'..\', \'..\', \'..\'), - },' - ) - File.open(config, "w+") { |f| f.puts new_contents } - end - - def change_webpack_client_base_config_to_include_fallback - sentinel = /^\s\s},\n\s\splugins: \[\n/ - config = File.join(destination_root, "client", "webpack.config.js") - old_contents = File.read(config) - new_contents = "const path = require('path');\n" + - old_contents.gsub(sentinel, FALLBACK_OPTION_FOR_NODE_MODULES) - File.open(config, "w+") { |f| f.puts new_contents } - end + # def change_webpack_client_base_config_to_include_fallback + # sentinel = /^\s\s},\n\s\splugins: \[\n/ + # config = File.join(destination_root, "client", "webpack.config.js") + # old_contents = File.read(config) + # new_contents = "const { resolve } = require('path');\n" + + # old_contents.gsub(sentinel, FALLBACK_OPTION_FOR_NODE_MODULES) + # File.open(config, "w+") { |f| f.puts new_contents } + # end def add_test_related_gems_to_gemfile gem("rspec-rails", group: :test) diff --git a/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js b/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js index 6240a98e4..899b8f033 100644 --- a/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js +++ b/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js @@ -4,8 +4,10 @@ const webpack = require('webpack'); const { resolve } = require('path'); -const ManifestPlugin = require('webpack-manifest-plugin'); // eslint-disable-line import/no-unresolved -const { env, paths, publicPath } = require('./webpackConfigLoader.js'); +const ManifestPlugin = require('webpack-manifest-plugin'); +const webpackConfigLoader = require('react-on-rails').default.webpackConfigLoader; // eslint-disable-line import/no-unresolved + +const { env, paths, publicPath } = webpackConfigLoader(resolve('..', 'config', 'webpack')); const devBuild = env !== 'production'; diff --git a/lib/generators/react_on_rails/templates/base/base/client/webpackConfigLoader.js b/lib/generators/react_on_rails/templates/base/base/client/webpackConfigLoader.js deleted file mode 100644 index 30b771bb9..000000000 --- a/lib/generators/react_on_rails/templates/base/base/client/webpackConfigLoader.js +++ /dev/null @@ -1,15 +0,0 @@ -const { join, resolve } = require('path'); -const { env } = require('process'); -const { safeLoad } = require('js-yaml'); -const { readFileSync } = require('fs'); - -const configPath = resolve('..', 'config', 'webpack'); -const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV]; - -const publicPath = `/${paths.assets}/`; - -module.exports = { - env, - paths, - publicPath, -}; diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/development.server.yml b/lib/generators/react_on_rails/templates/base/base/config/webpack/development.server.yml new file mode 100644 index 000000000..d99cbbd95 --- /dev/null +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/development.server.yml @@ -0,0 +1,8 @@ +default: &default + enabled: false + host: localhost + port: 3500 + +development: + <<: *default + enabled: false diff --git a/node_package/src/ReactOnRails.js b/node_package/src/ReactOnRails.js index 5800547a3..c950882d0 100644 --- a/node_package/src/ReactOnRails.js +++ b/node_package/src/ReactOnRails.js @@ -8,6 +8,7 @@ import serverRenderReactComponent from './serverRenderReactComponent'; import buildConsoleReplay from './buildConsoleReplay'; import createReactElement from './createReactElement'; import Authenticity from './Authenticity'; +import webpackConfigLoader from './webpackConfigLoader'; import context from './context'; const ctx = context(); @@ -222,6 +223,10 @@ ctx.ReactOnRails = { resetOptions() { this.options = Object.assign({}, DEFAULT_OPTIONS); }, + + webpackConfigLoader(configPath) { + return webpackConfigLoader.configLoader(configPath); + }, }; ctx.ReactOnRails.resetOptions(); diff --git a/node_package/src/webpackConfigLoader.js b/node_package/src/webpackConfigLoader.js new file mode 100644 index 000000000..fe7f4890a --- /dev/null +++ b/node_package/src/webpackConfigLoader.js @@ -0,0 +1,29 @@ +const { join } = require('path'); +const { env } = require('process'); +const { safeLoad } = require('js-yaml'); +const { readFileSync } = require('fs'); + +export default { + configLoader(configPath) { + // const configPath = resolve('..', 'config', 'webpack'); + const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV]; + + const devServerConfig = join(configPath, 'development.server.yml'); + const devServer = safeLoad(readFileSync(devServerConfig, 'utf8')).development; + + if (env.REACT_ON_RAILS_ENV === 'HOT') { + devServer.enabled = true; + } + const productionBuild = env.NODE_ENV === 'production'; + + const publicPath = !productionBuild && devServer.enabled ? + `http://${devServer.host}:${devServer.port}/` : `/${paths.assets}/`; + + return { + devServer, + env, + paths, + publicPath, + }; + }, +}; diff --git a/package.json b/package.json index 94b5dd89e..4a1ea519b 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,11 @@ "release-it": "^2.7.1", "tap-spec": "^4.1.1", "tape": "^4.6.3", - "webpack": "^2.3.3" + "webpack": "^2.3.3", + "webpack-manifest-plugin": "^1.1.0" + }, + "browser": { + "fs": false }, "peerDependencies": { "babel-runtime": ">= 6", diff --git a/spec/dummy/client/package.json b/spec/dummy/client/package.json index 56d4a69b5..c7a49e9c0 100644 --- a/spec/dummy/client/package.json +++ b/spec/dummy/client/package.json @@ -34,7 +34,7 @@ "react": "^15.5.4", "react-dom": "^15.5.4", "react-helmet": "^5.0.3", - "react-on-rails": "file:../../..", + "react-on-rails": "file:../../../", "react-proptypes": "^0.0.1", "react-redux": "^5.0.4", "react-router": "3.0.5", diff --git a/spec/dummy/client/webpack.client.base.config.js b/spec/dummy/client/webpack.client.base.config.js index 0f279ba11..6b0c56f03 100644 --- a/spec/dummy/client/webpack.client.base.config.js +++ b/spec/dummy/client/webpack.client.base.config.js @@ -7,11 +7,14 @@ const webpackCommon = require('./webpack.common'); const { assetLoaderRules } = webpackCommon; const ManifestPlugin = require('webpack-manifest-plugin'); -const { env, paths, publicPath } = require('./webpackConfigLoader.js'); +const webpackConfigLoader = require('react-on-rails').default.webpackConfigLoader; +const { env, paths, publicPath } = webpackConfigLoader(resolve('..', 'config', 'webpack')); + const manifestPath = resolve('..', paths.output, paths.assets, paths.manifest); const devBuild = process.env.NODE_ENV !== 'production'; +// console.log("COOONFIIGGG", config); let sharedManifest = {}; try { sharedManifest = require(manifestPath); @@ -34,7 +37,7 @@ module.exports = { extensions: ['.js', '.jsx'], alias: { images: join(process.cwd(), 'app', 'assets', 'images'), - 'react-on-rails': resolve(__dirname, '..', '..', '..'), + // 'react-on-rails': resolve(__dirname, '..', '..', '..'), }, }, diff --git a/spec/dummy/client/webpack.client.rails.build.config.js b/spec/dummy/client/webpack.client.rails.build.config.js index 8c7ef90ab..65f8e3f59 100644 --- a/spec/dummy/client/webpack.client.rails.build.config.js +++ b/spec/dummy/client/webpack.client.rails.build.config.js @@ -7,7 +7,8 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin'); const config = require('./webpack.client.base.config'); const { resolve } = require('path'); -const { paths, publicPath } = require('./webpackConfigLoader.js'); +const webpackConfigLoader = require('react-on-rails').default.webpackConfigLoader; +const { env, paths, publicPath } = webpackConfigLoader(resolve('..', 'config', 'webpack')); const devBuild = process.env.NODE_ENV !== 'production'; diff --git a/spec/dummy/client/webpack.client.rails.hot.config.js b/spec/dummy/client/webpack.client.rails.hot.config.js index feb2d0f48..8c2ee667e 100644 --- a/spec/dummy/client/webpack.client.rails.hot.config.js +++ b/spec/dummy/client/webpack.client.rails.hot.config.js @@ -8,7 +8,8 @@ const { resolve } = require('path'); const webpack = require('webpack'); const config = require('./webpack.client.base.config'); -const { devServer, paths, publicPath } = require('./webpackConfigLoader.js'); +const webpackConfigLoader = require('react-on-rails').default.webpackConfigLoader; +const { devServer, paths, publicPath } = webpackConfigLoader(resolve('..', 'config', 'webpack')); config.entry.app.push( `webpack-dev-server/client?${devServer.host}:${devServer.port}`, diff --git a/spec/dummy/client/webpack.server.rails.build.config.js b/spec/dummy/client/webpack.server.rails.build.config.js index e6bddfc2b..968d783b7 100644 --- a/spec/dummy/client/webpack.server.rails.build.config.js +++ b/spec/dummy/client/webpack.server.rails.build.config.js @@ -8,7 +8,8 @@ const webpackCommon = require('./webpack.common'); const { assetLoaderRules } = webpackCommon; const ManifestPlugin = require('webpack-manifest-plugin'); -const { paths, publicPath } = require('./webpackConfigLoader.js'); +const webpackConfigLoader = require('react-on-rails').default.webpackConfigLoader; +const { env, paths, publicPath } = webpackConfigLoader(resolve('..', 'config', 'webpack')); const manifestPath = resolve('..', paths.output, paths.assets, paths.manifest); const devBuild = process.env.NODE_ENV !== 'production'; @@ -36,7 +37,7 @@ module.exports = { extensions: ['.js', '.jsx'], alias: { images: join(process.cwd(), 'app', 'assets', 'images'), - 'react-on-rails': resolve(__dirname, '..', '..', '..'), + // 'react-on-rails': resolve(__dirname, '..', '..', '..'), }, }, plugins: [ diff --git a/spec/dummy/client/webpackConfigLoader.js b/spec/dummy/client/webpackConfigLoader.js deleted file mode 100644 index 854d69c22..000000000 --- a/spec/dummy/client/webpackConfigLoader.js +++ /dev/null @@ -1,25 +0,0 @@ -const { join, resolve } = require('path'); -const { env } = require('process'); -const { safeLoad } = require('js-yaml'); -const { readFileSync } = require('fs'); - -const configPath = resolve('..', 'config', 'webpack'); -const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV]; - -const devServerConfig = join(configPath, 'development.server.yml'); -const devServer = safeLoad(readFileSync(devServerConfig, 'utf8')).development; - -if (env.REACT_ON_RAILS_ENV == "HOT") { - devServer.enabled = true -} -const productionBuild = env.NODE_ENV === 'production'; - -const publicPath = !productionBuild && devServer.enabled ? - `http://${devServer.host}:${devServer.port}/` : `/${paths.assets}/`; - -module.exports = { - devServer, - env, - paths, - publicPath, -}; diff --git a/spec/dummy/client/yarn.lock b/spec/dummy/client/yarn.lock index 4d1db74da..4d9029d33 100644 --- a/spec/dummy/client/yarn.lock +++ b/spec/dummy/client/yarn.lock @@ -4177,7 +4177,7 @@ react-helmet@^5.0.3: prop-types "^15.5.4" react-side-effect "^1.1.0" -"react-on-rails@file:../../..": +"react-on-rails@file:../../../": version "6.10.1" react-proptypes@^0.0.1: diff --git a/spec/react_on_rails/generators/dev_tests_generator_spec.rb b/spec/react_on_rails/generators/dev_tests_generator_spec.rb index e3cee30a5..3590fcb27 100644 --- a/spec/react_on_rails/generators/dev_tests_generator_spec.rb +++ b/spec/react_on_rails/generators/dev_tests_generator_spec.rb @@ -39,12 +39,12 @@ end end - it "changes the webpack.config.js to use a resolveLoader" do - expected = ReactOnRails::Generators::FALLBACK_OPTION_FOR_NODE_MODULES - assert_file("client/webpack.config.js") do |contents| - assert_match(expected, contents) - end - end + # it "changes the webpack.config.js to use a resolveLoader" do + # expected = ReactOnRails::Generators::FALLBACK_OPTION_FOR_NODE_MODULES + # assert_file("client/webpack.config.js") do |contents| + # assert_match(expected, contents) + # end + # end end context "with server-rendering" do diff --git a/spec/react_on_rails/support/shared_examples/base_generator_examples.rb b/spec/react_on_rails/support/shared_examples/base_generator_examples.rb index eed0c6e18..12820eb7d 100644 --- a/spec/react_on_rails/support/shared_examples/base_generator_examples.rb +++ b/spec/react_on_rails/support/shared_examples/base_generator_examples.rb @@ -33,7 +33,6 @@ client/webpack.config.js client/.babelrc client/package.json - client/webpackConfigLoader.js config/initializers/react_on_rails.rb config/webpack/paths.yml package.json diff --git a/yarn.lock b/yarn.lock index df45a2a96..c77682956 100644 --- a/yarn.lock +++ b/yarn.lock @@ -877,10 +877,6 @@ babel-types@^6.15.0, babel-types@^6.19.0, babel-types@^6.24.1: lodash "^4.2.0" to-fast-properties "^1.0.1" -babel@^6.23.0: - version "6.23.0" - resolved "https://registry.yarnpkg.com/babel/-/babel-6.23.0.tgz#d0d1e7d803e974765beea3232d4e153c0efb90f4" - babelify@^7.3.0: version "7.3.0" resolved "https://registry.yarnpkg.com/babelify/-/babelify-7.3.0.tgz#aa56aede7067fd7bd549666ee16dc285087e88e5" @@ -1851,6 +1847,16 @@ form-data@~2.1.1: combined-stream "^1.0.5" mime-types "^2.1.12" +fs-extra@^0.30.0: + version "0.30.0" + resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0" + dependencies: + graceful-fs "^4.1.2" + jsonfile "^2.1.0" + klaw "^1.0.0" + path-is-absolute "^1.0.0" + rimraf "^2.2.8" + fs-readdir-recursive@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.0.0.tgz#8cd1745c8b4f8a29c8caec392476921ba195f560" @@ -1986,7 +1992,7 @@ globby@^5.0.0: pify "^2.0.0" pinkie-promise "^2.0.0" -graceful-fs@4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4: +graceful-fs@4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9: version "4.1.11" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658" @@ -2425,6 +2431,12 @@ json5@^0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.0.tgz#9b20715b026cbe3778fd769edccd822d8332a5b2" +jsonfile@^2.1.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8" + optionalDependencies: + graceful-fs "^4.1.6" + jsonify@~0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73" @@ -2454,6 +2466,12 @@ kind-of@^3.0.2: dependencies: is-buffer "^1.0.2" +klaw@^1.0.0: + version "1.3.1" + resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439" + optionalDependencies: + graceful-fs "^4.1.9" + lazy-cache@^1.0.3: version "1.0.4" resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e" @@ -2506,7 +2524,7 @@ lodash.pickby@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff" -lodash@4.17.4, lodash@^4.14.0, lodash@^4.3.0: +lodash@4.17.4, "lodash@>=3.5 <5", lodash@^4.14.0, lodash@^4.3.0: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" @@ -3041,6 +3059,9 @@ react-dom@^15.5.4: object-assign "^4.1.0" prop-types "~15.5.7" +"react-on-rails@file:./": + version "6.10.0" + react-proxy@^1.1.7: version "1.1.8" resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a" @@ -3794,6 +3815,13 @@ webidl-conversions@^4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.1.tgz#8015a17ab83e7e1b311638486ace81da6ce206a0" +webpack-manifest-plugin@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-1.1.0.tgz#6b6c718aade8a2537995784b46bd2e9836057caa" + dependencies: + fs-extra "^0.30.0" + lodash ">=3.5 <5" + webpack-sources@^0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.2.3.tgz#17c62bfaf13c707f9d02c479e0dcdde8380697fb" From 7f270545ed1aa5ede83fbf7b1c4bc7ff3773295f Mon Sep 17 00:00:00 2001 From: Daniel Szatmari Date: Tue, 25 Apr 2017 15:31:38 +0200 Subject: [PATCH 11/24] fix dummy bundle generation --- .../react_on_rails/dev_tests_generator.rb | 9 --------- .../base/config/webpack/development.server.yml | 1 + node_package/src/webpackConfigLoader.js | 1 - rakelib/run_rspec.rake | 9 +++++++++ spec/dummy/Procfile.hot | 2 +- spec/dummy/client/server-rails-hot.js | 5 +++-- spec/dummy/client/webpack.client.base.config.js | 14 ++------------ .../client/webpack.server.rails.build.config.js | 17 +---------------- .../dummy/config/initializers/react_on_rails.rb | 3 +-- spec/dummy/package.json | 2 +- .../generators/dev_tests_generator_spec.rb | 7 ------- 11 files changed, 19 insertions(+), 51 deletions(-) diff --git a/lib/generators/react_on_rails/dev_tests_generator.rb b/lib/generators/react_on_rails/dev_tests_generator.rb index 9c473e518..7fe609291 100644 --- a/lib/generators/react_on_rails/dev_tests_generator.rb +++ b/lib/generators/react_on_rails/dev_tests_generator.rb @@ -45,15 +45,6 @@ def change_package_json_to_use_local_react_on_rails_module File.open(package_json, "w+") { |f| f.puts new_contents } end - # def change_webpack_client_base_config_to_include_fallback - # sentinel = /^\s\s},\n\s\splugins: \[\n/ - # config = File.join(destination_root, "client", "webpack.config.js") - # old_contents = File.read(config) - # new_contents = "const { resolve } = require('path');\n" + - # old_contents.gsub(sentinel, FALLBACK_OPTION_FOR_NODE_MODULES) - # File.open(config, "w+") { |f| f.puts new_contents } - # end - def add_test_related_gems_to_gemfile gem("rspec-rails", group: :test) gem("capybara", group: :test) diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/development.server.yml b/lib/generators/react_on_rails/templates/base/base/config/webpack/development.server.yml index d99cbbd95..79accb5bc 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/development.server.yml +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/development.server.yml @@ -5,4 +5,5 @@ default: &default development: <<: *default + # set to true of you want hot loading as default enabled: false diff --git a/node_package/src/webpackConfigLoader.js b/node_package/src/webpackConfigLoader.js index fe7f4890a..b03c0acea 100644 --- a/node_package/src/webpackConfigLoader.js +++ b/node_package/src/webpackConfigLoader.js @@ -5,7 +5,6 @@ const { readFileSync } = require('fs'); export default { configLoader(configPath) { - // const configPath = resolve('..', 'config', 'webpack'); const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV]; const devServerConfig = join(configPath, 'development.server.yml'); diff --git a/rakelib/run_rspec.rake b/rakelib/run_rspec.rake index 63c998406..5dc1cab84 100644 --- a/rakelib/run_rspec.rake +++ b/rakelib/run_rspec.rake @@ -11,6 +11,7 @@ include ReactOnRails::TaskHelpers namespace :run_rspec do spec_dummy_dir = File.join("spec", "dummy") + spec_dummy_client_dir = File.join("spec", "dummy", "client") desc "Run RSpec for top level only" task :gem do @@ -20,12 +21,14 @@ namespace :run_rspec do desc "Runs dummy rspec with turbolinks" task dummy: ["dummy_apps:dummy_app"] do clean_gen_assets(spec_dummy_dir) + gen_assets(spec_dummy_client_dir) run_tests_in(spec_dummy_dir) end desc "Runs dummy rspec without turbolinks" task dummy_no_turbolinks: ["dummy_apps:dummy_app"] do clean_gen_assets(spec_dummy_dir) + gen_assets(spec_dummy_client_dir) run_tests_in(spec_dummy_dir, env_vars: "DISABLE_TURBOLINKS=TRUE", command_name: "dummy_no_turbolinks") @@ -35,6 +38,7 @@ namespace :run_rspec do desc "Runs dummy respec with turbolinks 2" task dummy_turbolinks_2: ["dummy_apps:dummy_app_with_turbolinks_2"] do clean_gen_assets(spec_dummy_dir) + gen_assets(spec_dummy_client_dir) run_tests_in(spec_dummy_dir, env_vars: "ENABLE_TURBOLINKS_2=TRUE BUNDLE_GEMFILE=#{dummy_app_dir}/Gemfile") end @@ -115,3 +119,8 @@ def clean_gen_assets(dir) path = calc_path(dir) sh_in_dir(path.realpath, "yarn run build:clean") end + +def gen_assets(dir) + path = calc_path(dir) + sh_in_dir(path.realpath, "yarn run build:test") +end diff --git a/spec/dummy/Procfile.hot b/spec/dummy/Procfile.hot index 9f73263bc..24c4b43ca 100644 --- a/spec/dummy/Procfile.hot +++ b/spec/dummy/Procfile.hot @@ -3,7 +3,7 @@ rails: REACT_ON_RAILS_ENV=HOT rails s -b 0.0.0.0 # Run the hot reload server for client development -hot-assets: HOT_RAILS_PORT=3500 yarn run hot-assets +hot-assets: HOT_RAILS_PORT=3500 REACT_ON_RAILS_ENV=HOT yarn run hot-assets # Keep the JS fresh for server rendering. Remove if not server rendering rails-server-assets: yarn run build:dev:server diff --git a/spec/dummy/client/server-rails-hot.js b/spec/dummy/client/server-rails-hot.js index 97b011643..3b0b0c3ff 100644 --- a/spec/dummy/client/server-rails-hot.js +++ b/spec/dummy/client/server-rails-hot.js @@ -16,10 +16,11 @@ import webpack from 'webpack'; import WebpackDevServer from 'webpack-dev-server'; - +const { resolve } = require('path'); import webpackConfig from './webpack.client.rails.hot.config'; -const { devServer: devServerConfig, publicPath } = require('./webpackConfigLoader.js'); +const webpackConfigLoader = require('react-on-rails').default.webpackConfigLoader; +const { devServer: devServerConfig, publicPath } = webpackConfigLoader(resolve('..', 'config', 'webpack')); const compiler = webpack(webpackConfig); diff --git a/spec/dummy/client/webpack.client.base.config.js b/spec/dummy/client/webpack.client.base.config.js index 6b0c56f03..53ecdecde 100644 --- a/spec/dummy/client/webpack.client.base.config.js +++ b/spec/dummy/client/webpack.client.base.config.js @@ -10,18 +10,8 @@ const ManifestPlugin = require('webpack-manifest-plugin'); const webpackConfigLoader = require('react-on-rails').default.webpackConfigLoader; const { env, paths, publicPath } = webpackConfigLoader(resolve('..', 'config', 'webpack')); -const manifestPath = resolve('..', paths.output, paths.assets, paths.manifest); - const devBuild = process.env.NODE_ENV !== 'production'; -// console.log("COOONFIIGGG", config); -let sharedManifest = {}; -try { - sharedManifest = require(manifestPath); -} catch (ex) { - console.info('No manifest found. It will be created at:', manifestPath); -} - module.exports = { // the project dir @@ -37,10 +27,10 @@ module.exports = { extensions: ['.js', '.jsx'], alias: { images: join(process.cwd(), 'app', 'assets', 'images'), - // 'react-on-rails': resolve(__dirname, '..', '..', '..'), }, }, + plugins: [ new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }), new webpack.DefinePlugin({ @@ -55,7 +45,7 @@ module.exports = { return module.context && module.context.indexOf('node_modules') !== -1; }, }), - new ManifestPlugin({ fileName: paths.manifest, publicPath, writeToFileEmit: true, cache: sharedManifest }), + new ManifestPlugin({ fileName: paths.manifest, publicPath, writeToFileEmit: true }), ], module: { diff --git a/spec/dummy/client/webpack.server.rails.build.config.js b/spec/dummy/client/webpack.server.rails.build.config.js index 968d783b7..cca944908 100644 --- a/spec/dummy/client/webpack.server.rails.build.config.js +++ b/spec/dummy/client/webpack.server.rails.build.config.js @@ -7,21 +7,12 @@ const { imageLoaderRules } = require('./webpack.common'); const webpackCommon = require('./webpack.common'); const { assetLoaderRules } = webpackCommon; -const ManifestPlugin = require('webpack-manifest-plugin'); const webpackConfigLoader = require('react-on-rails').default.webpackConfigLoader; const { env, paths, publicPath } = webpackConfigLoader(resolve('..', 'config', 'webpack')); -const manifestPath = resolve('..', paths.output, paths.assets, paths.manifest); const devBuild = process.env.NODE_ENV !== 'production'; const nodeEnv = devBuild ? 'development' : 'production'; -let sharedManifest = {}; -try { - sharedManifest = require(manifestPath); -} catch (ex) { - console.info('No manifest found. It will be created at:', manifestPath); -} - module.exports = { // the project dir @@ -37,21 +28,15 @@ module.exports = { extensions: ['.js', '.jsx'], alias: { images: join(process.cwd(), 'app', 'assets', 'images'), - // 'react-on-rails': resolve(__dirname, '..', '..', '..'), }, }, + plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(nodeEnv), }, }), - new ManifestPlugin({ - fileName: paths.manifest, - publicPath, - writeToFileEmit: true, - cache: sharedManifest, - }), ], module: { rules: [ diff --git a/spec/dummy/config/initializers/react_on_rails.rb b/spec/dummy/config/initializers/react_on_rails.rb index cbbddb460..ac88e0441 100644 --- a/spec/dummy/config/initializers/react_on_rails.rb +++ b/spec/dummy/config/initializers/react_on_rails.rb @@ -18,8 +18,7 @@ def self.custom_context(view_context) config.generated_assets_dir = File.join(%w(public webpack), Rails.env) # Define the files we need to check for webpack compilation when running tests. - config.webpack_generated_files = %w(app-bundle.js vendor-bundle.js server-bundle.js - app-bundle.css vendor-bundle.css) + config.webpack_generated_files = %w(app-bundle.js vendor-bundle.js server-bundle.js) # This is the file used for server rendering of React when using `(prerender: true)` # If you are never using server rendering, you may set this to "". diff --git a/spec/dummy/package.json b/spec/dummy/package.json index de10a1190..280101707 100644 --- a/spec/dummy/package.json +++ b/spec/dummy/package.json @@ -12,7 +12,7 @@ "test": "yarn run build:test && yarn run lint && rspec", "lint": "cd client && yarn run lint", "install-react-on-rails": "cd client && yarn run install-react-on-rails", - "build:clean": "rm -r app/assets/webpack/* || true", + "build:clean": "rm -rf public/webpack || true", "build:production:client": "(cd client && yarn run build:production:client --silent)", "build:production:server": "(cd client && yarn run build:production:server --silent)", "build:client": "(cd client && yarn run build:client --silent", diff --git a/spec/react_on_rails/generators/dev_tests_generator_spec.rb b/spec/react_on_rails/generators/dev_tests_generator_spec.rb index 3590fcb27..5513b0dc1 100644 --- a/spec/react_on_rails/generators/dev_tests_generator_spec.rb +++ b/spec/react_on_rails/generators/dev_tests_generator_spec.rb @@ -38,13 +38,6 @@ assert_match("gem 'poltergeist'", contents) end end - - # it "changes the webpack.config.js to use a resolveLoader" do - # expected = ReactOnRails::Generators::FALLBACK_OPTION_FOR_NODE_MODULES - # assert_file("client/webpack.config.js") do |contents| - # assert_match(expected, contents) - # end - # end end context "with server-rendering" do From dd93a4a6f1182f73a7fe9bdf214e976d375a4743 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Tue, 25 Apr 2017 11:56:12 -1000 Subject: [PATCH 12/24] Performance and throw if version mismatch (#821) * Any version mismatch of gem and node package throws an error. * 6.9 introduced code that would parse the props into a Hash unnecessarily. Any customers with significant String props took a performance hit from this on page rendering. * Fix is to only put props inside of the script tag, and not any meta data, like the dom id and name of the component. This avoids unnecessary parsing. --- spec/dummy/client/yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/dummy/client/yarn.lock b/spec/dummy/client/yarn.lock index 4d9029d33..4d1db74da 100644 --- a/spec/dummy/client/yarn.lock +++ b/spec/dummy/client/yarn.lock @@ -4177,7 +4177,7 @@ react-helmet@^5.0.3: prop-types "^15.5.4" react-side-effect "^1.1.0" -"react-on-rails@file:../../../": +"react-on-rails@file:../../..": version "6.10.1" react-proptypes@^0.0.1: From d7c3d313c129954e4f98f53efe094633c6b99c5d Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Wed, 26 Apr 2017 00:11:03 -1000 Subject: [PATCH 13/24] Cleanup node package require for webpackConfigLoader --- .../base/base/client/webpack.config.js | 6 ++-- node_package/src/ReactOnRails.js | 5 --- node_package/src/webpackConfigLoader.js | 36 +++++++++---------- spec/dummy/client/server-rails-hot.js | 5 +-- .../client/webpack.client.base.config.js | 5 +-- .../webpack.client.rails.build.config.js | 5 +-- .../client/webpack.client.rails.hot.config.js | 5 +-- .../webpack.server.rails.build.config.js | 6 ++-- spec/dummy/client/yarn.lock | 4 +-- 9 files changed, 38 insertions(+), 39 deletions(-) diff --git a/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js b/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js index 899b8f033..76bce0156 100644 --- a/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js +++ b/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js @@ -5,9 +5,9 @@ const webpack = require('webpack'); const { resolve } = require('path'); const ManifestPlugin = require('webpack-manifest-plugin'); -const webpackConfigLoader = require('react-on-rails').default.webpackConfigLoader; // eslint-disable-line import/no-unresolved - -const { env, paths, publicPath } = webpackConfigLoader(resolve('..', 'config', 'webpack')); +const webpackConfigLoader = require('react-on-rails/node_package/lib/webpackConfigLoader').default; +const configPath = resolve('..', 'config', 'webpack'); +const { env, paths, publicPath } = webpackConfigLoader(configPath); const devBuild = env !== 'production'; diff --git a/node_package/src/ReactOnRails.js b/node_package/src/ReactOnRails.js index c950882d0..5800547a3 100644 --- a/node_package/src/ReactOnRails.js +++ b/node_package/src/ReactOnRails.js @@ -8,7 +8,6 @@ import serverRenderReactComponent from './serverRenderReactComponent'; import buildConsoleReplay from './buildConsoleReplay'; import createReactElement from './createReactElement'; import Authenticity from './Authenticity'; -import webpackConfigLoader from './webpackConfigLoader'; import context from './context'; const ctx = context(); @@ -223,10 +222,6 @@ ctx.ReactOnRails = { resetOptions() { this.options = Object.assign({}, DEFAULT_OPTIONS); }, - - webpackConfigLoader(configPath) { - return webpackConfigLoader.configLoader(configPath); - }, }; ctx.ReactOnRails.resetOptions(); diff --git a/node_package/src/webpackConfigLoader.js b/node_package/src/webpackConfigLoader.js index b03c0acea..32c862dcc 100644 --- a/node_package/src/webpackConfigLoader.js +++ b/node_package/src/webpackConfigLoader.js @@ -3,26 +3,26 @@ const { env } = require('process'); const { safeLoad } = require('js-yaml'); const { readFileSync } = require('fs'); -export default { - configLoader(configPath) { - const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV]; +const configLoader = (configPath) => { + const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV]; - const devServerConfig = join(configPath, 'development.server.yml'); - const devServer = safeLoad(readFileSync(devServerConfig, 'utf8')).development; + const devServerConfig = join(configPath, 'development.server.yml'); + const devServer = safeLoad(readFileSync(devServerConfig, 'utf8')).development; - if (env.REACT_ON_RAILS_ENV === 'HOT') { - devServer.enabled = true; - } - const productionBuild = env.NODE_ENV === 'production'; + if (env.REACT_ON_RAILS_ENV === 'HOT') { + devServer.enabled = true; + } + const productionBuild = env.NODE_ENV === 'production'; - const publicPath = !productionBuild && devServer.enabled ? - `http://${devServer.host}:${devServer.port}/` : `/${paths.assets}/`; + const publicPath = !productionBuild && devServer.enabled ? + `http://${devServer.host}:${devServer.port}/` : `/${paths.assets}/`; - return { - devServer, - env, - paths, - publicPath, - }; - }, + return { + devServer, + env, + paths, + publicPath, + }; }; + +export default configLoader; diff --git a/spec/dummy/client/server-rails-hot.js b/spec/dummy/client/server-rails-hot.js index 3b0b0c3ff..0b5e5b4d2 100644 --- a/spec/dummy/client/server-rails-hot.js +++ b/spec/dummy/client/server-rails-hot.js @@ -19,8 +19,9 @@ import WebpackDevServer from 'webpack-dev-server'; const { resolve } = require('path'); import webpackConfig from './webpack.client.rails.hot.config'; -const webpackConfigLoader = require('react-on-rails').default.webpackConfigLoader; -const { devServer: devServerConfig, publicPath } = webpackConfigLoader(resolve('..', 'config', 'webpack')); +const webpackConfigLoader = require('react-on-rails/node_package/lib/webpackConfigLoader').default; +const configPath = resolve('..', 'config', 'webpack'); +const { devServer: devServerConfig, publicPath } = webpackConfigLoader(configPath); const compiler = webpack(webpackConfig); diff --git a/spec/dummy/client/webpack.client.base.config.js b/spec/dummy/client/webpack.client.base.config.js index 53ecdecde..5d200357b 100644 --- a/spec/dummy/client/webpack.client.base.config.js +++ b/spec/dummy/client/webpack.client.base.config.js @@ -7,8 +7,9 @@ const webpackCommon = require('./webpack.common'); const { assetLoaderRules } = webpackCommon; const ManifestPlugin = require('webpack-manifest-plugin'); -const webpackConfigLoader = require('react-on-rails').default.webpackConfigLoader; -const { env, paths, publicPath } = webpackConfigLoader(resolve('..', 'config', 'webpack')); +const webpackConfigLoader = require('react-on-rails/node_package/lib/webpackConfigLoader').default; +const configPath = resolve('..', 'config', 'webpack'); +const { paths, publicPath } = webpackConfigLoader(configPath); const devBuild = process.env.NODE_ENV !== 'production'; diff --git a/spec/dummy/client/webpack.client.rails.build.config.js b/spec/dummy/client/webpack.client.rails.build.config.js index 65f8e3f59..ca6814f45 100644 --- a/spec/dummy/client/webpack.client.rails.build.config.js +++ b/spec/dummy/client/webpack.client.rails.build.config.js @@ -7,8 +7,9 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin'); const config = require('./webpack.client.base.config'); const { resolve } = require('path'); -const webpackConfigLoader = require('react-on-rails').default.webpackConfigLoader; -const { env, paths, publicPath } = webpackConfigLoader(resolve('..', 'config', 'webpack')); +const webpackConfigLoader = require('react-on-rails/node_package/lib/webpackConfigLoader').default; +const configPath = resolve('..', 'config', 'webpack'); +const { paths, publicPath } = webpackConfigLoader(configPath); const devBuild = process.env.NODE_ENV !== 'production'; diff --git a/spec/dummy/client/webpack.client.rails.hot.config.js b/spec/dummy/client/webpack.client.rails.hot.config.js index 8c2ee667e..ec6555b6d 100644 --- a/spec/dummy/client/webpack.client.rails.hot.config.js +++ b/spec/dummy/client/webpack.client.rails.hot.config.js @@ -8,8 +8,9 @@ const { resolve } = require('path'); const webpack = require('webpack'); const config = require('./webpack.client.base.config'); -const webpackConfigLoader = require('react-on-rails').default.webpackConfigLoader; -const { devServer, paths, publicPath } = webpackConfigLoader(resolve('..', 'config', 'webpack')); +const webpackConfigLoader = require('react-on-rails/node_package/lib/webpackConfigLoader').default; +const configPath = resolve('..', 'config', 'webpack'); +const { devServer, paths, publicPath } = webpackConfigLoader(configPath); config.entry.app.push( `webpack-dev-server/client?${devServer.host}:${devServer.port}`, diff --git a/spec/dummy/client/webpack.server.rails.build.config.js b/spec/dummy/client/webpack.server.rails.build.config.js index cca944908..24c4ed446 100644 --- a/spec/dummy/client/webpack.server.rails.build.config.js +++ b/spec/dummy/client/webpack.server.rails.build.config.js @@ -3,12 +3,12 @@ const webpack = require('webpack'); const { resolve, join } = require('path'); -const { imageLoaderRules } = require('./webpack.common'); const webpackCommon = require('./webpack.common'); const { assetLoaderRules } = webpackCommon; -const webpackConfigLoader = require('react-on-rails').default.webpackConfigLoader; -const { env, paths, publicPath } = webpackConfigLoader(resolve('..', 'config', 'webpack')); +const webpackConfigLoader = require('react-on-rails/node_package/lib/webpackConfigLoader').default; +const configPath = resolve('..', 'config', 'webpack'); +const { paths } = webpackConfigLoader(configPath); const devBuild = process.env.NODE_ENV !== 'production'; const nodeEnv = devBuild ? 'development' : 'production'; diff --git a/spec/dummy/client/yarn.lock b/spec/dummy/client/yarn.lock index 4d1db74da..38d176e70 100644 --- a/spec/dummy/client/yarn.lock +++ b/spec/dummy/client/yarn.lock @@ -4177,8 +4177,8 @@ react-helmet@^5.0.3: prop-types "^15.5.4" react-side-effect "^1.1.0" -"react-on-rails@file:../../..": - version "6.10.1" +"react-on-rails@file:../../../": + version "7.0.0" react-proptypes@^0.0.1: version "0.0.1" From e062dd3e55a7906131d73a8b56bf46cb93cd6923 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Wed, 26 Apr 2017 23:41:54 -1000 Subject: [PATCH 14/24] Better inclusion of common file webpackConfigLoader.js * No need to use babel on this file * Add another .eslintrc to avoid error on missing require * Configured package.json to export the file webpackConfigLoader.js --- .../react_on_rails/templates/.eslintrc | 23 +++++++++++++++++++ .../base/base/client/webpack.config.js | 3 ++- package.json | 6 ++--- spec/dummy/client/server-rails-hot.js | 2 +- .../client/webpack.client.base.config.js | 2 +- .../webpack.client.rails.build.config.js | 2 +- .../client/webpack.client.rails.hot.config.js | 2 +- .../webpack.server.rails.build.config.js | 2 +- ...kConfigLoader.js => webpackConfigLoader.js | 2 +- 9 files changed, 33 insertions(+), 11 deletions(-) create mode 100644 lib/generators/react_on_rails/templates/.eslintrc rename node_package/src/webpackConfigLoader.js => webpackConfigLoader.js (96%) diff --git a/lib/generators/react_on_rails/templates/.eslintrc b/lib/generators/react_on_rails/templates/.eslintrc new file mode 100644 index 000000000..753be616c --- /dev/null +++ b/lib/generators/react_on_rails/templates/.eslintrc @@ -0,0 +1,23 @@ +--- +extends: eslint-config-shakacode + +plugins: + - react + +globals: + __DEBUG_SERVER_ERRORS__: true + __SERVER_ERRORS__: true + +env: + browser: true + node: true + mocha: true + +rules: + no-console: 0 + + # https://github.com/benmosher/eslint-plugin-import/issues/340 + import/no-extraneous-dependencies: 0 + + # because template cannot find react-on-rails + import/no-unresolved: 0 diff --git a/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js b/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js index 76bce0156..0f63d21bf 100644 --- a/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js +++ b/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js @@ -5,7 +5,8 @@ const webpack = require('webpack'); const { resolve } = require('path'); const ManifestPlugin = require('webpack-manifest-plugin'); -const webpackConfigLoader = require('react-on-rails/node_package/lib/webpackConfigLoader').default; +const webpackConfigLoader = require('react-on-rails/webpackConfigLoader'); + const configPath = resolve('..', 'config', 'webpack'); const { env, paths, publicPath } = webpackConfigLoader(configPath); diff --git a/package.json b/package.json index 4a1ea519b..9a04fd975 100644 --- a/package.json +++ b/package.json @@ -40,16 +40,14 @@ "webpack": "^2.3.3", "webpack-manifest-plugin": "^1.1.0" }, - "browser": { - "fs": false - }, "peerDependencies": { "babel-runtime": ">= 6", "react": ">= 0.14", "react-dom": ">= 0.14" }, "files": [ - "node_package/lib" + "node_package/lib", + "webpackConfigLoader.js" ], "scripts": { "test": "babel-tape-runner -r node_package/tests/helpers/test_helper.js node_package/tests/*.js | tap-spec", diff --git a/spec/dummy/client/server-rails-hot.js b/spec/dummy/client/server-rails-hot.js index 0b5e5b4d2..5e8e3b338 100644 --- a/spec/dummy/client/server-rails-hot.js +++ b/spec/dummy/client/server-rails-hot.js @@ -19,7 +19,7 @@ import WebpackDevServer from 'webpack-dev-server'; const { resolve } = require('path'); import webpackConfig from './webpack.client.rails.hot.config'; -const webpackConfigLoader = require('react-on-rails/node_package/lib/webpackConfigLoader').default; +const webpackConfigLoader = require('react-on-rails/webpackConfigLoader'); const configPath = resolve('..', 'config', 'webpack'); const { devServer: devServerConfig, publicPath } = webpackConfigLoader(configPath); diff --git a/spec/dummy/client/webpack.client.base.config.js b/spec/dummy/client/webpack.client.base.config.js index 5d200357b..2d89de11c 100644 --- a/spec/dummy/client/webpack.client.base.config.js +++ b/spec/dummy/client/webpack.client.base.config.js @@ -7,7 +7,7 @@ const webpackCommon = require('./webpack.common'); const { assetLoaderRules } = webpackCommon; const ManifestPlugin = require('webpack-manifest-plugin'); -const webpackConfigLoader = require('react-on-rails/node_package/lib/webpackConfigLoader').default; +const webpackConfigLoader = require('react-on-rails/webpackConfigLoader'); const configPath = resolve('..', 'config', 'webpack'); const { paths, publicPath } = webpackConfigLoader(configPath); diff --git a/spec/dummy/client/webpack.client.rails.build.config.js b/spec/dummy/client/webpack.client.rails.build.config.js index ca6814f45..bcce9f467 100644 --- a/spec/dummy/client/webpack.client.rails.build.config.js +++ b/spec/dummy/client/webpack.client.rails.build.config.js @@ -7,7 +7,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin'); const config = require('./webpack.client.base.config'); const { resolve } = require('path'); -const webpackConfigLoader = require('react-on-rails/node_package/lib/webpackConfigLoader').default; +const webpackConfigLoader = require('react-on-rails/webpackConfigLoader'); const configPath = resolve('..', 'config', 'webpack'); const { paths, publicPath } = webpackConfigLoader(configPath); diff --git a/spec/dummy/client/webpack.client.rails.hot.config.js b/spec/dummy/client/webpack.client.rails.hot.config.js index ec6555b6d..224b04d2c 100644 --- a/spec/dummy/client/webpack.client.rails.hot.config.js +++ b/spec/dummy/client/webpack.client.rails.hot.config.js @@ -8,7 +8,7 @@ const { resolve } = require('path'); const webpack = require('webpack'); const config = require('./webpack.client.base.config'); -const webpackConfigLoader = require('react-on-rails/node_package/lib/webpackConfigLoader').default; +const webpackConfigLoader = require('react-on-rails/webpackConfigLoader'); const configPath = resolve('..', 'config', 'webpack'); const { devServer, paths, publicPath } = webpackConfigLoader(configPath); diff --git a/spec/dummy/client/webpack.server.rails.build.config.js b/spec/dummy/client/webpack.server.rails.build.config.js index 24c4ed446..ea64c5e76 100644 --- a/spec/dummy/client/webpack.server.rails.build.config.js +++ b/spec/dummy/client/webpack.server.rails.build.config.js @@ -6,7 +6,7 @@ const { resolve, join } = require('path'); const webpackCommon = require('./webpack.common'); const { assetLoaderRules } = webpackCommon; -const webpackConfigLoader = require('react-on-rails/node_package/lib/webpackConfigLoader').default; +const webpackConfigLoader = require('react-on-rails/webpackConfigLoader'); const configPath = resolve('..', 'config', 'webpack'); const { paths } = webpackConfigLoader(configPath); diff --git a/node_package/src/webpackConfigLoader.js b/webpackConfigLoader.js similarity index 96% rename from node_package/src/webpackConfigLoader.js rename to webpackConfigLoader.js index 32c862dcc..3c686d7a9 100644 --- a/node_package/src/webpackConfigLoader.js +++ b/webpackConfigLoader.js @@ -25,4 +25,4 @@ const configLoader = (configPath) => { }; }; -export default configLoader; +module.exports = configLoader; From a307816f757237629a739e8df84080bcf9761167 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Wed, 26 Apr 2017 23:55:28 -1000 Subject: [PATCH 15/24] Update default generated asseets dir * New default dir reflects generators --- docs/additional-reading/rspec-configuration.md | 3 ++- lib/react_on_rails/configuration.rb | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/additional-reading/rspec-configuration.md b/docs/additional-reading/rspec-configuration.md index 1eb00be01..3487fb941 100644 --- a/docs/additional-reading/rspec-configuration.md +++ b/docs/additional-reading/rspec-configuration.md @@ -31,7 +31,8 @@ The following `config/react_on_rails.rb` settings **must** match your setup: ```ruby # Directory where your generated assets go. All generated assets must go to the same directory. # Configure this in your webpack config files. This relative to your Rails root directory. - config.generated_assets_dir = File.join(%w(app assets webpack)) + # We recommend having different generated assets dirs per Rails env. + config.generated_assets_dir = File.join(%w[public webpack], Rails.env) # Define the files we need to check for webpack compilation when running tests. config.webpack_generated_files = %w( webpack-bundle.js ) diff --git a/lib/react_on_rails/configuration.rb b/lib/react_on_rails/configuration.rb index 68c326576..19ad9df8e 100644 --- a/lib/react_on_rails/configuration.rb +++ b/lib/react_on_rails/configuration.rb @@ -4,7 +4,7 @@ def self.configure setup_config_values end - DEFAULT_GENERATED_ASSETS_DIR = File.join(%w(app assets webpack)).freeze + DEFAULT_GENERATED_ASSETS_DIR = File.join(%w[public webpack], Rails.env).freeze def self.setup_config_values ensure_webpack_generated_files_exists From d7c1760f99d66e552f3f13d34a7d6fb544ed74c6 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Thu, 27 Apr 2017 00:00:57 -1000 Subject: [PATCH 16/24] Release 7.1.0-beta.1 --- lib/react_on_rails/version.rb | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/react_on_rails/version.rb b/lib/react_on_rails/version.rb index f0fbe5f90..6f5048803 100644 --- a/lib/react_on_rails/version.rb +++ b/lib/react_on_rails/version.rb @@ -1,3 +1,3 @@ module ReactOnRails - VERSION = "7.0.4".freeze + VERSION = "7.1.0.beta.1".freeze end diff --git a/package.json b/package.json index 9a04fd975..eba261d29 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-on-rails", - "version": "7.0.4", + "version": "7.1.0-beta.1", "description": "react-on-rails JavaScript for react_on_rails Ruby gem", "main": "node_package/lib/ReactOnRails.js", "directories": { From ee0f5040b600549ba24001bc92d49cb5e0d941d0 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Thu, 27 Apr 2017 00:12:12 -1000 Subject: [PATCH 17/24] Release 7.1.0-beta.2 --- lib/react_on_rails/version.rb | 2 +- package.json | 2 +- spec/dummy/Gemfile.lock | 9 +++++---- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/lib/react_on_rails/version.rb b/lib/react_on_rails/version.rb index 6f5048803..6def72347 100644 --- a/lib/react_on_rails/version.rb +++ b/lib/react_on_rails/version.rb @@ -1,3 +1,3 @@ module ReactOnRails - VERSION = "7.1.0.beta.1".freeze + VERSION = "7.1.0.beta.2".freeze end diff --git a/package.json b/package.json index eba261d29..9809a1f51 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-on-rails", - "version": "7.1.0-beta.1", + "version": "7.1.0-beta.2", "description": "react-on-rails JavaScript for react_on_rails Ruby gem", "main": "node_package/lib/ReactOnRails.js", "directories": { diff --git a/spec/dummy/Gemfile.lock b/spec/dummy/Gemfile.lock index f26cf2b56..35a46d98d 100644 --- a/spec/dummy/Gemfile.lock +++ b/spec/dummy/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: ../.. specs: - react_on_rails (7.0.4) + react_on_rails (7.1.0.beta.2) addressable connection_pool execjs (~> 2.5) @@ -269,8 +269,9 @@ GEM thread_safe (0.3.6) tilt (2.0.6) tins (1.13.2) - turbolinks (2.5.3) - coffee-rails + turbolinks (5.0.1) + turbolinks-source (~> 5) + turbolinks-source (5.0.0) tzinfo (1.2.2) thread_safe (~> 0.1) uglifier (3.1.4) @@ -325,7 +326,7 @@ DEPENDENCIES selenium-webdriver spring sqlite3 - turbolinks (= 2.5.3) + turbolinks (~> 5.0) uglifier webpacker_lite (= 0.0.5) From 95765e30c8a1e6e504a7e60025bd73d85635e211 Mon Sep 17 00:00:00 2001 From: Daniel Szatmari Date: Sun, 30 Apr 2017 11:12:45 +0200 Subject: [PATCH 18/24] update docs --- README.md | 14 +++++++++----- docs/basics/installation-overview.md | 11 +++++++---- .../templates/base/base/Procfile.dev.tt | 2 +- lib/react_on_rails/configuration.rb | 2 +- spec/dummy/Gemfile.lock | 7 +++---- 5 files changed, 21 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 5ceb421ec..9166dc19a 100644 --- a/README.md +++ b/README.md @@ -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. @@ -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.* @@ -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). @@ -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. @@ -222,7 +226,7 @@ In the following screenshot you can see the 3 parts of React on Rails rendering: 2. The wrapper div `
` 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: `
`. 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 `