Merge pull request #617 from ualbertalib/webpacker-removal

Remove webpacker and cleanup unusued CSS/JS

.github/workflows/ci.yml

@@ -48,7 +48,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Get yarn cache
         id: yarn-cache

.gitignore

@@ -40,9 +40,7 @@
 # Ignore for Build
 /vendor/bundle
 
-# Webpacker stuff
-/public/packs
-/public/packs-test
+# Javascript/CSS stuff
 /node_modules
 /yarn-error.log
 yarn-debug.log*

.tool-versions

@@ -1,3 +1,3 @@
 ruby 3.1.4
-nodejs 16.15.1
+nodejs 18.15.0
 yarn 1.22.19

Gemfile

@@ -14,10 +14,14 @@ gem "puma", "~> 6.4"
 # Use Uglifier as compressor for JavaScript assets
 gem "uglifier", ">= 1.3.0"
 
-gem "rollbar"
+# Assets
+gem "cssbundling-rails"
+gem "jsbundling-rails"
+gem "sprockets-rails"
+gem "turbo-rails"
+gem "stimulus-rails"
 
-# See https://github.com/rails/execjs#readme for more supported runtimes
-gem "execjs"
+gem "rollbar"
 
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem "jbuilder", "~> 2.12"
@@ -31,8 +35,6 @@ gem "htmlentities"
 # Reduces boot times through caching; required in config/boot.rb
 gem "bootsnap", ">= 1.4.2", require: false
 
-gem "webpacker", "~> 5.4"
-
 gem "rdoc", ">= 6.6.3.1"
 
 group :development, :test do

Gemfile.lock

@@ -120,6 +120,8 @@ GEM
     concurrent-ruby (1.3.3)
     connection_pool (2.4.1)
     crass (1.0.6)
+    cssbundling-rails (1.4.0)
+      railties (>= 6.0.0)
     date (3.3.4)
     drb (2.2.1)
     erubi (1.12.0)
@@ -158,6 +160,8 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    jsbundling-rails (1.3.0)
+      railties (>= 6.0.0)
     json (2.7.2)
     kramdown (2.4.0)
       rexml
@@ -219,8 +223,6 @@ GEM
       nio4r (~> 2.0)
     racc (1.8.0)
     rack (3.1.5)
-    rack-proxy (0.7.6)
-      rack
     rack-session (2.0.0)
       rack (>= 3.0.0)
     rack-test (2.1.0)
@@ -318,7 +320,6 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    semantic_range (3.0.0)
     spring (4.2.1)
     sprockets (4.2.1)
       concurrent-ruby (~> 1.0)
@@ -339,12 +340,18 @@ GEM
     standard-performance (1.4.0)
       lint_roller (~> 1.1)
       rubocop-performance (~> 1.21.0)
+    stimulus-rails (1.3.3)
+      railties (>= 6.0.0)
     stringio (3.1.0)
     strscan (3.1.0)
     temple (0.10.3)
     thor (1.3.1)
     tilt (2.3.0)
     timeout (0.4.1)
+    turbo-rails (2.0.6)
+      actionpack (>= 6.0.0)
+      activejob (>= 6.0.0)
+      railties (>= 6.0.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     uglifier (4.2.0)
@@ -355,11 +362,6 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
-    webpacker (5.4.4)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     webrick (1.8.1)
     websocket (1.2.11)
     websocket-driver (0.7.6)
@@ -382,10 +384,11 @@ DEPENDENCIES
   byebug
   capybara (>= 2.15)
   comfortable_mexican_sofa!
-  execjs
+  cssbundling-rails
   htmlentities
   image_processing (~> 1.13)
   jbuilder (~> 2.12)
+  jsbundling-rails
   listen (>= 3.0.5, < 3.10)
   mysql2 (~> 0.5.6)
   puma (~> 6.4)
@@ -399,11 +402,13 @@ DEPENDENCIES
   rubocop-rails
   selenium-webdriver
   spring (>= 3.0)
+  sprockets-rails
   standard (>= 1.35.1)
+  stimulus-rails
+  turbo-rails
   tzinfo-data
   uglifier (>= 1.3.0)
   web-console (>= 3.3.0)
-  webpacker (~> 5.4)
 
 RUBY VERSION
    ruby 3.1.4p223

Procfile.dev

@@ -0,0 +1,3 @@
+web: env RUBY_DEBUG_OPEN=true bin/rails server
+js: yarn build --watch
+css: yarn watch:css

README.md

@@ -12,7 +12,8 @@ This is the CMS for the University of Alberta Libraries website. It uses Comfy M
 + Rails 7.0.x
 + MariaDB 5.5
 + Docker and docker-compose
-+ yarn and nodejs 16+
++ yarn 
++ nodejs v18+
 
 ## Requirements
 
@@ -24,10 +25,8 @@ Pagination is handled by either Kaminari or WillPaginate. Make sure you have one
 
 1. `git clone [email protected]:ualbertalib/library-cms.git`
 2. `cd library-cms`
-3. `bundle install && yarn install`
-4. `docker-compose up -d`
-5. `bundle exec rails db:setup`
-6. `bundle exec rails server`
+3. `bin/setup`
+6. `bin/dev`
 7. visit [http://localhost:3000](http://localhost:3000) and you will see the library homepage.
 8. If you need to visit the admin section ([http://localhost:3000/admin](http://localhost:3000/admin)) - You'll be prompted to enter username and password (use the ones in your `config/secrets.yml`, which by default are 'admin' and 'mysecretpassword')
 

app/assets/config/manifest.js

@@ -0,0 +1,2 @@
+//= link_tree ../images
+//= link_tree ../builds

app/assets/stylesheets/application.bootstrap.scss

@@ -0,0 +1,3 @@
+// NOTE: Currently all of our CSS comes from Ualberta's main website or external CDN's and this is not actually being used.
+@import 'bootstrap/scss/bootstrap';
+@import 'bootstrap-icons/font/bootstrap-icons';

app/javascript/application.js

@@ -0,0 +1,4 @@
+// NOTE: Currently all of our Javascript comes from Ualberta's main website or external CDN's and this is not actually being used.
+import "@hotwired/turbo-rails"
+import "./controllers"
+import * as bootstrap from "bootstrap"

app/javascript/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }

app/javascript/controllers/hello_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.textContent = "Hello World!"
+  }
+}

app/javascript/controllers/index.js

@@ -0,0 +1,8 @@
+// This file is auto-generated by ./bin/rails stimulus:manifest:update
+// Run that command whenever you add a new controller or create them with
+// ./bin/rails generate stimulus controllerName
+
+import { application } from "./application"
+
+import HelloController from "./hello_controller"
+application.register("hello", HelloController)

app/views/layouts/application.html.erb

@@ -3,7 +3,7 @@
     <meta charset="utf-8">
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
     <meta content="width=device-width, initial-scale=1" name="viewport">
-    <title> 
+    <title>
     U of A Library
     </title>
     <link href="https://www.ualberta.ca/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
@@ -23,6 +23,10 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
 })(window,document,'script','dataLayer','GTM-MX43PRW2');</script>
     <!-- End Google Tag Manager -->
+
+    <%# Currently CSS/JS is coming from Ualberta's main website or external CDN's. To use the asset pipeline, uncomment the next two lines of code %>
+    <%#= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%#= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
   </head>
   <body>
    <!-- Google Tag Manager (noscript) -->
@@ -40,7 +44,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
        		<a aria-label="University of Alberta" class="navbar-brand en-logo" href="https://www.ualberta.ca/index.html"></a>
         		<div class="site-title">
             	<a href="/">Library</a>
-           	</div>  
+           	</div>
 					<div class="standard-nav nav-order nav-width">
          		<nav>
             	<button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle Menu" class="navbar-toggler nav-menu-btn btn" data-bs-target="#navbarSupportedContent" data-bs-toggle="collapse" title="Menu" type="button">
@@ -54,7 +58,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
                                                   <li class="nav-item">
                                                              <a class="nav-link standard-nav toggle-link d-none d-lg-block nav-button" href="/services" role="button">Library Services</a>
                                                         <a class="nav-link d-block d-lg-none" href="/services">Library Services</a>
-                                               
+
                                                     </li>
                                                     <li class="nav-item">
                                                         <a class="nav-link d-block d-lg-none" href="/subject-guides">Subject Guides</a>
@@ -86,7 +90,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
         </header>
         <main class="main-content container-fluid">
             <a name="main"></a>
-         
+
 	  <%= yield %>
       </main>
  <div id="libchat_baadd67c0b9382719dabca82069083e2e6b6d873103a32cc235ec09ad41f22a5"></div>
@@ -120,7 +124,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
                             <a href="/about/employment">Careers + Employment</a>
                         </li>
                       <li>  <a href="/harmful-language-statement">Harmful Language in Records + Descriptions</a></li>
-                 
+
                     </ul>
                 </div>
                 <div class="link-group">
@@ -144,15 +148,15 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
                         <li>
                             <a href="/ask-us"> Ask Us</a>
                         </li>
-                      
+
                     </ul>
                 </div>
                 <div class="link-group">
                     <div class="link-group-header">Tools + Apps</div>
                     <ul>
                          <li>
                             <a href="/my-account">My Account</a>
-                        </li>  
+                        </li>
                       <li>
                             <a href="https://www.beartracks.ualberta.ca/">Bear Tracks</a>
                         </li>
@@ -168,7 +172,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
                        <li>
                             <a href="https://www.library.ualberta.ca/staff">Library Staff Directory</a>
                         </li>
-                     
+
                        <li>
                             <a href="https://www.ualberta.ca/onecard/index.html">ONEcard</a>
                         </li>
@@ -195,16 +199,16 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
                        <li>
                             <a href="https://www.ualberta.ca/faculty-and-staff/copyright/index.html">Copyright Office</a>
                         </li>
-                     
-                   
+
+
                     </ul>
                 </div>
-             
+
             </div>
-                   
+
             <div class="final">
                 <div class="social-links">
-            
+
                     <a href="https://twitter.com/uofalibrary" title="UAlberta Twitter">
                         <i aria-hidden="true" class="fab fa-x-twitter"></i>
                     </a>
@@ -214,7 +218,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
                     <a href="https://www.youtube.com/channel/UCtrypim7fRY5dOOa1G9FW5Q" title="UAlberta YouTube">
                         <i aria-hidden="true" class="fab fa-youtube"></i>
                     </a>
-                 
+
                 </div>
                 <div class="logo en-logo">
                     <a aria-label="University of Alberta" href="https://www.ualberta.ca/index.html"></a>