Skip to content

This is a base boilerplate template for Ruby on Rails and React configuration

License

Notifications You must be signed in to change notification settings

akhilgkrishnan/Rails-React-Boilerplate

Repository files navigation

ReactifyRails

ReactifyRails is a powerful boilerplate that combines the best of Rails, React, and Tailwind CSS, providing a solid foundation for building modern web applications with ease. Whether you are starting a new project from scratch or want to enhance your existing Rails application with React and Tailwind, ReactifyRails has got you covered.

Features

  • Rails and React Integration: ReactifyRails seamlessly integrates Rails with React, allowing you to create interactive user interfaces and single-page applications within a familiar Rails environment.

  • Tailwind CSS: With Tailwind CSS, you can easily customize and style your application's UI components, making it effortless to achieve a polished and consistent design.

  • TypeScript: Enable static typing in your JavaScript codebase with TypeScript, adding type safety and improved development experience.

  • Webpack and Babel: Webpack and Babel are preconfigured in MyAwesomeApp, enabling you to bundle and transpile your JavaScript and React code efficiently.

  • Asset Pipeline Compatibility: This boilerplate ensures compatibility with the Rails asset pipeline, making it convenient to leverage existing Rails assets while adopting modern front-end technologies.

  • Hot Reloading: Enjoy the benefits of hot reloading during development, allowing you to see changes in real-time without manually refreshing the page.

  • React Router: React Router is a collection of navigational components that compose declaratively with your application.

Linting and Formatting

  • ESLint: ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.

  • Prettier: Prettier is an opinionated code formatter that enforces a consistent code style across your entire codebase.

  • RuboCop: RuboCop is a Ruby static code analyzer that enforces the Ruby Style Guide.

  • Husky: Husky is a tool that allows you to easily add Git hooks to your project.

Requirements

  • Ruby (version 3.2.2)
  • Ruby on Rails (version 7.0.6)
  • Node (version 18.17.0)
  • Yarn (version 1.22.17)

Replace ReactifyRails with your project name

perl -pi -w -e 's/ReactifyRails/<Replace with your project name>/g;' $(git ls-files)

Folder Structure

reactify-rails/
├── app/
│   ├── assets/
│   │   ├── stylesheets/
│   │   └── ...
│   ├── controllers/
│   ├── javascript/
│   │   ├── packs/
│   │   ├── stylesheet/
│   │   ├── src/
│   │   │   ├── components/
│   ├── models/
│   ├── views/
│   └── ...
├── config/
│   ├── webpack/
│   ├── initializers/
│   ├── ...
│   └── ...
├── db/
├── public/
├── ...
└── ...

Contributing

We welcome contributions to ReactifyRails! If you encounter any issues or have ideas for improvements, please open an issue or submit a pull request.

License

ReactifyRails is released under the MIT License.

Acknowledgments

Thank you to the creators and maintainers of Rails, React, and Tailwind CSS for providing such fantastic tools to build upon.