Eject webpacker for jsbundling-rails

buildpacks · Aug 20, 2024 · 28dd9f8 · 28dd9f8
1 parent 312e074
commit 28dd9f8
Show file tree

Hide file tree

Showing 21 changed files with 1,763 additions and 910 deletions.
diff --git a/.gitignore b/.gitignore
@@ -47,3 +47,6 @@ package-lock.json
 
 # Ignore asdf versions
 .tool-versions
+
+/app/assets/builds/*
+!/app/assets/builds/.keep
diff --git a/Gemfile b/Gemfile
@@ -13,7 +13,7 @@ gem 'rails', '~> 6.1.0'
 gem 'rollbar'
 gem 'sass-rails', '>= 6'
 gem 'toml'
-gem 'webpacker', '~> 5.2', '>= 5.2.1'
+gem 'jsbundling-rails', '~> 1.3'
 
 group :development, :test do
   gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -82,6 +82,8 @@ GEM
       activesupport (>= 5.0)
     i18n (1.12.0)
       concurrent-ruby (~> 1.0)
+    jsbundling-rails (1.3.1)
+      railties (>= 6.0.0)
     json_schema (0.21.0)
     listen (3.5.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
@@ -226,6 +228,7 @@ DEPENDENCIES
   byebug
   committee
   dotenv-rails
+  jsbundling-rails (~> 1.3)
   listen (~> 3.3)
   minitest-reporters
   mocha

diff --git a/Procfile.dev b/Procfile.dev
@@ -0,0 +1,2 @@
+web: env RUBY_DEBUG_OPEN=true bin/rails server
+js: yarn build --watch
diff --git a/README.md b/README.md
@@ -180,10 +180,10 @@ Run the tests:
 ```
 $ make test
 ```
-Then run the app:
+Then run the Rails app and asset watcher/compiler with:
 
 ```
-$ bundle exec rails s
+$ ./bin/dev
 ```
 
 In other terminal session, run the background worker to create the index:

diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -1,2 +1,2 @@
 //= link_tree ../images
-//= link_directory ../stylesheets .css
+//= link_tree ../builds
diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -0,0 +1,2 @@
+// Entry point for the build script in your package.json
+import Index from "./packs/Index.tsx";
diff --git a/app/javascript/components/search/Search.tsx b/app/javascript/components/search/Search.tsx
@@ -49,7 +49,7 @@ class Search extends React.Component<{}, { searchTerm: string, searchResults: an
         if (this.state.loading || (this.state.searchResults.length === 0 && this.state.searchTerm === '')) {
             summary = null;
         }
-       
+
         return (
             <div className="Search">
                 <div className="Search-header">
@@ -72,7 +72,7 @@ class Search extends React.Component<{}, { searchTerm: string, searchResults: an
             </div>
         );
     }
-    
+
     async keyPressed(e: any) {
         const searchTerm = (e.target.value + '').trim();
         if (searchTerm === '' || e.keyCode !== 13) {
@@ -93,7 +93,7 @@ class Search extends React.Component<{}, { searchTerm: string, searchResults: an
         this.setState({
             formValue: a
         });
-        
+
         await this.fetchSearchResults(a);
     }
 
@@ -103,7 +103,7 @@ class Search extends React.Component<{}, { searchTerm: string, searchResults: an
         }
 
         try {
-            const apiHost = process.env.CNB_API_HOST || 'https://cnb-registry-api.herokuapp.com';
+            const apiHost = process.env.CNB_API_HOST;
             const link = `${apiHost}/api/v1/search?matches=${searchText}`;
             const response: AxiosResponse = await Axios.get(link);
             if (response.status >= 200 && response.status < 300) {

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -8,9 +8,9 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-    <%= stylesheet_pack_tag 'application', media: 'all' %>
+    <%= stylesheet_link_tag 'application', media: 'all' %>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <%= javascript_pack_tag 'Index' %>
+    <%= javascript_include_tag "application", type: "module" %>
   </head>
 
   <body>

diff --git a/bin/dev b/bin/dev
@@ -0,0 +1,11 @@
+#!/usr/bin/env sh
+
+if gem list --no-installed --exact --silent foreman; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+# Default to port 3000 if not specified
+export PORT="${PORT:-3000}"
+
+exec foreman start -f Procfile.dev --env /dev/null "$@"
diff --git a/bin/webpack b/bin/webpack
diff --git a/bin/webpack-dev-server b/bin/webpack-dev-server
diff --git a/config/webpack/development.js b/config/webpack/development.js
diff --git a/config/webpack/environment.js b/config/webpack/environment.js
diff --git a/config/webpack/production.js b/config/webpack/production.js
diff --git a/config/webpack/test.js b/config/webpack/test.js
diff --git a/config/webpack/webpack.config.js b/config/webpack/webpack.config.js
@@ -0,0 +1,51 @@
+const path    = require("path")
+const webpack = require("webpack")
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  mode: "production",
+  devtool: "source-map",
+  entry: {
+    application: [
+      "./app/javascript/application.js",
+      './app/assets/stylesheets/application.css',
+    ],
+  },
+  output: {
+    filename: "[name].js",
+    chunkFilename: "[name]-[contenthash].digested.js",
+    sourceMapFilename: "[file]-[fullhash].map",
+    path: path.resolve(__dirname, '..', '..', 'app/assets/builds'),
+    hashFunction: "sha256",
+    hashDigestLength: 64,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx|)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader'],
+      },
+      {
+        test: /\.(?:sa|sc|c)ss$/i,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.(png|jpe?g|gif|eot|woff2|woff|ttf|svg)$/i,
+        use: 'file-loader',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss', '.css', '.png', '.svg'],
+  },
+  plugins: [
+    new MiniCssExtractPlugin(),
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1
+    }),
+    new webpack.EnvironmentPlugin({
+      CNB_API_HOST: 'https://cnb-registry-api.herokuapp.com'
+    })
+  ]
+}
diff --git a/config/webpacker.yml b/config/webpacker.yml
diff --git a/package.json b/package.json
@@ -3,16 +3,22 @@
   "version": "0.0.1",
   "private": true,
   "engines": {
-    "node": "14.x"
+    "node": "20.x"
   },
   "scripts": {
     "start": "node ./bin/www",
-    "index": "node ./bin/indexer"
+    "index": "node ./bin/indexer",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider webpack --config ./config/webpack/webpack.config.js"
   },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "dependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-transform-runtime": "^7.24.7",
+    "@babel/preset-env": "^7.25.3",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
-    "@rails/webpacker": "5.2.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -21,6 +27,7 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "axios": "^0.21.2",
+    "babel-loader": "^8.3.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "bootstrap": "^4.5.3",
     "cookie-parser": "~1.4.4",
@@ -29,6 +36,7 @@
     "debug": "~2.6.9",
     "execa": "^4.0.3",
     "express": "~4.17.3",
+    "file-loader": "^6.2.0",
     "jquery": "^3.5.1",
     "js-search": "^2.0.0",
     "mini-css-extract-plugin": "^1.3.3",
@@ -40,10 +48,21 @@
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
+    "sass": "^1.77.8",
+    "sass-loader": "^16.0.1",
     "typescript": "^4.1.3",
-    "web-vitals": "^0.2.4"
+    "web-vitals": "^0.2.4",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4"
   },
   "devDependencies": {
     "webpack-dev-server": "^3.11.1"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react",
+      "@babel/preset-typescript"
+    ]
   }
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		web: env RUBY_DEBUG_OPEN=true bin/rails server
		js: yarn build --watch
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// Entry point for the build script in your package.json
		import Index from "./packs/Index.tsx";