diff --git a/Gemfile b/Gemfile index fa33f8fbc..c27e17839 100644 --- a/Gemfile +++ b/Gemfile @@ -5,7 +5,11 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby "3.3.4" -gem "react_on_rails", "14.1.0.rc.0" +# gem "react_on_rails", "14.1.0.rc.0" +gem 'react_on_rails', path: '../../../shakacode/react-on-rails/react_on_rails_2' + + + gem "shakapacker", "8.0.0" # Bundle edge Rails instead: gem "rails", github: "rails/rails" diff --git a/Gemfile.lock b/Gemfile.lock index f3a5bd9f6..3f8333d27 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -4,6 +4,17 @@ GIT specs: net-pop (0.1.2) +PATH + remote: ../react_on_rails_2 + specs: + react_on_rails (16.0.0) + addressable + connection_pool + execjs (~> 2.5) + rails (>= 5.2) + rainbow (~> 3.0) + shakapacker (>= 6.0) + GEM remote: https://rubygems.org/ specs: @@ -289,12 +300,6 @@ GEM ffi (~> 1.0) rdoc (6.7.0) psych (>= 4.0.0) - react_on_rails (14.1.0.rc.0) - addressable - connection_pool - execjs (~> 2.5) - rails (>= 5.2) - rainbow (~> 3.0) redcarpet (3.6.0) redis (5.3.0) redis-client (>= 0.22.0) @@ -473,7 +478,7 @@ DEPENDENCIES rails-html-sanitizer rails_best_practices rainbow - react_on_rails (= 14.1.0.rc.0) + react_on_rails! redcarpet redis (~> 5.0) rspec-rails (~> 6.0.0) diff --git a/Procfile.dev b/Procfile.dev index 20453bbe6..90a931b08 100644 --- a/Procfile.dev +++ b/Procfile.dev @@ -2,6 +2,6 @@ # You can run these commands in separate shells rescript: yarn res:dev redis: redis-server -rails: bundle exec rails s -p 3000 +rails: bin/rails s -p 3000 wp-client: HMR=true RAILS_ENV=development NODE_ENV=development bin/shakapacker-dev-server wp-server: bundle exec rake react_on_rails:locale && HMR=true SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch diff --git a/Procfile.dev-static b/Procfile.dev-prod-assets similarity index 95% rename from Procfile.dev-static rename to Procfile.dev-prod-assets index 31ced8e21..096efc60e 100644 --- a/Procfile.dev-static +++ b/Procfile.dev-prod-assets @@ -1,5 +1,5 @@ # You can run these commands in separate shells -web: rails s -p 3000 +web: bin/rails s -p 3001 redis: redis-server # Next line runs a watch process with webpack to compile the changed files. diff --git a/Procfile.dev-static-assets b/Procfile.dev-static-assets new file mode 100644 index 000000000..4561761aa --- /dev/null +++ b/Procfile.dev-static-assets @@ -0,0 +1,10 @@ +# You can run these commands in separate shells +web: bin/rails s -p 3000 +redis: redis-server + +# Next line runs a watch process with webpack to compile the changed files. +# When making frequent changes to client side assets, you will prefer building webpack assets +# upon saving rather than when you refresh your browser page. +# Note, if using React on Rails localization you will need to run +# `bundle exec rake react_on_rails:locale` before you run bin/shakapacker +webpack: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/shakapacker -w' diff --git a/README.md b/README.md index ba8256757..dfbd8d09a 100644 --- a/README.md +++ b/README.md @@ -143,8 +143,10 @@ See package.json and Gemfile for versions ### Basic Command Line - Run all linters and tests: `rake` - See all npm commands: `yarn run` -- To start all development processes: `foreman start -f Procfile.dev` -- To start only all Rails development processes: `foreman start -f Procfile.hot` +- To start development with HMR: `./bin/dev` (or `./bin/dev hmr`) +- To start with static assets: `./bin/dev static` +- To start with production-like assets: `./bin/dev prod` +- For help with options: `./bin/dev help` ## Rails Integration **We're now using Webpack for all Sass and JavaScript assets so we can do CSS Modules within Rails!** @@ -162,7 +164,7 @@ See package.json and Gemfile for versions + Be sure to see [Integration Test Notes](./docs/integration-test-notes.md) for advice on running your integration tests. -+ **Testing Mode**: When running tests, it is useful to run `foreman start -f Procfile.spec` in order to have webpack automatically recompile the static bundles. Rspec is configured to automatically check whether or not this process is running. If it is not, it will automatically rebuild the webpack bundle to ensure you are not running tests on stale client code. This is achieved via the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)` ++ **Testing Mode**: When running tests, it is useful to run `./bin/dev static` in order to have webpack automatically recompile the static bundles. Rspec is configured to automatically check whether or not this process is running. If it is not, it will automatically rebuild the webpack bundle to ensure you are not running tests on stale client code. This is achieved via the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)` line in the `rails_helper.rb` file. If you are using this project as an example and are not using RSpec, you may want to implement similar logic in your own project. ## Webpack @@ -203,12 +205,31 @@ export default class CommentBox extends React.Component { The tutorial makes use of a custom font OpenSans-Light. We're doing this to show how to add assets for the CSS processing. The font files are located under [client/app/assets/fonts](client/app/assets/fonts) and are loaded by both the Rails asset pipeline and the Webpack HMR server. ## Process management during development + +**Recommended approach** using the enhanced `bin/dev` script: + +```bash +./bin/dev # HMR development (default) +./bin/dev static # Static assets development +./bin/dev prod # Production-like assets +./bin/dev help # See all options +``` + +**Advanced options:** +```bash +./bin/dev --route=comments # Custom route in URLs +./bin/dev prod --rails-env=production # Full production environment +``` + +**Alternative approach** using foreman directly: ``` bundle exec foreman start -f ``` -1. [`Procfile.dev`](Procfile.dev): Starts the Webpack Dev Server and Rails with Hot Reloading. -1. [`Procfile.static`](Procfile.dev-static): Starts the Rails server and generates static assets that are used for tests. +Available Procfiles: +1. [`Procfile.dev`](Procfile.dev): Webpack Dev Server and Rails with Hot Reloading +1. [`Procfile.dev-static-assets`](Procfile.dev-static-assets): Rails server with static asset generation +1. [`Procfile.dev-prod-assets`](Procfile.dev-prod-assets): Rails server with production-optimized assets ## Contributors [The Shaka Code team!](http://www.shakacode.com/about/), led by [Justin Gordon](https://github.com/justin808/), along with with many others. See [contributors.md](docs/contributors.md) diff --git a/bin/dev b/bin/dev index bc3f590eb..5ad504c9e 100755 --- a/bin/dev +++ b/bin/dev @@ -1,30 +1,31 @@ #!/usr/bin/env ruby # frozen_string_literal: true -def installed?(process) - IO.popen "#{process} -v" -rescue Errno::ENOENT - false -end +# ReactOnRails Development Server +# +# This script provides a simple interface to the ReactOnRails development +# server management. The core logic is implemented in ReactOnRails::Dev +# classes for better maintainability and testing. +# +# Each command uses a specific Procfile for process management: +# - bin/dev (default/hmr): Uses Procfile.dev +# - bin/dev static: Uses Procfile.dev-static-assets-assets +# - bin/dev prod: Uses Procfile.dev-prod-assets +# +# To customize development environment: +# 1. Edit the appropriate Procfile to modify which processes run +# 2. Modify this script for project-specific command-line behavior +# 3. Extend ReactOnRails::Dev classes in your Rails app for advanced customization +# 4. Use classes directly: ReactOnRails::Dev::ServerManager.start(:development, "Custom.procfile") -def run(process) - system "#{process} start -f Procfile.dev" -rescue Errno::ENOENT - warn <<~msg - ERROR: - Please ensure `Procfile.dev` exists in your project! - MSG - exit! +begin + require "bundler/setup" + require "react_on_rails/dev" +rescue LoadError + # Fallback for when gem is not yet installed + puts "Loading ReactOnRails development tools..." + require_relative "../../lib/react_on_rails/dev" end -if installed? "overmind" - run "overmind" -elsif installed? "foreman" - run "foreman" -else - warn <<~msg - NOTICE: - For this script to run, you need either 'overmind' or 'foreman' installed on your machine. Please try this script after installing one of them. - MSG - exit! -end +# Main execution +ReactOnRails::Dev::ServerManager.run_from_command_line(ARGV) diff --git a/bin/dev-static b/bin/dev-static deleted file mode 100755 index d0d255c69..000000000 --- a/bin/dev-static +++ /dev/null @@ -1,30 +0,0 @@ -#!/usr/bin/env ruby -# frozen_string_literal: true - -def installed?(process) - IO.popen "#{process} -v" -rescue Errno::ENOENT - false -end - -def run(process) - system "#{process} start -f Procfile.dev-static" -rescue Errno::ENOENT - warn <<~msg - ERROR: - Please ensure `Procfile.dev-static` exists in your project! - MSG - exit! -end - -if installed? "overmind" - run "overmind" -elsif installed? "foreman" - run "foreman" -else - warn <<~msg - NOTICE: - For this script to run, you need either 'overmind' or 'foreman' installed on your machine. Please try this script after installing one of them. - MSG - exit! -end diff --git a/package.json b/package.json index df9f9507e..9d56cbc6a 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "react": "^19.0.0", "react-dom": "^19.0.0", "react-intl": "^6.4.4", - "react-on-rails": "14.0.3", + "react-on-rails": "file:.yalc/react-on-rails", "react-redux": "^8.1.0", "react-router": "^6.13.0", "react-router-dom": "^6.13.0", diff --git a/yarn.lock b/yarn.lock index 8b1204f92..682422768 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1006,14 +1006,6 @@ resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310" integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA== -"@babel/runtime-corejs3@^7.12.5": - version "7.22.10" - resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.22.10.tgz#5ecc3d32faa70009f084cc2e087d79e5f5cdcca9" - integrity sha512-IcixfV2Jl3UrqZX4c81+7lVg5++2ufYJyAFW3Aux/ZTvY6LVYYhJ9rMgnbX0zGVq6eqfVpnoatTjZdVki/GmWA== - dependencies: - core-js-pure "^3.30.2" - regenerator-runtime "^0.14.0" - "@babel/runtime@^7.12.1": version "7.26.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1" @@ -3263,7 +3255,7 @@ core-js-compat@^3.31.0: dependencies: browserslist "^4.21.9" -core-js-pure@^3.23.3, core-js-pure@^3.30.2: +core-js-pure@^3.23.3: version "3.32.0" resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.32.0.tgz#5d79f85da7a4373e9a06494ccbef995a4c639f8b" integrity sha512-qsev1H+dTNYpDUEURRuOXMvpdtAnNEvQWS/FMJ2Vb5AY8ZP4rAPQldkE27joykZPJTe0+IVgHZYh1P5Xu1/i1g== @@ -7276,12 +7268,8 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== -react-on-rails@14.0.3: - version "14.0.3" - resolved "https://registry.yarnpkg.com/react-on-rails/-/react-on-rails-14.0.3.tgz#5a870644c0fbfd0a4f4adcc62623573a40de8ad8" - integrity sha512-BGvnvSI871K63JXg72KgMy73izKYralp9rrf40VSiR+OvusnXJkwVa4gaUP21226R835gzU7VSbbf64L7H9GhQ== - dependencies: - "@babel/runtime-corejs3" "^7.12.5" +"react-on-rails@file:.yalc/react-on-rails": + version "16.0.0" react-proxy@^1.1.7: version "1.1.8"

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