Templatus-Vue: Vue 3 and Ruby on Rails Starter Template.

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

You can checkout a live demo at https://templatus-vue.ledermann.dev

Now lets have a look at what technologies are already made available to us in our template

Backend

Frontend

  • Vite for bundling JavaScript and CSS with Hot Module Replacement (HMR) in development
  • Vue 3 as frontend framework
  • Vue Router 4 for frontend routing
  • Pinia for frontend state management
  • Tailwind CSS 3 to not have to write CSS at all
  • Heroicons for SVG icons as Vue components
  • Rails Request.JS for AJAX requests with default headers

Linting and testing

  • RuboCop for Ruby static code analysis
  • RSpec for Ruby testing
  • ESLint for TypeScript static code analysis
  • Jest for TypeScript unit testing
  • 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 TypeScript
  • Plausible for privacy friendly analytics

Production

  • Lograge for single-line logging
  • Gzip and Brotli compression of dynamic responses (HTML, JSON) using Rack::Deflater, Rack::Brotli
  • Fine-tuned Content Security Policy (CSP)
  • Ready for PWA (manifest, service-worker)

Getting Started

Installation

  1. Clone the repo locally:

git clone git@github.com:templatus/templatus-vue.git cd templatus-vue

  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. Set up puma-dev to use HTTPS for development. Do this on macOS: 
    sudo puma-dev -setup
    puma-dev -install
    puma-dev link

Use Vite via puma-dev proxy Adopted from https://github.com/puma/puma-dev#webpack-dev-server

echo 3036 > ~/.puma-dev/vite.templatus-vue`
  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-vue.test in your browser.

Running linters

RuboCop:

bin/rubocop

ESLint:

bin/yarn lint

TypeScript compiler:

bin/yarn tsc

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

And that completes our installation. We can now get started with creating our awesome Vue.js app with Ruby on Rails Backend. All the technologies and dependencies from development to deployment have been made available to us. Awesome