Tractor Beam

Acknowledgments

This gem has two major source or inspiration, and I am deeply grateful for the awesome work done by both of them.

Evil Martians

All the frontend setup Tractor Beam does is a representation of the good work put together by the folks at Evil Martians, specifically described on their Modern Front-end in Rails series of blog posts.

thoughtbot

When looking at how to build a custom rails generator there's no better example than thoughtbot/suspenders. I have used suspenders as the starting point for Tractor Beam, and ~stole~ borrowed some of its ideas on top of my main goal of building a Rails app with modern frontend tooling.

Goals

The main goal of this gem is to bootstrap a Rails application with all the modern component-based frontend goodness described by Evil Martians Modern Front-end in Rails series of blog posts. It also sets up a lot of the go to gems and tools for development in Rails, thus avoiding the initial configuration boilerplate that every new project brings.

Installation

gem install tractor_beam

Then run:

tractor_beam project-name

Versions

ruby 2.5.0 rails ~> 5.1.4

Gemfile

Tractor Beam copies Gemfile.erb to project-name/Gemfile.

It includes application gems:

• Postgres for access to the Postgres database.
• Puma to serve HTTP requests.
• Webpacker to Webpack to manage app-like JavaScript modules in Rails.

Development gems:

• pry-rails Rails >= 3 pry initializer.
• pry-byebug step-by-step debugging and stack navigation. capabilities to [pry] using [byebug].
• Spring for fast Rails actions via pre-loading.
• Web Console for better debugging via in-browser IRB consoles.

Other Sweet Sweet Goodness

Component Generator

rails g component component-name

Will generate:

frontend/components
   ├── component-name
   │   ├── _component-name.html.erb
   │   ├── component-name.css
   │   └── component-name.js

General Linting

• lint-staged run linters on git staged files.
• pre-commit manage multi-language pre-commit hooks.

Javascript Linting

• babel-eslint ESLint using Babel as the parser.
• eslint identify and report on patterns found in ECMAScript/JavaScript code.
• eslint-config-airbnb-base provides Airbnb's base JS .eslintrc.
• prettier code formatter that enforces a consistent style by parsing your code and re-printing it with its own rules.
• eslint-config-prettier turns off all rules that are unnecessary or might conflict with Prettier.
• eslint-import-resolver-webpack webpack-literate module resolution plugin for eslint-plugin-import.
• eslint-plugin-import support linting of ES2015+ (ES6+) import/export syntax.

CSS Linting

• stylelint a mighty, modern CSS linter.
• stylelint-config-standard the standard shareable config for stylelint.

Todo List

• [ ] Normalize css
• [ ] Simple Form
• [x] Testing configuration
  • [x] Coverage
  • [ ] shoulda-matchers
  • [ ] Factory Bot
• [ ] CI configuration
• [ ] Dotenv configuration
• [ ] Bundler Audit
• [ ] Rubocop (Maybe reinteractive-style)
• [ ] option to make app Heroku ready

Maybe TODO (Stolen ideas from https://github.com/thoughtbot/suspenders)

• The ./bin/setup convention for new developer setup
• The ./bin/deploy convention for deploying to Heroku
• Rails' flashes set up and in application layout
• A few nice time formats set up for localization
• Rack::Deflater to compress responses with Gzip
• A low database connection pool limit
• Safe binstubs
• t() and l() in specs without prefixing with I18n
• An automatically-created SECRET_KEY_BASE environment variable in all environments
• Configuration for CircleCI Continuous Integration (tests)
• Configuration for Hound Continuous Integration (style)
• The analytics adapter Segment (and therefore config for Google Analytics, Intercom, Facebook Ads, Twitter Ads, etc.)