Merge pull request #2369 from cloudnativedaysjp/poc/good-bye-webpacker

webpackerをやめてwebpackを使うように変更

.github/workflows/build-branch.yml

@@ -2,7 +2,7 @@ name: build container image when branches are pushed
 
 on:
   push:
-    branches: ["*"]
+    branches:
 
 jobs:
   build:

.github/workflows/ci.yml

@@ -59,7 +59,7 @@ jobs:
         bundle exec rails db:environment:set RAILS_ENV=test
         bundle exec rails db:migrate RAILS_ENV=test
         bundle exec rake ci:check_git_diff
-        bundle exec rake webpacker:compile
+        bundle exec rake assets:precompile
     - name: Run tests
       shell: bash
       env:

.gitignore

@@ -52,4 +52,6 @@ vendor
 
 package-lock.json
 
-localstack
+localstack
+/app/assets/builds/*
+!/app/assets/builds/.keep

.node-version

@@ -1 +1 @@
-16.20.0
+18.16.0

Dockerfile

@@ -1,6 +1,6 @@
 # syntax = docker/dockerfile:1.7
 
-FROM node:16.20.2-slim as node
+FROM node:18.12.0-slim as node
 WORKDIR /app
 COPY --link package.json yarn.lock ./
 RUN --mount=type=cache,uid=1000,target=/app/.cache/node_modules \
@@ -26,6 +26,7 @@ COPY --link config config
 COPY --link Rakefile Rakefile
 COPY --link app app
 COPY --link Gemfile* ./
+COPY --link webpack.config.js webpack.config.js
 COPY --link package.json yarn.lock ./
 COPY --link --from=node /app/node_modules /app/node_modules
 COPY --link --from=fetch-lib /usr/local/bundle /usr/local/bundle

Gemfile

@@ -8,11 +8,12 @@ gem 'puma', '~> 6.0'
 # Use SCSS for stylesheets
 gem 'sass-rails', '>= 6'
 # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
-gem 'webpacker', '~> 5.0'
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
 gem 'turbolinks', '~> 5'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.11'
+gem 'jsbundling-rails'
+gem 'cssbundling-rails'
 # Use Redis adapter to run Action Cable in production
 # gem 'redis', '~> 4.0'
 # Use Active Model has_secure_password
@@ -58,6 +59,7 @@ group :development do
   gem 'rbs_rails', require: false
   gem 'pre-commit', require: false
   gem 'execjs', require: false
+  gem 'foreman'
 end
 
 group :test do

Gemfile.lock

@@ -154,6 +154,8 @@ GEM
     content_disposition (1.0.0)
     crass (1.0.6)
     csv (3.3.0)
+    cssbundling-rails (1.4.0)
+      railties (>= 6.0.0)
     date (3.3.4)
     diff-lcs (1.5.0)
     docile (1.4.0)
@@ -180,6 +182,7 @@ GEM
       faraday (~> 2.0)
     ffi (1.17.0)
     fileutils (1.7.2)
+    foreman (0.88.1)
     gli (2.21.0)
     globalid (1.2.1)
       activesupport (>= 6.1)
@@ -196,6 +199,8 @@ GEM
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
     jmespath (1.6.1)
+    jsbundling-rails (1.3.0)
+      railties (>= 6.0.0)
     json (2.7.2)
     json_schema (0.21.0)
     jwt (2.5.0)
@@ -465,8 +470,6 @@ GEM
       rack (>= 2.0.0)
     rack-protection (2.2.2)
       rack
-    rack-proxy (0.7.2)
-      rack
     rack-test (2.1.0)
       rack (>= 1.3)
     rack-timeout (0.6.3)
@@ -592,7 +595,6 @@ GEM
     seed-fu (2.3.9)
       activerecord (>= 3.1)
       activesupport (>= 3.1)
-    semantic_range (3.0.0)
     sentry-opentelemetry (5.9.0)
       opentelemetry-sdk (~> 1.0)
       sentry-ruby (~> 5.9.0)
@@ -672,11 +674,6 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
-    webpacker (5.4.3)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -702,12 +699,15 @@ DEPENDENCIES
   byebug
   committee
   committee-rails
+  cssbundling-rails
   execjs
   factory_bot_rails
   faraday-retry
+  foreman
   icalendar
   image_processing (~> 1.12.2)
   jbuilder (~> 2.11)
+  jsbundling-rails
   listen (~> 3.2)
   mysql2 (~> 0.5.6)
   nokogiri (= 1.16.5)
@@ -751,7 +751,6 @@ DEPENDENCIES
   tzinfo-data
   uppy-s3_multipart (~> 1.0)
   web-console (>= 3.3.0)
-  webpacker (~> 5.0)
 
 BUNDLED WITH
    2.5.9

Procfile.dev

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

README.md

@@ -83,7 +83,6 @@ You need to install shared-mime-info
 ```
 $ yarn install --check-files
 $ bundle install
-$ bundle exec rake webpacker:compile
 ```
 
 Then, create `.env-local` file and fill these values. If you don't know correct values, please ask us.
@@ -120,16 +119,10 @@ $ docker compose pull ui
 $ docker compose up -d fifo-worker db redis nginx localstack ui
 ```
 
-Run the application
+Run the application and builder js and css
 
 ```
-$ ./entrypoint.sh
-```
-
-Run Webpack dev server in case you want to edit JavaScript.
-
-```
-$ ./bin/webpack-dev-server
+$  bundle exec foreman start -f Procfile.dev "$@" -e .env
 ```
 
 ## DB migration and to add seed data

app/assets/config/manifest.js

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

app/assets/stylesheets/application.bootstrap.scss

@@ -0,0 +1,2 @@
+@import 'bootstrap/scss/bootstrap';
+@import 'bootstrap-icons/font/bootstrap-icons';

app/assets/stylesheets/application.sass.scss

@@ -0,0 +1 @@
+// Entry point for your Sass build

app/controllers/application_controller.rb

@@ -179,4 +179,8 @@ def display_timetable?
   def display_contact_url?
     @conference.present? && @conference.contact_url.present? && (@conference.opened? || @conference.closed? || @conference.archived?)
   end
+  helper_method :admin?
+  def admin?
+    false
+  end
 end

app/controllers/concerns/secured.rb

@@ -43,7 +43,7 @@ def new_user?
   end
 
   def admin?
-    conference && current_user[:extra][:raw_info]['https://cloudnativedays.jp/roles'].include?("#{conference.abbr.upcase}-Admin")
+    conference && current_user && current_user[:extra][:raw_info]['https://cloudnativedays.jp/roles'].include?("#{conference.abbr.upcase}-Admin")
   end
 
   def speaker?

app/javascript/packs/admin/tracks/tracks_control.js

@@ -1,9 +1,9 @@
 var elements = document.getElementsByClassName('start-offset');
 var submit_button = document.getElementById('submit-offset');
 
-elements.forEach(element => {
+Array.from(elements).forEach(element => {
     element.addEventListener('change', function() {
         this.nextElementSibling.value = this.value;
         submit_button.classList.add('btn-danger');
     }, false);
-});
+});

app/javascript/packs/application.js

@@ -12,15 +12,11 @@ require("turbolinks").start()
 //
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
-import '../stylesheets/application'
+// import '../stylesheets/application'
+import $ from 'jquery'
 import './bootstrap_custom.js'
-import './bootstrap-table.js'
-import './utils'
-import './bootstrap-table-filter-control.js'
-import jquery from 'jquery';
-window.$ = window.jquery = jquery;
-import './jquery.easing.min.js'
-import './jquery.magnific-popup.min.js'
+import 'bootstrap-table'
+window.jQuery = $
 import './scripts.js'
 import './timetable.js'
 import './talks.js'
@@ -32,8 +28,7 @@ import './speaker_form.js'
 import './cropbox.js'
 import './copy.js'
 
-require.context('images', true, /\.(png|jpg|jpeg|svg)$/)
-    //require.context('images/cndo201', true, /\.(png|jpg|jpeg|svg)$/)
+//require.context('images/cndo201', true, /\.(png|jpg|jpeg|svg)$/)
 
 // import 'regenerator-runtime/runtime'
 // import "@hotwired/turbo-rails"