SortableJS

References Used

• Docs: SortableJS
• Article: Drag and Drop sortable items with SortableJS and StimulusJS Rails 7
• Video: Drag and Drop Speedrun with Stimulus Components | Ruby on Rails 7
• Video: Create a drag and drop sortable list using Hotwire

Prerequisites

Ruby: >= 3.1 Node: 22.2.0

Local Development

Initial Setup

bin/setup

Running the Development Server

bin/dev

Seed Data

• Use db/seeds.rb to create records that need to exist in all environments.
• Use lib/tasks/dev.rake to create records that only need to exist in development.

Running bin/setup will run dev:prime.

Tasks

• Use bin/rails suspenders:db:migrate to run database migrations. This script ensures they are reversible.
• Use bin/rails suspenders:cleanup:organize_gemfile to automatically organize the project's Gemfile.
• Use bin/rails default to run the default Rake task. This will do the following:
  • Run the test suite.
  • Run a Ruby and ERB linter.
  • Scan the Ruby codebase for any dependency vulnerabilities.

Configuration

Test

• Enables raise_on_missing_translations.
• Disables action_dispatch.show_exceptions.

Development

• Enables raise_on_missing_translations.
• Enables annotate_rendered_view_with_filenames.
• Enables i18n_customize_full_message.
• Enables query_log_tags_enabled.

Production

• Enables require_master_key.

Linting

• Uses @thoughtbot/eslint-config for JavaScript linting.
• Uses @thoughtbot/stylelint-config for CSS linting.
• Uses prettier for additional linting.
• Uses better_html, erb_lint, and erblint-github for ERB linting.
• Uses standard for Ruby linting.

Available Commands

• Run yarn lint to lint front-end code.
• Run yarn fix:prettier to automatically fix prettier violations.
• Run bin/rails standard to lint ERB and Ruby code.
• Run bundle exec standardrb --fix to fix standard violations.

Testing

Uses RSpec and RSpec Rails in favor of the default test suite.

The test suite can be run with bin/rails spec.

Configuration can be found in the following files:

spec/rails_helper.rb
spec/spec_helper.rb
spec/support/action_mailer.rb
spec/support/driver.rb
spec/support/i18n.rb
spec/support/should_matchers.rb

• Uses action_dispatch-testing-integration-capybara to introduce Capybara assertions into Request specs.
• Uses should-matchers for simple one-liner tests for common Rails functionality.
• Uses webmock for stubbing and setting expectations on HTTP requests in Ruby.

Factories

Uses FactoryBot as an alternative to Fixtures to help you define dummy and test data for your test suite. The create, build, and build_stubbed class methods are directly available to all tests.

Place FactoryBot definitions in spec/factories.rb, at least until it grows unwieldy. This helps reduce confusion around circular dependencies and makes it easy to jump between definitions.

Accessibility

Uses capybara_accessibility_audit and capybara_accessible_selectors to encourage and enforce accessibility best practices.

For more information, review the Accessibility Tooling section in the CONTRIBUTING guide.

Advisories

Uses bundler-audit to update the local security database and show any relevant issues with the app's dependencies via a Rake task.

Mailers

Intercept emails in non-production environments by setting INTERCEPTOR_ADDRESSES.

INTERCEPTOR_ADDRESSES="[email protected],[email protected]" bin/rails s

Configuration can be found at config/initializers/email_interceptor.rb.

Interceptor can be found at app/mailers/email_interceptor.rb.

Jobs

Uses Sidekiq for background job processing.

Configures the test environment to use the inline adapter.

Layout and Assets

Stylesheets

• Uses PostCSS via cssbundling-rails.
• Uses modern-normalize to normalize browsers' default style.

Configuration can be found at postcss.config.js.

Adds the following stylesheet structure.

app/assets/stylesheets/base.css
app/assets/stylesheets/components.css
app/assets/stylesheets/utilities.css

Adds app/assets/static so that postcss-url has a directory to copy assets to.

Inline SVG

Uses inline_svg for embedding SVG documents into views.

Configuration can be found at config/initializers/inline_svg.rb

Layout

• A partial for flash messages is located in app/views/application/_flashes.html.erb.
• Sets lang attribute on <html> element to en via I18n.local.
• Dynamically sets <title> via the title gem.
• Disables Turbo's Prefetch in an effort to reduce unnecessary network requests.