https://github.com/israeldcastro/rails-api-template
Create a Rails API app using VueJS/ReactJS as front, it is good to start a project. You can choose between Tailwind CSS + PrimeVue or Tailwind CSS + NextUI.
https://github.com/israeldcastro/rails-api-template
nextui primevue rails rails-api react reactjs ruby starter-template tailwindcss template vite vitejs vue vuejs
Last synced: 4 months ago
JSON representation
Create a Rails API app using VueJS/ReactJS as front, it is good to start a project. You can choose between Tailwind CSS + PrimeVue or Tailwind CSS + NextUI.
- Host: GitHub
- URL: https://github.com/israeldcastro/rails-api-template
- Owner: IsraelDCastro
- Created: 2024-05-13T19:16:26.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-11-15T19:52:08.000Z (over 1 year ago)
- Last Synced: 2025-08-22T23:12:50.012Z (9 months ago)
- Topics: nextui, primevue, rails, rails-api, react, reactjs, ruby, starter-template, tailwindcss, template, vite, vitejs, vue, vuejs
- Language: JavaScript
- Homepage:
- Size: 324 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Rails API Template VueJS/ReactJS
This is a rails template with VueJS or ReactJS. The frontend starters ship with Tailwind CSS plus the matching Simplekit Vue or Simplekit React component suites.
This is the best option to start a project with Rails 7 API + VueJS/ReactJS. You can make a fast project and start working on it without any problem. Now you can choose between Tailwind CSS + Simplekit Vue (For VueJS) or Tailwind CSS + Simplekit React (For ReactJS), both configured with TypeScript out of the box.
This template starts with Active Storage by default when you create it. If you don't want, just remove it.
### JS Frameworks
- `VueJS 3` to start a project with VueJS just add the flag `--vue` to command line.
- `ReactJS 19` to start a project with ReactJS 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)
## Installation
Make sure you have `vips` in your brew list, or run `brew install vips`
## Rails 7 + VueJS 3 + ViteJS + Tailwind CSS + Simplekit Vue
##### From GitHub with vue
```bash
rails new my_app --api -d -m https://raw.githubusercontent.com/IsraelDCastro/rails-api-template/master/template.rb --vue
```
##### Making a git clone of the project with vue
```bash
rails new my_app --api -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 `./template-api/template.rb`.
## Rails 7 + ReactJS 19 + ViteJS + Tailwind CSS + Simplekit React
##### From GitHub with react
```bash
rails new my_app --api -d -m https://raw.githubusercontent.com/IsraelDCastro/rails-api-template/master/template.rb --react
```
##### Making a git clone of the project with react
```bash
rails new my_app --api -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 `./template-api/template.rb`.
### Default Vue/React dependencies
> - simplekit-vue (Only with flag `--vue`)
> - vue (Only with flag `--vue`)
> - vue-router (Only with flag `--vue`)
> ---
> - react (Only with flag `--react`)
> - react-dom (Only with flag `--react`)
> - simplekit-react (Only with flag `--react`)
---
### Default VueJS dev dependencies
> - typescript
> - vue-tsc
> - @vitejs/plugin-vue
> - autoprefixer
> - eslint
> - eslint-config-prettier
> - eslint-plugin-prettier
> - eslint-plugin-vue
> - path
> - postcss
> - prettier
> - tailwindcss
> - vite
### Default ReactJS dev dependencies
> - typescript
> - @types/react
> - @types/react-dom
> - eslint
> - eslint-plugin-tailwindcss (Only the template with Tailwind CSS has this package).
> - path
> - prettier
> - eslint-plugin-prettier
> - eslint-config-prettier
> - vite
> - autoprefixer
> - postcss
> - tailwindcss
> - @vitejs/plugin-react-refresh (Only with flag `--react`)
> - eslint-plugin-react (Only with flag `--react`)
### Default gems
> - gem "image_processing", "~> 1.2"
> - gem 'ruby-vips', '~> 2.1', '>= 2.1.4'
> - gem "rack-cors"
> - gem 'jwt'
> - gem 'bcrypt', '~> 3.1.18'
> - gem "annotate", group: :development
> - gem 'solargraph', group: :development
## QA / Automatización
Los módulos incluyen scripts listos para validar el estado del proyecto:
| Proyecto | Lint / formato | Tipos / pruebas rápidas |
|------------------------|-------------------------------------------|------------------------------------|
| `modules/react-front` | `bun run lint` | `bun run typecheck` |
| `modules/vue-front` | `bun run lint` | `bun run typecheck` |
| Rails API | `bin/rails test` (o `rspec`) | `bin/rails test` / `bundle exec rspec` |
> Recomendado: crear un workflow de GitHub Actions que ejecute los comandos anteriores en cada push/PR (ver `docs/boilerplate-foundations.md`).
### Analítica y SEO
- Ambos frontends exponen un helper de SEO (React `Seo`, Vue `useSeo`) que actualiza títulos, descripciones, enlaces canónicos y JSON-LD.
- Para habilitar el script de Plausible, define la variable `VITE_PLAUSIBLE_DOMAIN` en cada módulo (por ejemplo, `example.com`). El script se ignora si la variable no existe.
### Thank you ⭐️
If you have any questions, just make an issue, I'll answer you as soon as possible.