Add vite_rails (#412)

- [x] Add vite_rails config - [x] vite_rails is managing fontawesome package
JuanVqz · Aug 24, 2023 · 011f686 · 011f686
1 parent 9689b5f
commit 011f686
Show file tree

Hide file tree

Showing 15 changed files with 1,033 additions and 30 deletions.
diff --git a/.github/workflows/current-rails-app.yml b/.github/workflows/current-rails-app.yml
@@ -14,35 +14,44 @@ jobs:
     services:
       db:
         image: postgres:10.13
-        ports: ["5432:5432"]
+        ports:
+          - 5432:5432
         env:
           POSTGRES_USER: postgres
           POSTGRES_PASSWORD: password
-        options: >-
-          --health-cmd pg_isready
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
+          POSTGRES_DB: doctors_test
+    env:
+      RAILS_ENV: test
+      DATABASE_URL: postgres://postgres:password@localhost:5432/doctors_test
+      TZ: America/Mexico_City
+
     steps:
-      - uses: actions/checkout@v2
-      - name: Set up Ruby
+      - name: Checkout 🏗
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js 🏗
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+
+      - name: Install Node.js ⌨
+        run: npm install
+
+      - name: Install Ruby ♦
         uses: ruby/setup-ruby@v1
         with:
           bundler-cache: true
-      - name: Install dependencies
-        run: bundle install
-      - name: Run linter
+
+      - name: Run linter 👟
         run: bundle exec standardrb
-      - name: Run test suite
-        env:
-          RAILS_ENV: test
-          DATABASE_URL: postgres://postgres:password@localhost:5432/doctors_test
-          TZ: America/Mexico_City
-        run: |
-          bin/rails db:create
-          bin/rails db:schema:load
-          bin/rake
-      - name: Publish code coverage
+
+      - name: Setup database 🏗
+        run: bin/rails db:schema:load
+
+      - name: Run test suite 👟
+        run: bin/rake
+
+      - name: Publish code coverage 🚀
         uses: paambaati/[email protected]
         env:
           CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}

diff --git a/.gitignore b/.gitignore
@@ -29,3 +29,11 @@
 spec/examples.txt
 coverage
 /vendor/*
+
+# Vite Ruby
+/public/vite*
+node_modules
+# Vite uses dotenv and suggests to ignore local-only env files. See
+# https://vitejs.dev/guide/env-and-mode.html#env-files
+*.local
+
diff --git a/Gemfile b/Gemfile
@@ -1,7 +1,7 @@
 source "https://rubygems.org"
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
-ruby IO.readlines(".ruby-version")[0].strip
+ruby "3.0.3"
 
 gem "bootsnap", require: false
 gem "bulma-extensions-rails"
@@ -20,6 +20,7 @@ gem "simple_form"
 gem "sprockets-rails"
 gem "trix-rails", require: "trix"
 gem "turbolinks"
+gem "vite_rails"
 gem "wicked_pdf"
 gem "wkhtmltopdf-binary", "0.12.6.6"
 

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -101,6 +101,7 @@ GEM
       warden (~> 1.2.3)
     diff-lcs (1.5.0)
     docile (1.4.0)
+    dry-cli (1.0.0)
     erubi (1.12.0)
     factory_bot (6.2.1)
       activesupport (>= 5.0.0)
@@ -195,6 +196,8 @@ GEM
       activesupport (>= 3.0.0)
     racc (1.7.1)
     rack (2.2.8)
+    rack-proxy (0.7.6)
+      rack
     rack-test (2.1.0)
       rack (>= 1.3)
     rails (7.0.7.2)
@@ -326,6 +329,13 @@ GEM
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.4.2)
+    vite_rails (3.0.15)
+      railties (>= 5.1, < 8)
+      vite_ruby (~> 3.0, >= 3.2.2)
+    vite_ruby (3.3.4)
+      dry-cli (>= 0.7, < 2)
+      rack-proxy (~> 0.6, >= 0.6.1)
+      zeitwerk (~> 2.2)
     warden (1.2.9)
       rack (>= 2.0.9)
     websocket (1.2.9)
@@ -374,6 +384,7 @@ DEPENDENCIES
   trix-rails
   turbolinks
   tzinfo-data
+  vite_rails
   wicked_pdf
   wkhtmltopdf-binary (= 0.12.6.6)
 

diff --git a/Procfile.dev b/Procfile.dev
@@ -1 +1,2 @@
 web: bundle exec rails server -b 0.0.0.0 -p 3000
+vite: bin/vite dev
diff --git a/app/frontend/entrypoints/application.js b/app/frontend/entrypoints/application.js
@@ -0,0 +1,29 @@
+// To see this message, add the following to the `<head>` section in your
+// views/layouts/application.html.erb
+//
+//    <%= vite_client_tag %>
+//    <%= vite_javascript_tag 'application' %>
+console.log('Vite ⚡️ Rails')
+
+// If using a TypeScript entrypoint file:
+//     <%= vite_typescript_tag 'application' %>
+//
+// If you want to use .jsx or .tsx, add the extension:
+//     <%= vite_javascript_tag 'application.jsx' %>
+
+console.log('Visit the guide for more information: ', 'https://vite-ruby.netlify.app/guide/rails')
+
+// Example: Load Rails libraries in Vite.
+//
+// import * as Turbo from '@hotwired/turbo'
+// Turbo.start()
+//
+// import ActiveStorage from '@rails/activestorage'
+// ActiveStorage.start()
+//
+// // Import all channels.
+// const channels = import.meta.globEager('./**/*_channel.js')
+
+// Example: Import a stylesheet in app/frontend/index.css
+// import '~/index.css'
+import '@fortawesome/fontawesome-free/css/all.min.css'
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
@@ -9,7 +9,9 @@
     = csp_meta_tag
     = favicon_link_tag asset_path('favicon.png')
 
-    %link{href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css", rel: "stylesheet"}/
+    = vite_client_tag
+    = vite_javascript_tag 'application'
+
     = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
     = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
   %body

diff --git a/bin/bundle b/bin/bundle
@@ -1,3 +1,114 @@
 #!/usr/bin/env ruby
-ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../Gemfile", __dir__)
-load Gem.bin_path("bundler", "bundle")
+# frozen_string_literal: true
+
+#
+# This file was generated by Bundler.
+#
+# The application 'bundle' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+require "rubygems"
+
+m = Module.new do
+  module_function
+
+  def invoked_as_script?
+    File.expand_path($0) == File.expand_path(__FILE__)
+  end
+
+  def env_var_version
+    ENV["BUNDLER_VERSION"]
+  end
+
+  def cli_arg_version
+    return unless invoked_as_script? # don't want to hijack other binstubs
+    return unless "update".start_with?(ARGV.first || " ") # must be running `bundle update`
+    bundler_version = nil
+    update_index = nil
+    ARGV.each_with_index do |a, i|
+      if update_index && update_index.succ == i && a =~ Gem::Version::ANCHORED_VERSION_PATTERN
+        bundler_version = a
+      end
+      next unless a =~ /\A--bundler(?:[= ](#{Gem::Version::VERSION_PATTERN}))?\z/
+      bundler_version = $1
+      update_index = i
+    end
+    bundler_version
+  end
+
+  def gemfile
+    gemfile = ENV["BUNDLE_GEMFILE"]
+    return gemfile if gemfile && !gemfile.empty?
+
+    File.expand_path("../Gemfile", __dir__)
+  end
+
+  def lockfile
+    lockfile =
+      case File.basename(gemfile)
+      when "gems.rb" then gemfile.sub(/\.rb$/, gemfile)
+      else "#{gemfile}.lock"
+      end
+    File.expand_path(lockfile)
+  end
+
+  def lockfile_version
+    return unless File.file?(lockfile)
+    lockfile_contents = File.read(lockfile)
+    return unless lockfile_contents =~ /\n\nBUNDLED WITH\n\s{2,}(#{Gem::Version::VERSION_PATTERN})\n/
+    Regexp.last_match(1)
+  end
+
+  def bundler_requirement
+    @bundler_requirement ||=
+      env_var_version || cli_arg_version ||
+        bundler_requirement_for(lockfile_version)
+  end
+
+  def bundler_requirement_for(version)
+    return "#{Gem::Requirement.default}.a" unless version
+
+    bundler_gem_version = Gem::Version.new(version)
+
+    requirement = bundler_gem_version.approximate_recommendation
+
+    return requirement unless Gem.rubygems_version < Gem::Version.new("2.7.0")
+
+    requirement += ".a" if bundler_gem_version.prerelease?
+
+    requirement
+  end
+
+  def load_bundler!
+    ENV["BUNDLE_GEMFILE"] ||= gemfile
+
+    activate_bundler
+  end
+
+  def activate_bundler
+    gem_error = activation_error_handling do
+      gem "bundler", bundler_requirement
+    end
+    return if gem_error.nil?
+    require_error = activation_error_handling do
+      require "bundler/version"
+    end
+    return if require_error.nil? && Gem::Requirement.new(bundler_requirement).satisfied_by?(Gem::Version.new(Bundler::VERSION))
+    warn "Activating bundler (#{bundler_requirement}) failed:\n#{gem_error.message}\n\nTo install the version of bundler this project requires, run `gem install bundler -v '#{bundler_requirement}'`"
+    exit 42
+  end
+
+  def activation_error_handling
+    yield
+    nil
+  rescue StandardError, LoadError => e
+    e
+  end
+end
+
+m.load_bundler!
+
+if m.invoked_as_script?
+  load Gem.bin_path("bundler", "bundle")
+end
diff --git a/bin/vite b/bin/vite
@@ -0,0 +1,27 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+#
+# This file was generated by Bundler.
+#
+# The application 'vite' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../Gemfile", __dir__)
+
+bundle_binstub = File.expand_path("bundle", __dir__)
+
+if File.file?(bundle_binstub)
+  if File.read(bundle_binstub, 300) =~ /This file was generated by Bundler/
+    load(bundle_binstub)
+  else
+    abort("Your `bin/bundle` was not generated by Bundler, so this binstub cannot run.
+Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.")
+  end
+end
+
+require "rubygems"
+require "bundler/setup"
+
+load Gem.bin_path("vite_ruby", "vite")
diff --git a/config/initializers/content_security_policy.rb b/config/initializers/content_security_policy.rb
@@ -11,7 +11,16 @@
 #     policy.img_src     :self, :https, :data
 #     policy.object_src  :none
 #     policy.script_src  :self, :https
+#     Allow @vite/client to hot reload javascript changes in development
+#     policy.script_src *policy.script_src, :unsafe_eval, "http://#{ ViteRuby.config.host_with_port }" if Rails.env.development?
+
+#     You may need to enable this in production as well depending on your setup.
+#     policy.script_src *policy.script_src, :blob if Rails.env.test?
+
 #     policy.style_src   :self, :https
+#     Allow @vite/client to hot reload style changes in development
+#     policy.style_src *policy.style_src, :unsafe_inline if Rails.env.development?
+
 #     # Specify URI for violation reports
 #     # policy.report_uri "/csp-violation-report-endpoint"
 #   end

diff --git a/config/vite.json b/config/vite.json
@@ -0,0 +1,16 @@
+{
+  "all": {
+    "sourceCodeDir": "app/frontend",
+    "watchAdditionalPaths": []
+  },
+  "development": {
+    "autoBuild": true,
+    "publicOutputDir": "vite-dev",
+    "port": 3036
+  },
+  "test": {
+    "autoBuild": true,
+    "publicOutputDir": "vite-test",
+    "port": 3037
+  }
+}