administrate
administrate copied to clipboard
thoughtbot
Add webpacker
Adding support for webpacker.
This setup should, if you have webpacker setup, automatically compile administrate packs.
Adding support for webpacker gives us freedom to start supporting newer rails features such as ActionText.
https://github.com/chimame/rails_on_wepacker_engine includes words that seem like the thing we want...
@palkan I know you have thought about using webpacker in an engine before. Do you have any advice here?
We are unsure whether we can use webpacker inside the engine without also having webpacker in the parent application
Should work. We had such setup in one of the applications.
requires us to run yarn install inside administrate to generate node_modules
That's an interesting question.
For precompiling you can enhance webpacker:compile or assets:precompile Rake task. Smth like this:
Rake::Task["assets:precompile"].enhance(%w[administrate:webpacker:yarn_install administrate:webpacker:compile])
run yarn install as part of the administrate generator
Sounds good for the cold run. But what about upgrading? As I see, there is no such task or generator. And we only want to run yarn install if packages were upgraded. That leads us to one missing feature in this setup: integrity checking.
You can add integrity checking to the railtie (like this) and add a note to run rake administrate:webpacker:yarn_install in case node_modules/ are outdated.
So, the final flow would be as follows:
- User upgrades Administrate
- During the first run they see the exception telling to run yarn install
- Everything works automatically in production if we enhance the default
assets:precompiletask (ideally, we should check whetherwebpacker:compiletask is defined and enhance it, and only fallback toassets:precompileif the parent app doesn't use Webpacker).
@tabfugnic @jsilasbailey I also noticed https://github.com/thoughtbot/administrate/wiki/Rails-6-&-Webpacker in our Wiki, in case that is useful.
I'm the one who wrote the Wiki page. Please ping me if there is anything I can help with.
I don't know if this is related... I am using the master branch of the gem. A deploy to Heroku is generating enormous asset files... is there some flag to set? Are JS maps optional?
remote: I, [2020-04-21T15:10:58.440102 #1056] INFO -- : Writing /tmp/build_a49f845064dcf4737a9632405d540518/public/assets/application-da08feca238a6ba99f0ec3da2372266f5a8d9216d42d95c3cd34a37bf83dbadf.css
remote: I, [2020-04-21T15:10:58.440312 #1056] INFO -- : Writing /tmp/build_a49f845064dcf4737a9632405d540518/public/assets/application-da08feca238a6ba99f0ec3da2372266f5a8d9216d42d95c3cd34a37bf83dbadf.css.gz
remote: Compiling...
remote: Compiled all packs in /tmp/build_a49f845064dcf4737a9632405d540518/public/packs
remote: Hash: 1f40577cbf84c59edf83
remote: Version: webpack 4.41.2
remote: Time: 50838ms
remote: Built at: 04/21/2020 3:11:51 PM
remote: Asset Size Chunks Chunk Names
remote: css/administrate-cede48c7.css 48.8 KiB 0 [emitted] [immutable] administrate
remote: css/administrate-cede48c7.css.gz 8.29 KiB [emitted]
remote: css/application-347fb210.css 48.8 KiB 1 [emitted] [immutable] application
remote: css/application-347fb210.css.gz 8.29 KiB [emitted]
remote: js/administrate-e3a49e8a49ec036c1785.js 1.32 MiB 0 [emitted] [immutable] [big] administrate
remote: js/administrate-e3a49e8a49ec036c1785.js.LICENSE 4.64 KiB [emitted]
remote: js/administrate-e3a49e8a49ec036c1785.js.gz 312 KiB [emitted] [big]
remote: js/administrate-e3a49e8a49ec036c1785.js.map 3.49 MiB 0 [emitted] [dev] administrate
remote: js/administrate-e3a49e8a49ec036c1785.js.map.gz 884 KiB [emitted] [big]
remote: js/application-b9c54e5b2885b57bc521.js 1.11 MiB 1 [emitted] [immutable] [big] application
remote: js/application-b9c54e5b2885b57bc521.js.LICENSE 3.61 KiB [emitted]
remote: js/application-b9c54e5b2885b57bc521.js.gz 260 KiB [emitted] [big]
remote: js/application-b9c54e5b2885b57bc521.js.map 2.91 MiB 1 [emitted] [dev] application
remote: js/application-b9c54e5b2885b57bc521.js.map.gz 734 KiB [emitted] [big]
remote: manifest.json 973 bytes [emitted]
remote: manifest.json.gz 246 bytes [emitted]
remote: Entrypoint administrate [big] = css/administrate-cede48c7.css js/administrate-e3a49e8a49ec036c1785.js js/administrate-e3a49e8a49ec036c1785.js.map
remote: Entrypoint application [big] = css/application-347fb210.css js/application-b9c54e5b2885b57bc521.js js/application-b9c54e5b2885b57bc521.js.map
remote: [4] (webpack)/buildin/global.js 878 bytes {0} {1} [built]
remote: [9] (webpack)/buildin/module.js 552 bytes {0} {1} [built]
remote: [20] (webpack)/buildin/amd-options.js 80 bytes {0} {1} [built]
remote: [166] ./app/javascript/channels/index.js 205 bytes {0} {1} [built]
remote: [167] ./app/javascript/channels sync _channel\.js$ 160 bytes {0} {1} [built]
remote: [171] ./app/javascript/common/uppy_activestorage.js 3.02 KiB {0} {1} [built]
remote: [269] ./app/javascript/common/common.js 2.04 KiB {0} {1} [built]
remote: [271] ./node_modules/moment/locale sync ^\.\/.*$ 3 KiB {0} {1} [optional] [built]
remote: [273] ./app/javascript/packs/administrate.js 756 bytes {0} [built]
remote: [277] ./app/javascript/administrate/index.js 80 bytes {0} [built]
remote: [283] ./app/javascript/packs/application.js 647 bytes {1} [built]
remote: [285] ./app/javascript/common/devise_authy.js 398 bytes {1} [built]
remote: [286] ./app/javascript/common/authy_form.js 21.8 KiB {1} [built]
remote: [287] ./node_modules/@rails/actiontext/app/javascript/actiontext/index.js + 1 modules 2.64 KiB {0} [built]
remote: | 2 modules
remote: + 276 hidden modules
remote:
remote: WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
remote: This can impact web performance.
remote: Assets:
remote: js/administrate-e3a49e8a49ec036c1785.js (1.32 MiB)
remote: js/application-b9c54e5b2885b57bc521.js (1.11 MiB)
remote: js/administrate-e3a49e8a49ec036c1785.js.gz (312 KiB)
remote: js/application-b9c54e5b2885b57bc521.js.gz (260 KiB)
remote: js/application-b9c54e5b2885b57bc521.js.map.gz (734 KiB)
remote: js/administrate-e3a49e8a49ec036c1785.js.map.gz (884 KiB)
remote:
remote: WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
remote: Entrypoints:
remote: administrate (1.37 MiB)
remote: css/administrate-cede48c7.css
remote: js/administrate-e3a49e8a49ec036c1785.js
remote: application (1.16 MiB)
remote: css/application-347fb210.css
remote: js/application-b9c54e5b2885b57bc521.js
remote:
remote:
remote: WARNING in webpack performance recommendations:
remote: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
remote: For more info visit https://webpack.js.org/guides/code-splitting/
remote: Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/@uppy/core/dist/style.css:
remote: Entrypoint mini-css-extract-plugin = *
remote: 2 modules
remote: Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/@uppy/dashboard/dist/style.css:
remote: Entrypoint mini-css-extract-plugin = *
remote: 2 modules
remote:
remote: Asset precompilation completed (89.88s)
remote: Cleaning assets
remote: Running: rake assets:clean
remote: I, [2020-04-21T15:11:54.225165 #1189] INFO -- : Removed application-edee8382ac0527db0b6f2a932ad7218c5c6d1ca0010eeab65cd6e6f29db22674.css
remote: -----> Detecting rails configuration
remote: $ rails runner "begin; puts %Q{heroku.detecting.config.for.assets.compile=#{Rails.application.config.try(:assets).try(:compile)}}; rescue => e; puts e; puts e.backtrace; end; begin; puts %Q{heroku.detecting.config.for.action_dispatch.x_sendfile_header=#{Rails.application.config.try(:action_dispatch).try(:x_sendfile_header)}}; rescue => e; puts e; puts e.backtrace; end; begin; puts %Q{heroku.detecting.config.for.active_storage.service=#{Rails.application.config.try(:active_storage).try(:service)}}; rescue => e; puts e; puts e.backtrace; end;"
remote: heroku.detecting.config.for.assets.compile=false
remote: heroku.detecting.config.for.action_dispatch.x_sendfile_header=
remote: heroku.detecting.config.for.active_storage.service=aws
Those files are not enormous (in context). Don't blindly follow whatever a console outputs. The messages are not related -- webpacker doesn't magically reduces file sizes (but it does allow for tree shaking, which will help with your issue 👍 😄).
You can follow https://github.com/thoughtbot/administrate/wiki/Rails-6-&-Webpacker to reduce the necessary JavaScript, but for correct workings of administrate, you'll need some JavaScript.
If you're still having problems, I'd recommend opening a new issue, so that we can keep this PR related to adding webpacker only.
@purinkle, what is the current status of this PR? I see that you pushed some changes recently.
I had a look at the code. I ran bundle install and it got me the following changes:
$ git diff
diff --git a/Gemfile.lock b/Gemfile.lock
index a756ef80..8d7b4d64 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -11,6 +11,7 @@ PATH
momentjs-rails (~> 2.8)
sassc-rails (~> 2.1)
selectize-rails (~> 0.6)
+ webpacker
GEM
remote: https://rubygems.org/
@@ -208,6 +209,8 @@ GEM
activesupport (>= 3.0.0)
racc (1.5.2)
rack (2.2.3)
+ rack-proxy (0.7.0)
+ rack
rack-test (1.1.0)
rack (>= 1.0, < 3)
rack-timeout (0.6.0)
@@ -277,6 +280,7 @@ GEM
selenium-webdriver (3.142.7)
childprocess (>= 0.5, < 4.0)
rubyzip (>= 1.2.2)
+ semantic_range (3.0.0)
sentry-raven (3.1.2)
faraday (>= 1.0)
shoulda-matchers (4.5.1)
@@ -305,6 +309,11 @@ GEM
addressable (>= 2.3.6)
crack (>= 0.3.2)
hashdiff (>= 0.4.0, < 2.0.0)
+ webpacker (5.4.0)
+ activesupport (>= 5.2)
+ rack-proxy (>= 0.6.1)
+ railties (>= 5.2)
+ semantic_range (>= 2.3.0)
websocket-driver (0.7.3)
websocket-extensions (>= 0.1.0)
websocket-extensions (0.1.5)
I find this strange, as you added the webpacker dependency in your latest commit, but it looks like it didn't make it into Gemfile.lock? Do you know if there was a reason for this?
After that, I ran ./bin/rails webpacker:yarn_install, and then I was able to run the specs locally, full green.
Huh. I'm not sure how we ended up with uncommitted changes to Gemfile.lock.
@pablobm, feel free to merge those changes if you think they are relevant.
Last time out, I added the webpacker gem. I got the branch to the point where the setup script will run without failing.
My next step is to get the specs green again.
OK, I added the changes to Gemfile.lock as well as unignored yarn.lock and ignored some Yarn artifacts. The specs run green for me, let's see what CI's opinion of this is :crossed_fingers:
Closing this as the general issue of asset management has been unified at #2311