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

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .controlplane/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -79,4 +79,4 @@ ENTRYPOINT ["./.controlplane/entrypoint.sh"]

# Default args to pass to the entry point that can be overridden
# For Kubernetes and ControlPlane, these are the "workload args"
CMD ["./bin/rails", "server"]
CMD ["./bin/rails", "server", "--early-hints"]
3 changes: 2 additions & 1 deletion Gemfile
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby "3.4.6"

gem "react_on_rails", "16.1.1"
gem "shakapacker", "9.3.0.beta.2"
gem "shakapacker", "9.3.0"

# Bundle edge Rails instead: gem "rails", github: "rails/rails"
gem "listen"
Expand All @@ -15,6 +15,7 @@ gem "rails", "~> 8.0"
gem "pg"

gem "puma"
gem "thruster"

# Use SCSS for stylesheets
gem "sass-rails"
Expand Down
15 changes: 6 additions & 9 deletions Gemfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,6 @@ GEM
factory_bot_rails (6.4.3)
factory_bot (~> 6.4)
railties (>= 5.0.0)
ffi (1.17.2)
ffi (1.17.2-arm64-darwin)
ffi (1.17.2-x86_64-linux-gnu)
foreman (0.88.1)
Expand Down Expand Up @@ -181,7 +180,6 @@ GEM
matrix (0.4.2)
method_source (1.1.0)
mini_mime (1.1.5)
mini_portile2 (2.8.9)
minitest (5.26.0)
mize (0.4.1)
protocol (~> 2.0)
Expand All @@ -195,9 +193,6 @@ GEM
net-smtp (0.5.1)
net-protocol
nio4r (2.7.4)
nokogiri (1.18.10)
mini_portile2 (~> 2.8.2)
racc (~> 1.4)
nokogiri (1.18.10-arm64-darwin)
racc (~> 1.4)
nokogiri (1.18.10-x86_64-linux-gnu)
Expand Down Expand Up @@ -386,7 +381,7 @@ GEM
websocket (~> 1.0)
semantic_range (3.1.0)
sexp_processor (4.17.1)
shakapacker (9.3.0.beta.2)
shakapacker (9.3.0)
activesupport (>= 5.2)
package_json
rack-proxy (>= 0.6.1)
Expand Down Expand Up @@ -417,6 +412,8 @@ GEM
mize
tins (~> 1.0)
thor (1.4.0)
thruster (0.1.16-arm64-darwin)
thruster (0.1.16-x86_64-linux)
tilt (2.4.0)
timeout (0.4.3)
tins (1.33.0)
Expand Down Expand Up @@ -453,7 +450,6 @@ GEM
PLATFORMS
arm64-darwin
arm64-darwin-22
ruby
x86_64-linux
x86_64-linux-gnu

Expand Down Expand Up @@ -496,16 +492,17 @@ DEPENDENCIES
scss_lint
sdoc
selenium-webdriver (~> 4)
shakapacker (= 9.3.0.beta.2)
shakapacker (= 9.3.0)
spring
spring-commands-rspec
stimulus-rails (~> 1.3)
thruster
turbo-rails (~> 2.0)
uglifier
web-console

RUBY VERSION
ruby 3.4.6p32
ruby 3.4.6p54

BUNDLED WITH
2.4.17
2 changes: 1 addition & 1 deletion Procfile
Original file line number Diff line number Diff line change
@@ -1 +1 @@
web: bundle exec puma -C config/puma.rb
web: bundle exec thrust bin/rails server
2 changes: 1 addition & 1 deletion Procfile.dev
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
# You can run these commands in separate shells
rescript: yarn res:dev
redis: redis-server
rails: bundle exec rails s -p 3000
rails: bundle exec thrust bin/rails server -p 3000
# Sleep to allow rescript files to compile before starting webpack
wp-client: sleep 5 && RAILS_ENV=development NODE_ENV=development bin/shakapacker-dev-server
wp-server: sleep 5 && bundle exec rake react_on_rails:locale && HMR=true SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch
2 changes: 1 addition & 1 deletion 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: bin/rails s -p 3001
web: bundle exec thrust bin/rails server -p 3001
redis: redis-server

# Next line runs a watch process with webpack to compile the changed files.
Expand Down
2 changes: 1 addition & 1 deletion Procfile.dev-static
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: bundle exec thrust bin/rails server -p 3000
redis: redis-server

# Next line runs a watch process with webpack to compile the changed files.
Expand Down
2 changes: 1 addition & 1 deletion Procfile.dev-static-assets
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# You can run these commands in separate shells
web: bin/rails s -p 3000
web: bundle exec thrust bin/rails server -p 3000
redis: redis-server

# Next line runs a watch process with webpack to compile the changed files.
Expand Down
38 changes: 38 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ You can see this tutorial live here: [http://reactrails.com/](http://reactrails.
+ [Webpack](#webpack)
+ [Configuration Files](#configuration-files)
+ [Additional Resources](#additional-resources)
+ [Thruster HTTP/2 Proxy](#thruster-http2-proxy)
+ [Sass, CSS Modules, and Tailwind CSS integration](#sass-css-modules-and-tailwind-css-integration)
+ [Fonts with SASS](#fonts-with-sass)
+ [Process Management during Development](#process-management-during-development)
Expand Down Expand Up @@ -117,6 +118,7 @@ See package.json and Gemfile for versions
1. [Webpack with hot-reload](https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack) (for local dev)
1. [Babel transpiler](https://github.com/babel/babel)
1. [Ruby on Rails 7](http://rubyonrails.org/) for backend app and comparison with plain HTML
1. [Thruster](https://github.com/basecamp/thruster) - Zero-config HTTP/2 proxy for optimized asset delivery
1. [Heroku for Rails 7 deployment](https://devcenter.heroku.com/articles/getting-started-with-rails7)
1. [Deployment to the ControlPlane](.controlplane/readme.md)
1. [Turbolinks 5](https://github.com/turbolinks/turbolinks)
Expand Down Expand Up @@ -211,6 +213,42 @@ All bundler configuration is in `config/webpack/`:
- [Webpack Cookbook](https://christianalfoni.github.io/react-webpack-cookbook/)
- Good overview: [Pete Hunt's Webpack Howto](https://github.com/petehunt/webpack-howto)

## Thruster HTTP/2 Proxy

This project uses [Thruster](https://github.com/basecamp/thruster), a zero-config HTTP/2 proxy from Basecamp, for optimized asset delivery and improved performance.

### What Thruster Provides

- **HTTP/2 Support**: Automatic HTTP/2 with multiplexing for faster parallel asset loading
- **Asset Caching**: Intelligent caching of static assets from the `public/` directory
- **Compression**: Automatic gzip/Brotli compression for reduced bandwidth usage
- **Simplified Configuration**: No need for manual early hints configuration
- **Production Ready**: Built-in TLS termination with Let's Encrypt support

### Benefits

Compared to running Puma directly with `--early-hints`:
- **20-30% faster** initial page loads due to HTTP/2 multiplexing
- **40-60% reduction** in transfer size with Brotli compression
- **Simpler setup** - zero configuration required
- **Better caching** - automatic static asset optimization

### Usage

Thruster is already integrated into all Procfiles:

```bash
# Development with HMR
foreman start -f Procfile.dev

# Production
web: bundle exec thrust bin/rails server
```

The server automatically benefits from HTTP/2, caching, and compression without any additional configuration.

For detailed information, troubleshooting, and advanced configuration options, see [docs/thruster.md](docs/thruster.md).

## Sass, CSS Modules, and Tailwind CSS Integration
This example project uses mainly Tailwind CSS for styling.
Besides this, it also demonstrates Sass and CSS modules, particularly for some CSS transitions.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,29 @@ export default class Footer extends BaseComponent {
<div className="w-16 h-16 bg-[url('../images/twitter_64.png')]" />
Rails On Maui on Twitter
</a>
<div className="mt-6 pt-6 border-t border-neutral-700 text-sm text-neutral-400">
<div className="flex items-center gap-2">
<svg className="w-4 h-4 text-green-400" fill="currentColor" viewBox="0 0 20 20">
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clipRule="evenodd"
/>
</svg>
<span>
Powered by{' '}
<a
href="https://github.com/basecamp/thruster"
className="text-blue-400 hover:text-blue-300 underline"
target="_blank"
rel="noopener noreferrer"
>
Thruster HTTP/2
</a>{' '}
for optimized performance
</span>
</div>
</div>
</div>
</footer>
);
Expand Down
5 changes: 5 additions & 0 deletions config/shakapacker.yml
Original file line number Diff line number Diff line change
Expand Up @@ -63,3 +63,8 @@ production:

# Cache manifest.json for performance
cache_manifest: true

# Early hints configuration
early_hints:
enabled: true
debug: true # Outputs debug info as HTML comments
Loading