Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion Gemfile
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
19 changes: 12 additions & 7 deletions Gemfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion Procfile.dev
Original file line number Diff line number Diff line change
Expand Up @@ -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
2 changes: 1 addition & 1 deletion Procfile.dev-static → Procfile.dev-prod-assets
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
10 changes: 10 additions & 0 deletions Procfile.dev-static-assets
Original file line number Diff line number Diff line change
@@ -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'
31 changes: 26 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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!**
Expand All @@ -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
Expand Down Expand Up @@ -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 <Procfile>
```

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)
Expand Down
49 changes: 25 additions & 24 deletions bin/dev
Original file line number Diff line number Diff line change
@@ -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)
30 changes: 0 additions & 30 deletions bin/dev-static

This file was deleted.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
18 changes: 3 additions & 15 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down
Loading