Working on two options, They need to be tested

Author: IsraelDCastro

.eslintrc-react.json

@@ -0,0 +1,25 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:tailwindcss/recommended"
+  ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 13,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/react-in-jsx-scope": "on"
+  }
+}

.eslintrc-vue.json

@@ -0,0 +1,21 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "plugin:vue/essential",
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "plugin:tailwindcss/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "vue"
+  ],
+  "rules": {
+  }
+}

app-react/assets/config/manifest.js

@@ -0,0 +1,2 @@
+//= link_tree ../images
+//= link_directory ../stylesheets .css

app/assets/images/.keep renamed to app-react/assets/images/.keep

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
+ * vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

app-react/assets/stylesheets/application.css

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function Home() {
+  return (
+    <>
+      <h3>This is the homepage component</h3>
+      <h6>You can find me in: <span className="px-2 py-1 bg-slate-100">frontend/components/views/home.jsx</span></h6>
+    </>
+  )
+}

app/channels/application_cable/channel.rb renamed to app-react/channels/application_cable/channel.rb

@@ -0,0 +1,9 @@
+import "./main.scss";
+
+import React, {createElement} from 'react';
+import { createRoot } from 'react-dom/client';
+import App from '@/components/views/home';
+
+const domContainer = document.querySelector('#home');
+const root = createRoot(domContainer);
+root.render(createElement(App));

app/channels/application_cable/connection.rb renamed to app-react/channels/application_cable/connection.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+# Public: Allows to render HTML tags for scripts and styles processed by Vite.
+module ViteRails::TagHelpers
+  # Public: Renders a script tag for vite/client to enable HMR in development.
+  def vite_client_tag
+    return unless src = vite_manifest.vite_client_src
+
+    tag.script(src: src, type: 'module')
+  end
+
+  # Public: Renders a script tag to enable HMR with React Refresh.
+  def vite_react_refresh_tag
+    vite_manifest.react_refresh_preamble&.html_safe
+  end
+
+  # Public: Resolves the path for the specified Vite asset.
+  #
+  # Example:
+  #   <%= vite_asset_path 'calendar.css' %> # => "/vite/assets/calendar-1016838bab065ae1e122.css"
+  def vite_asset_path(name, **options)
+    path_to_asset vite_manifest.path_for(name, **options)
+  end
+
+  # Public: Renders a <script> tag for the specified Vite entrypoints.
+  def vite_javascript_tag(*names,
+                          type: 'module',
+                          asset_type: :javascript,
+                          skip_preload_tags: false,
+                          skip_style_tags: false,
+                          crossorigin: 'anonymous',
+                          media: 'screen',
+                          **options)
+    entries = vite_manifest.resolve_entries(*names, type: asset_type)
+    tags = javascript_include_tag(*entries.fetch(:scripts), crossorigin: crossorigin, type: type, extname: false, **options)
+    tags << vite_preload_tag(*entries.fetch(:imports), crossorigin: crossorigin, **options) unless skip_preload_tags
+    tags << stylesheet_link_tag(*entries.fetch(:stylesheets), media: media, **options) unless skip_style_tags
+    tags
+  end
+
+  # Public: Renders a <script> tag for the specified Vite entrypoints.
+  def vite_typescript_tag(*names, **options)
+    vite_javascript_tag(*names, asset_type: :typescript, **options)
+  end
+
+  # Public: Renders a <link> tag for the specified Vite entrypoints.
+  def vite_stylesheet_tag(*names, **options)
+    style_paths = names.map { |name| vite_asset_path(name, type: :stylesheet) }
+    stylesheet_link_tag(*style_paths, **options)
+  end
+
+  # Public: Renders an <img> tag for the specified Vite asset.
+  def vite_image_tag(name, **options)
+    if options[:srcset] && !options[:srcset].is_a?(String)
+      options[:srcset] = options[:srcset].map do |src_name, size|
+        "#{ vite_asset_path(src_name) } #{ size }"
+      end.join(', ')
+    end
+
+    image_tag(vite_asset_path(name), options)
+  end
+
+  private
+
+  # Internal: Returns the current manifest loaded by Vite Ruby.
+  def vite_manifest
+    ViteRuby.instance.manifest
+  end
+
+  # Internal: Renders a modulepreload link tag.
+  def vite_preload_tag(*sources, crossorigin:, **options)
+    sources.map { |source|
+      href = path_to_asset(source)
+      try(:request).try(:send_early_hints, 'Link' => %(<#{ href }>; rel=modulepreload; as=script; crossorigin=#{ crossorigin }))
+      tag.link(rel: 'modulepreload', href: href, as: 'script', crossorigin: crossorigin, **options)
+    }.join("\n").html_safe
+  end
+end

app/controllers/application_controller.rb renamed to app-react/controllers/application_controller.rb

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>RailsReactVite</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <%= stylesheet_link_tag "application" %>
+    <%= vite_client_tag %>
+    <%= vite_javascript_tag 'application' %>
+    <%= vite_react_refresh_tag %>
+  </head>
+
+  <body>
+    <main class="container mx-auto mt-28 px-5 flex flex-col">
+      <%= yield %>
+    </main>
+  </body>
+</html>

app/controllers/concerns/.keep renamed to app-react/controllers/concerns/.keep

@@ -0,0 +1,4 @@
+<h1>Pages#home</h1>
+<p>Find me in app/views/pages/home.html.erb</p>
+<hr class="my-8">
+<div id="home"></div>

app/controllers/pages_controller.rb renamed to app-react/controllers/pages_controller.rb

@@ -0,0 +1,4 @@
+module ApplicationCable
+  class Channel < ActionCable::Channel::Base
+  end
+end

app-react/frontend/components/views/home.jsx

@@ -0,0 +1,4 @@
+module ApplicationCable
+  class Connection < ActionCable::Connection::Base
+  end
+end

app-react/frontend/entrypoints/application.js

@@ -0,0 +1,2 @@
+class ApplicationController < ActionController::Base
+end

app/frontend/entrypoints/main.scss renamed to app-react/frontend/entrypoints/main.scss

@@ -0,0 +1,4 @@
+class PagesController < ApplicationController
+  def home
+  end
+end

app/frontend/entrypoints/stylesheets/_global.scss renamed to app-react/frontend/entrypoints/stylesheets/_global.scss

@@ -0,0 +1,6 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+
+@import "./stylesheets/global";
+
+@import "tailwindcss/utilities";

app/helpers/application_helper.rb renamed to app-react/helpers/application_helper.rb

@@ -0,0 +1,87 @@
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  @apply text-base text-slate-800 leading-5 bg-gray-50;
+}
+
+h1 {
+  font-size: 2.75em;
+}
+
+h2 {
+  font-size: 2.25em;
+}
+
+h3 {
+  font-size: 2em;
+}
+
+h4 {
+  font-size: 1.625em;
+}
+
+h5 {
+  font-size: 1.25em;
+}
+
+h6 {
+  font-size: 1.125em;
+}
+
+p {
+  font-size: 1em;
+  margin-bottom: 10px;
+}
+
+h1, h2, h3, h4, h5, h6, button, a, label{
+  @apply font-sans;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  @apply leading-tight;
+}
+
+h1, h2, h3 {
+  @apply font-bold;
+}
+
+@media screen and (max-width: 767px){
+  h1 {
+    font-size: 2em;
+  }
+
+  h2 {
+    font-size: 1.875em;
+  }
+
+  h3 {
+    font-size: 1.75em;
+  }
+
+  h4 {
+    font-size: 1.5em;
+  }
+
+  h5 {
+    font-size: 1.375em;
+  }
+}
+
+img, svg {
+  @apply w-full h-auto;
+}
+
+.main {
+  @apply flex flex-col h-screen;
+}
+
+.wrapper {
+  @apply flex-1 relative;
+}
+
+.container {
+  width: 95%;
+  @apply mx-auto py-10;
+}

app/helpers/pages_helper.rb renamed to app-react/helpers/pages_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

app-react/helpers/tag_helpers.rb

@@ -0,0 +1,2 @@
+module PagesHelper
+end

app/jobs/application_job.rb renamed to app-react/jobs/application_job.rb

@@ -0,0 +1,7 @@
+class ApplicationJob < ActiveJob::Base
+  # Automatically retry jobs that encountered a deadlock
+  # retry_on ActiveRecord::Deadlocked
+
+  # Most jobs are safe to ignore if the underlying records are no longer available
+  # discard_on ActiveJob::DeserializationError
+end

app/mailers/application_mailer.rb renamed to app-react/mailers/application_mailer.rb

@@ -0,0 +1,4 @@
+class ApplicationMailer < ActionMailer::Base
+  default from: "[email protected]"
+  layout "mailer"
+end

app/models/application_record.rb renamed to app-react/models/application_record.rb

@@ -0,0 +1,3 @@
+class ApplicationRecord < ActiveRecord::Base
+  primary_abstract_class
+end

app/models/concerns/.keep renamed to app-react/models/concerns/.keep

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <style>
+      /* Email styles need to be inline */
+    </style>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>

app-react/views/layouts/application.html.erb

@@ -0,0 +1 @@
+<%= yield %>

app/views/layouts/mailer.html.erb renamed to app-react/views/layouts/mailer.html.erb

@@ -9,11 +9,11 @@
     "sourceMap": true,
     "strict": true,
     "paths": {
-      "@/*": ["./app/*"],
-      "~/*": ["./app/frontend/*"]
+      "@/*": ["app/*"],
+      "@/component*": ["app/frontend/components/*"]
     }
   },
-  "include": ["app/**/*"],
+  "include": ["app/**/*", "app/frontend/components/*"],
   "exclude": [
     "**/dist",
     "**/node_modules",