alpha

Setting up a rails project takes at least one day to configure. This is my attempt to make it as fast as possible.

All files generated by rails are preserved.

Changes are made by inserting code snippets to generated files.

Each change is separated by different commits to easily track any changes made.

tl;dr

• Working react component using remount
• Essential packages
  • sanitize.css
  • modularscale-sass
• hamlit as templating language
• Rspec test suite
  • Includes rspec and other gems useful in testing.
  • Preconfigured with headless chromedriver
  • Working rspec examples with js enabled
• Javascript test suite
  • jest
  • react-testing-library
• Preconfigured linters
  • rubocop
  • prettier
  • eslint
  • stylelint

Getting Started

Requirements

• ruby >= 2.7.0
• rails >= 6.0.2
• nodejs >= 10.15.1
• yarn >= 1.12.0

Optional

• asdf

Basic Usage

rails new appname -m https://raw.githubusercontent.com/darwintantuco/alpha/master/template.rb

Recommended Usage

rails new appname \
  --database=postgresql \
  --skip-test \
  --skip-turbolinks \
  --skip-coffee \
  --asdf \
  --typescript \
  -m https://raw.githubusercontent.com/darwintantuco/alpha/master/template.rb

Custom Flags

Flag	Description
--asdf	generates .tool_versions
--typescript	typescript support and sample react components are in typescript

Webpacker Setup

Folder Structure

├── app
├── channels
├── assets
├── channels
├── javascript
│   ├── css
│   │   ├── components
│   │   │   └── home-page.scss
│   │   ├── application.scss
│   │   └── vendor.scss
│   ├── images
│   │   ├── application.js
│   │   ├── rails-logo.svg
│   │   └── welcome.jpeg
│   ├── js
│   │   └── application.js
│   ├── packs
│   │   └── application.js
│   └── react
│       ├── components
│       │   ├── __tests__
│       │   └── Greeter.js / Greeter.tsx
│       └── application.js
├── jobs
└── mailers

React

Added packages:

• react
• react-dom
• babel-preset-react
• remount

Essential packages

• sanitize.css as css resets
• modularscale-sass

Rspec Test Suite

• Includes rspec and other gems useful in testing.
• Preconfigured with headless chromedriver
• Working rspec examples with js enabled

Gem	Description
rspec-rails	rspec wrapper for rails
factory_bot_rails	fixtures
rails-controller-testing	helper for rspec controller testing
capybara	testing users' interaction
selenium-webdriver	default driver for javascript tests
chromedriver-helper	use chromedriver
database_cleaner	ensure a clean state for testing
faker	generate fake data
rubocop-rspec	rspec-specific analysis

Javascript Test Suite

Added packages:

• jest
• babel-jest
• react-testing-library

// jest.config.js
module.exports = {
  roots: ['app/assets/javascripts', 'app/javascript']
}

Preconfigured Linters

Comes with initial config but can be updated to your preference.

Rubocop

Added gems:

• rubocop
• rubocop-rspec

Initial rubocop_todo.yml is generated.

# .rubocop.yml
inherit_from: .rubocop_todo.yml
require: rubocop-rspec

Style/FrozenStringLiteralComment:
  EnforcedStyle: never

Style/StringLiterals:
  EnforcedStyle: double_quotes

Style/HashSyntax:
  EnforcedStyle: ruby19

Layout/IndentationConsistency:
  EnforcedStyle: indented_internal_methods

Layout/CaseIndentation:
  EnforcedStyle: end

Layout/BlockAlignment:
  Enabled: false

Layout/EndAlignment:
  EnforcedStyleAlignWith: start_of_line

AllCops:
  Exclude:
    - 'vendor/**/*'
    - 'node_modules/**/*'
    - 'db/migrate/*'
    - 'db/schema.rb'
    - 'db/seeds.rb'
    - 'bin/*'
  TargetRubyVersion: 2.7.0

Eslint

Added packages:

• eslint
• babel-eslint
• eslint-config-prettier
• eslint-plugin-react

// .eslintrc.js
module.exports = {
  plugins: ['react'],
  parser: 'babel-eslint',
  env: {
    jest: true
  },
  rules: {
    'react/prop-types': 0
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'eslint-config-prettier'
  ],
  parserOptions: {
    ecmaFeatures: { jsx: true },
    ecmaVersion: 2018,
    sourceType: 'module'
  }
}

Prettier

Added packages:

• prettier

// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote": true
}

Stylelint

Added packages:

• stylelint
• stylelint-8-point-grid
• stylelint-config-standard
• stylelint-rscss

// .stylelintrc
{
  "extends": [
    "stylelint-config-standard",
    "stylelint-rscss/config",
    "stylelint-8-point-grid"
  ],
  "rules": {
    "plugin/8-point-grid": {
      "base": 8,
      "allowlist": ["4px", "2px", "1px"]
    },
    "at-rule-no-unknown": null,
    "at-rule-empty-line-before": null
  }
}

Yarn Scripts

Command	Description
yarn run test	jest
yarn run lint:ruby	rubocop
yarn run lint:js	eslint
yarn run lint:css	stylelint
yarn run prettier:check	prettier
yarn run prettier:fix	prettier
yarn run lint:ci	rubocop eslint stylelint prettier:check

Post Install Guide

Convert existing erb files to haml

1. Install html2haml

   $ gem install html2haml
   

2. Convert erb files to haml (keeps original file)

   $ find . -name \*.erb -print | sed 'p;s/.erb$/.haml/' | xargs -n2 html2haml
   

3. Delete existing erb files

   $ find . -name \*.erb | xargs git rm
   

4. Commit the changes

5. Uninstall html2haml

   $ gem uninstall html2haml
   

Consider removing config/database.yml in version control / git

1. Add config/database.yml to .gitignore

   $ echo config/database.yml >> .gitignore
   

2. Rename config/database.yml to config/database.yml.sample

   $ git mv config/database.yml config/database.yml.sample
   

3. Commit the changes

License

MIT