GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → ledermann → templatus-hotwire

ledermann / templatus-hotwire

Licence: MIT License
Opinionated template for starting new web applications with Ruby on Rails and Hotwire

Programming Languages

ruby
36898 projects - #4 most used programming language
javascript
184084 projects - #8 most used programming language
Slim
82 projects
HTML
75241 projects
shell
77523 projects
Dockerfile
14818 projects
CSS
56736 projects

Labels

railstemplatehotwire

Projects that are alternatives of or similar to templatus-hotwire

rails hotwire base
Rails + Hotwire base app
Stars: ✭ 54 (+45.95%)
Mutual labels:  hotwire
hotwire-django-realworld
RealWorld Django app built with Turbo!
Stars: ✭ 29 (-21.62%)
Mutual labels:  hotwire
esbuild-rails
Esbuild Rails plugin
Stars: ✭ 102 (+175.68%)
Mutual labels:  hotwire
stimulus reflex
Build reactive applications with the Rails tooling you already know and love.
Stars: ✭ 2,001 (+5308.11%)
Mutual labels:  hotwire
decent-visualizer
A visualizer for .shot files
Stars: ✭ 46 (+24.32%)
Mutual labels:  hotwire
hotwire-livereload
Live reload for Hotwire Rails apps.
Stars: ✭ 231 (+524.32%)
Mutual labels:  hotwire
django-turbo-response
Hotwired/Turbo Django response helpers
Stars: ✭ 66 (+78.38%)
Mutual labels:  hotwire
express-hotwire
Express tooling for working with Hotwire (HTML over the wire) https://hotwire.dev
Stars: ✭ 39 (+5.41%)
Mutual labels:  hotwire
webrtc-hotwire-rails
A video chat app demonstration using Hotwire and Ruby on Rails
Stars: ✭ 38 (+2.7%)
Mutual labels:  hotwire

Build Status Cypress

Templatus (Hotwire edition)

Templatus is an opinionated template to build web applications with Ruby on Rails and Hotwire. It simplifies the process of setting up a new application while following best practices.

Live demo available at https://templatus-hotwire.ledermann.dev

There is a sister repository that uses Vue.js instead of Hotwire: https://github.com/ledermann/templatus/

Features / Technology stack

Backend

Frontend

  • Hotwire for building the frontend without using much JavaScript by sending HTML instead of JSON over the wire
  • ViewComponent for creating reusable, testable & encapsulated view components
  • Slim for writing templates instead of ERB
  • Tailwind CSS 3 to not have to write CSS at all
  • Heroicons for beautiful hand-crafted SVG icons
  • esbuild for bundling JavaScript

Development

  • Puma-dev for using .test-domain and HTTPS in development
  • Foreman for starting up the application locally
  • dotenv to load environment variables from .env into ENV
  • Prettier for auto-formatting JavaScript and Ruby code in Visual Studio Code
  • Lookbook as development UI for ViewComponent
  • Live reloading

Linting and testing

  • RuboCop for Ruby static code analysis
  • ESLint for JavaScript static code analysis
  • RSpec for Ruby testing
  • Factory Bot for setting up Ruby objects as test data
  • Cypress for E2E testing

Deployment

  • Docker for production deployment, NOT for development
  • DockerRailsBase for fast building an optimized Docker image based on Alpine Linux
  • GitHub Actions for testing, linting, and building Docker image
  • Dependabot configuration for updating dependencies (with auto-merge)
  • Ready for serving assets via CDN like CloudFront
  • Honeybadger for error tracking in Ruby and JavaScript
  • Lockup to place a staging server behind a basic codeword

Production

Metrics

This template is developed with optimized performance and security in mind. The following benchmarks are performed against the demo installation on production. It uses an inexpensive virtual server on the Hetzner Cloud behind a Traefik setup.

Lighthouse site performance

100% in all categories.

Lighthouse

Security headers

Security headers

What's the red Permissions-Policy badge? This seems to be fixed with one of the next Rails update: https://github.com/rails/rails/pull/41994

Mozilla Observatory

Mozilla Observatory

WebPageTest

WebPageTest

GTmetrix

GTmetrix

Check-your-website

Check-your-website

JavaScript size

134 KB of compiled JavaScript (minified, uncompressed). The largest parts are:

  • Turbo with ActionCable (72 KB)
  • Stimulus (32 KB)
  • Honeybadger (22 KB)
$ yarn build
yarn run v1.22.17
$ node esbuild.config.js

  ../assets/builds/application.js                                                                     133.5kb  100.0%
   ├ ../../node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js                                       62.3kb   46.7%
   ├ ../../node_modules/@hotwired/stimulus/dist/stimulus.js                                            31.8kb   23.8%
   ├ ../../node_modules/@honeybadger-io/js/dist/browser/honeybadger.js                                 21.2kb   15.9%
   ├ ../../node_modules/@rails/actioncable/src/connection.js                                            2.8kb    2.1%
   ├ ../../node_modules/@rails/actioncable/src/connection_monitor.js                                    2.3kb    1.7%
   ├ ../../node_modules/register-service-worker/index.js                                                1.7kb    1.3%
   ├ ../../node_modules/@rails/actioncable/src/subscriptions.js                                         1.2kb    0.9%
   ├ ../../node_modules/@rails/actioncable/src/subscription_guarantor.js                                864b     0.6%
   ├ ../../node_modules/el-transition/index.js                                                          805b     0.6%
   ├ ../../node_modules/timeago.js/esm/utils/date.js                                                    668b     0.5%
   ├ ../../node_modules/@rails/actioncable/src/consumer.js                                              585b     0.4%
   ├ controllers/online_status_controller.js                                                            568b     0.4%
   ├ ../../node_modules/@hotwired/turbo-rails/app/javascript/turbo/cable_stream_source_element.js       522b     0.4%
   ├ utils/setupServiceWorker.js                                                                        519b     0.4%
   ├ ../../node_modules/@rails/actioncable/src/index.js                                                 501b     0.4%
   ├ ../components/clicks/component_controller.js                                                       480b     0.4%
   ├ ../../node_modules/timeago.js/esm/realtime.js                                                      409b     0.3%
   ├ ../../node_modules/@rails/actioncable/src/subscription.js                                          400b     0.3%
   ├ ../../node_modules/@rails/actioncable/src/internal.js                                              365b     0.3%
   ├ ../../node_modules/@hotwired/turbo-rails/app/javascript/turbo/cable.js                             256b     0.2%
   ├ ../../node_modules/timeago.js/esm/lang/zh_CN.js                                                    220b     0.2%
   ├ ../../node_modules/timeago.js/esm/lang/en_US.js                                                    197b     0.1%
   ├ ../../node_modules/timeago.js/esm/utils/dom.js                                                     158b     0.1%
   ├ utils/setupHoneyBadger.js                                                                          157b     0.1%
   ├ rails:/Users/ledermann/Projects/templatus-hotwire/app/javascript/controllers/**/*_controller.js    151b     0.1%
   ├ ../../node_modules/@rails/actioncable/src/logger.js                                                107b     0.1%
   ├ controllers/timeago_controller.js                                                                  104b     0.1%
   ├ rails:/Users/ledermann/Projects/templatus-hotwire/app/components/**/*_controller.js                 96b     0.1%
   ├ utils/metaContent.js                                                                                92b     0.1%
   ├ utils/setupStimulus.js                                                                              78b     0.1%
   ├ ../../node_modules/timeago.js/esm/register.js                                                       75b     0.1%
   ├ ../components/index.js                                                                              68b     0.0%
   ├ controllers/index.js                                                                                68b     0.0%
   ├ ../../node_modules/@rails/actioncable/src/adapters.js                                               67b     0.0%
   └ ../../node_modules/timeago.js/esm/index.js                                                          30b     0.0%

✨  Done in 0.20s.

Network transfer

Small footprint: The demo application transfers only 52 KB of data on the first visit.

Network

Docker build time

With multi-stage building and using DockerRailsBase the build of the Docker image takes very little time. Currently, the build job requires about 1,5 minutes on GitHub Actions (see https://github.com/ledermann/templatus-hotwire/actions)

Docker image size

The Docker image is based on Alpine Linux and is optimized for minimal size (currently 127 MB uncompressed disk size). It includes just the bare minimum - no build tools like Node.js, no JS sources (just the compiled assets), no tests.

$ container-diff analyze ghcr.io/ledermann/templatus-hotwire -n

-----Size-----

Analysis for ghcr.io/ledermann/templatus-hotwire:
IMAGE                                      DIGEST       SIZE
ghcr.io/ledermann/templatus-hotwire        sha256:... 127.4M

Getting started

Install for development

  1. Clone the repo locally:
git clone [email protected]:ledermann/templatus-hotwire.git
cd templatus-hotwire
  1. Install PostgreSQL, Redis, and puma-dev (if not already present). On a Mac with HomeBrew, run this to install from the Brewfile:
brew bundle
  1. Install and set up puma-dev to use HTTPS for development. Do this on macOS:
sudo puma-dev -setup
puma-dev -install
puma-dev link

# Auto-reload esbuild via puma-dev proxy
# https://github.com/puma/puma-dev#webpack-dev-server
echo 8082 > ~/.puma-dev/esbuild.templatus-hotwire
  1. Setup the application to install gems and NPM packages and create the database:
bin/setup
  1. Start the application locally:
bin/dev

Then open https://templatus-hotwire.test in your browser.

Preview components in LookBook

bin/dev

Then open https://templatus-hotwire.test/lookbook/ in your browser.

Running linters

RuboCop:

bin/rubocop

ESLint:

bin/yarn lint

Running tests locally

Ruby tests:

bin/rspec
open coverage/index.html

JavaScript unit tests:

bin/yarn test

E2E tests with Cypress:

bin/cypress open

This opens Cypress and starts Rails in development environment, but with CYPRESS=true, so the test database is used. This allows code editing without class reloading and recompiling assets.

To run Cypress in headless mode:

bin/cypress run

Test deployment locally

docker network create public
docker-compose up
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].