An example Rails 7 app

This app is built with Rails 7, Ruby 3, Vite, Vue 3 and typescript. and is using Docker for building production images You could use this example app as a base for your upcoming projects. Or, you could use it as a tutorial that tells you which steps you need to take to create a project from scratch.

Several gems and packages are included in this example app that I've been using for a long time. It wires up a number of things you might use in a real world Rails app. However, at the same time it's not loaded up with a million personal opinions.

• As Webpacker has been retired, we are using Vite instead. It wouldn't be fair if I didn't say that: Vite is fantastic.

Table of Contents

• An example Rails 7 app
  • Table of Contents
  • Tech stack
    • Back-end
    • Front-end
    • Healthy app
      • Frontend
      • Backend
      • Common
  • Auth
    • /signup
    • /login
    • /logout
  • Apps
  • Running app
    • 1. Clone the repo
    • 2. Install dependencies
    • 3. Copy .env to .env.local
    • 4. Setup database
    • 5. Run the app
  • Docker
    • 1. Build the images
  • Renaming the project
  • How to contribute
  • License
  • TODO

Tech stack

Initially, I used the rails new baseapp -c tailwindcss -d postgresql command to initialize the project using the importmaps and default configurations, but I have since removed the importmaps, tailwindcss, and all default configurations in favor of using Vite. You can see a list of gems that are in the project with a link to their commit. Therefore, you can easily find what we configured for each gem.

Note there is a commit/branch for each gem/package and adding/changing a code in the repo, and you can see the list of the steps we did in order at the below. e.g. step 1 in the repo was init project and using PostgreSQL. step number 2 was adding RSpec, etc.

Back-end

• 1- PostgreSQL (init project)
• 2- RSpec (commit1) (commit2)
• 3- Factory Bot Rails (commit)
• 4- Faker (commit)
• 5- Database Cleaner (commit)
• 6- SimpleCov (commit)
• 7. Rubocop(Check the Healthy app/Backend part)
• 8- Annotate (commit)
• 9- Pry (commit)
• 10- Pagy (commit1) (commit2)

Front-end

• 17- Vite Removing importmaps and all frontend libraries and Use Vite instead (PR), and remove Sprockets and unused assets files (PR)
• 18- Code quality and format (Check Healthy app/Frontend part)
• 19- Vue.js Vue.js version 3 (PR , PR-fixbug)
• 27- Enabling auth process(and make the app ready) which needed more packages PR:
  • axios
  • pinia The official state management library for Vue. will be used instead of Vuex
  • vue-query
  • @babel/types
  • We start using TypeScript and Vue3 compistion API here

Healthy app

Frontend

• 18- Code quality and format (PR1, PR2)
  • ESlint
  • Eslint plugin vue
  • Prettier
  • Husky
  • lint-staged

Backend

• 7- RuboCop Code quality and format. First I added rubocop-rails_config gem by these two commits (commit1) (commit2), but after a while, I removed this gem and added rubocop gem and its extensions separately in this PR

• 20- Brakeman Checking Ruby on Rails applications for security vulnerabilities. you can check config/brakeman.ignore to see ignore errors (PR)

• 21- bundler-audit Patch-level verification for bundler (PR)

• 22- Fasterer Make Rubies code faster by suggestion some speed improvements. check .fasterer.yml to enable/disable suggestions (PR)

• 23- License Finder Check the licenses of the gems and packages. you can update doc/dependency_decisions.yml to manage licenses (PR)

• Moving linting gems into development and test group in Gemfile (commit)

Common

• 24- overcommit to manage and configure Git hooks by managing all healthy app tools. you can check .overcommit.yml to enable or disable tools. (PR)
• 25- Enabling github action to run overcommit after push and pull requests in github. Check .github/workflows/lint.yml to see the github configs (PR)

Auth

• 26- Devise and Devise::JWT JWT authentication solution Backend PR1, Backend PR2

We are using JWT to authentication using Devise and Devise::JWT gems. If you send a request to log in, the successful response will give you a header called Authorization which has the JWT token as value. and you need to add this header and its value to all of your requests.

Predefined auth routes: