https://github.com/israeldcastro/rails-vite-tailwindcss-template
Create a Ruby on Rails App using VueJS/ReactJS or Clean project with ViteJS, it is good to start a project. You can choose between Tailwind CSS, Bootstrap, or Bulma.
https://github.com/israeldcastro/rails-vite-tailwindcss-template
bootstrap bootstrap5 bulma react reactjs ror ruby ruby-on-rails scss starter-template tailwind tailwindcss template vite vitejs vue vue3 vuejs
Last synced: 4 months ago
JSON representation
Create a Ruby on Rails App using VueJS/ReactJS or Clean project with ViteJS, it is good to start a project. You can choose between Tailwind CSS, Bootstrap, or Bulma.
- Host: GitHub
- URL: https://github.com/israeldcastro/rails-vite-tailwindcss-template
- Owner: IsraelDCastro
- Created: 2022-03-06T19:34:10.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-07T19:11:03.000Z (about 2 years ago)
- Last Synced: 2025-04-11T01:12:53.180Z (about 1 year ago)
- Topics: bootstrap, bootstrap5, bulma, react, reactjs, ror, ruby, ruby-on-rails, scss, starter-template, tailwind, tailwindcss, template, vite, vitejs, vue, vue3, vuejs
- Language: HTML
- Homepage:
- Size: 149 KB
- Stars: 98
- Watchers: 2
- Forks: 13
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
This is a rails template with VueJS and ViteJS as roll up. Also you can choose between CSS Frameworks as: Tailwind CSS, Bootstrap, or Bulma.
This is the best option to start a project with Ruby on Rails 7 or 8 + Vite. You can make a fast project and start working on it without any problem. Now you can choose between Tailwind CSS, Bootstrap or Bulma.
Now you have the option to start the project with React JS (19), with the preference of choosing different CSS Frameworks.
This template starts with Active Storage by default when you create it. If you don't want, just remove it.
### JS Frameworks
- To start a project without Vue or React just add the flag `--normal` to command line.
- `VueJS 3` to start a project with Vue just add the flag `--vue` to command line.
- `ReactJS 19` to start a project with React just add the flag `--react` to command line.
### CSS Frameworks
- `template.rb` has Tailwind CSS as default Framework CSS. [Start](https://github.com/IsraelDCastro/rails-vite-tailwindcss-template#rails-tailwind-css-template)
- `template_bootstrap.rb` has Bootstrap 5 as default Framework CSS. [Start](https://github.com/IsraelDCastro/rails-vite-tailwindcss-template/blob/master/README_BOOTSTRAP.md#rails-bootstrap-template)
- `template_bulma.rb` has Bulma as default Framework CSS. [Start](https://github.com/IsraelDCastro/rails-vite-tailwindcss-template/blob/master/README_BULMA.md#rails-bulma-template)
# Rails Tailwind CSS Template
## Installation
Make sure you have `vips` in your brew list, or run `brew install vips`.
When you generate the application:
- **Rails 7**: use `--skip-webpack-install --skip-javascript` to avoid conflicts with ViteJS⚡️.
- **Rails 8**: only `--skip-javascript` is needed because webpack/esbuild is no longer part of the default stack.
## Ruby on Rails 7/8 + ViteJS + Tailwind CSS
##### From GitHub without Vue or React
```bash
# Rails 7
rails new my_app --skip-webpack-install --skip-javascript -d -m https://raw.githubusercontent.com/IsraelDCastro/rails-vite-tailwindcss-template/master/template.rb --normal
# Rails 8
rails new my_app --skip-javascript -d -m https://raw.githubusercontent.com/IsraelDCastro/rails-vite-tailwindcss-template/master/template.rb --normal
```
##### Making a git clone of the project without Vue or React
```bash
# Rails 7
rails new my_app --skip-webpack-install --skip-javascript -d -m template.rb --normal
# Rails 8
rails new my_app --skip-javascript -d -m template.rb --normal
```
When you clone the repo just be sure to be inside the project when you run the command, from outside be sure to put the correct file direction.
## Ruby on Rails 7/8 + Vue 3 + ViteJS + Tailwind CSS
##### From GitHub with vue
```bash
# Rails 7
rails new my_app --skip-webpack-install --skip-javascript -d -m https://raw.githubusercontent.com/IsraelDCastro/rails-vite-tailwindcss-template/master/template.rb --vue
# Rails 8
rails new my_app --skip-javascript -d -m https://raw.githubusercontent.com/IsraelDCastro/rails-vite-tailwindcss-template/master/template.rb --vue
```
##### Making a git clone of the project with vue
```bash
# Rails 7
rails new my_app --skip-webpack-install --skip-javascript -d -m template.rb --vue
# Rails 8
rails new my_app --skip-javascript -d -m template.rb --vue
```
When you clone the repo just be sure to be inside the project when you run the command, from outside be sure to put the correct file direction.
## Ruby on Rails 7/8 + ReactJS 19 + ViteJS + Tailwind CSS
##### From GitHub with react
```bash
# Rails 7
rails new my_app --skip-webpack-install --skip-javascript -d -m https://raw.githubusercontent.com/IsraelDCastro/rails-vite-tailwindcss-template/master/template.rb --react
# Rails 8
rails new my_app --skip-javascript -d -m https://raw.githubusercontent.com/IsraelDCastro/rails-vite-tailwindcss-template/master/template.rb --react
```
##### Making a git clone of the project with react
```bash
# Rails 7
rails new my_app --skip-webpack-install --skip-javascript -d -m template.rb --react
# Rails 8
rails new my_app --skip-javascript -d -m template.rb --react
```
When you clone the repo just be sure to be inside the project when you run the command, from outside be sure to put the correct file direction.
## Add Hotwired + Stimulus
To use and add Hotwired + Stimulus to the project you have to add the flag `--hotwired` when you run the command to create the project. When you add the flag `--hotwired`, a `generators` folder will be copied into `lib` folder, so when you run `rails g stimulus controllerName`, when the file is created, it will appear in the `frontend/controllers` folder.
And that is all, now you will have `Hotwired + Stimulus` installed in your project.
### Package manager
By default, templates use `bun` as the package manager. You can override with the flag `--package-manager=yarn|npm|pnpm|bun`.
Examples with Bun:
> - Install: `bun install`
> - Add dev deps: `bun add -d eslint prettier`
> - Run executables: `bunx `
### Default dependencies
> - autoprefixer
> - postcss
> - tailwindcss
> - vite
> - vue (Only with flag `--vue`)
> - react (Only with flag `--react`)
> - react-dom (Only with flag `--react`)
> - @hotwired/stimulus (Only with flag `--hotwired`)
> - @hotwired/turbo-rails (Only with flag `--hotwired`)
---
### Default dev dependencies
> - @vitejs/plugin-vue (Only with flag `--vue`)
> - @vue/compiler-sfc (Only with flag `--vue`)
> - eslint
> - eslint-plugin-tailwindcss (Only the template with Tailwind CSS has this package).
> - eslint-plugin-vue (Only with flag `--vue`)
> - path
> - prettier
> - eslint-plugin-prettier
> - eslint-config-prettier
> - vite-plugin-full-reload
> - vite-plugin-ruby
> - @vitejs/plugin-react (Only with flag `--react`)
> - eslint-plugin-react (Only with flag `--react`)
### Default gems
> - gem "vite_rails"
> - gem "ruby-vips", ">= 2.1.4"
> - gem "annotate", group: :development
> - gem 'devise'
> - gem 'name_of_person'
> - gem "stimulus-rails" (Only with flag `--hotwired`)
### Thank you ⭐️
If you have any questions, just make an issue, I'll answer you as soon as possible.
### Minimum recommended versions
- Ruby >= 3.1
- Node.js >= 18 (recommended 20+)
- Bun >= 1.0 if you choose `--package-manager=bun`
- ### Optional flags
- `--skip-devise`: does not install Devise or generate the `User` model. Skips permitted parameters injection and `name_of_person`.
- `--skip-active-storage`: does not install Active Storage or set `variant_processor = :vips`. Skips the `ruby-vips` dependency.
- `--package-manager=bun|yarn|npm|pnpm`: selects the package manager (default `bun`).
### Troubleshooting
- VIPS not installed: `brew install vips` (macOS) or `apt-get install libvips` (Ubuntu).
- Ports in use: Vite uses 3036/5173 depending on config; Rails 3000. Change ports or stop processes using those ports.
- CSP in production: if you use a strict CSP, allow origins for assets served by Vite and adjust `config/environments/production.rb`.
### CSP and Vite (production and development)
Rails includes a default CSP policy. If you enable a strict CSP, make sure to allow loading assets generated by Vite:
`config/initializers/content_security_policy.rb` (example):
```ruby
Rails.application.config.content_security_policy do |policy|
policy.default_src :self
policy.font_src :self, :data, :https
policy.img_src :self, :data, :https
policy.object_src :none
policy.script_src :self, :https
policy.style_src :self, :https, :unsafe_inline
# In production, serve assets from the public path (Vite build)
# and allow hotlinking to CDNs if you use them.
end
# Allow 'unsafe-eval' in dev if needed for Vite HMR
if Rails.env.development?
Rails.application.config.content_security_policy do |policy|
policy.script_src :self, :https, :unsafe_eval
# If Vite runs on localhost:5173
policy.connect_src :self, "http://localhost:5173", "ws://localhost:5173"
end
end
```
In production, you don't need HMR ports; just ensure precompiled assets are allowed by CSP.