Document how to set arctic theme with use_webpacker enabled

Question

Document how to set arctic theme with use_webpacker enabled

sjieg opened this issue 4 years ago · comments

Is your feature request related to a problem? Please describe.
It might be my limited knowledge of Webpacker, but I'm not able to get your theme to work with the (new) feature config.use_webpacker enabled.
See bottom of the page https://activeadmin.info/0-installation.html#upgrading

Describe the solution you'd like

Since your documentation includes how to enable your theme in css and sass, it might be nice to also describe how to do it with Webpacker enabled.

Describe alternatives you've considered

I've tried to figure it out myself and it's very likely that my limited knowledge of Webpacker causes me to fail. What I'd expect is that I should replace the @~activeadmin/activeadmin/src/something/base with @~arctic_admin/arctiv_admin/src/something/base, but I'm guessing the @ synbol is a reference that AA added, but your theme does not.

Additional context

You guys created a nice theme by the way, keep up the good work! :)

Clément Prod'homme commented 4 years ago

Yes

Clément Prod'homme · Answer 1 · Wed Apr 22 2020 18:37:27 GMT+0800 (China Standard Time)

I'm not an expert of webpack but maybe this can be help you :

foton commented on 19 Sep 2017
I made it work by

Unpacking gem cocoon-1.2.10 into vendor/gems/cocoon-1.2.10 (according to https://makandracards.com/makandra/538-freeze-vendor-unpack-a-single-ruby-gem-with-and-without-bundler). And modifiing Gemfile.

Adding vendor path resolved_paths: ['vendor'] to config/webpacker.yml.

Created file vendor/gems/index.js with import {} from './cocoon-1.2.10/app/assets/javascripts/cocoon.js';

Import this file in app/javascript/application.js with import {} from 'gems/index.js'; //in /vendor/gems

Of course, no npm package is then needed.

source : rails/webpacker#57

If it's works, that will be great to add a page on the wiki for this :)

Gijs Paulides · Answer 2 · Wed Apr 22 2020 23:03:20 GMT+0800 (China Standard Time)

Thanks for the info. I was thinking about something like that, but that would mean doing a manual action every time there is a new release.

I looked a bit further on how Active Admin did it: https://github.com/activeadmin/activeadmin/pull/5855/files
And then I saw the same @ reference again here: run "yarn add @activeadmin/activeadmin"
Then I looked into the yarn repository, and it turns out they are deploying a part of their release into yarn: https://yarnpkg.com/package/@activeadmin/activeadmin

So, if I understand it correctly, to solve this properly, the something along the following should happen:

Add a package.json file with the dependencies
Deploy this repository, excluding /lib to your Yarn account (say @cprodhomme/arctic_admin)
- Subnote on this, the file structure might need a bit more shuffling.
Write Webpacker docs stating the following:

run yarn add @cprodhomme/arctic_admin
In app/javascript/packs/active_admin.js replace

 import "@activeadmin/activeadmin";

with

 import "@cprodhomme/arctic_admin";

In app/javascript/packs/stylesheets/active_admin.scss replace

 @import "~@activeadmin/activeadmin/src/scss/base";

with

 @import "~@cprodhomme/arctic_admin/src/scss/base";

This would basically make arctic_admin a NodeJS package besides being a Ruby Gem.

Looks like quite some work, personally I have zero experience with NodeJS, but from what I understand from the Rails notes, is that they want to move away from including JS/css packages from the Rubygems and get them from the source.

WDYT?

Gijs Paulides · Answer 3 · Wed Apr 22 2020 23:08:03 GMT+0800 (China Standard Time)

Looks like someone did it about 9 months ago https://yarnpkg.com/package/arctic-admin
Github user: https://github.com/doabit

Sean Deng · Answer 4 · Mon Apr 27 2020 09:44:10 GMT+0800 (China Standard Time)

@sjieg I've created a PR and it should make the gem works with webpacker after @cprodhomme published it to npm.

Sachin Mittal · Answer 5 · Wed Apr 29 2020 13:42:31 GMT+0800 (China Standard Time)

Is it published to npm?
I am still not able to make it work with rails 6 and webpacker.

Clément Prod'homme · Answer 6 · Wed Apr 29 2020 15:41:52 GMT+0800 (China Standard Time)

#73

when is make npm publish i have this error
npm ERR! network timeout at: https://registry.npmjs.org/arctic_admin
@doabit do you know why ?

i have always the same error. maybe it's my npm config

Gijs Paulides · Answer 7 · Wed Apr 29 2020 16:18:02 GMT+0800 (China Standard Time)

@cprodhomme did you try npm cache verify ?

Sean Deng · Answer 8 · Wed Apr 29 2020 16:33:22 GMT+0800 (China Standard Time)

@cprodhomme Try to visit https://registry.npmjs.org

Clément Prod'homme · Answer 9 · Wed Apr 29 2020 17:55:20 GMT+0800 (China Standard Time)

I have this :

// 20200429115254
// https://registry.npmjs.org/

{
  "db_name": "registry",
  "doc_count": 1639617,
  "doc_del_count": 339,
  "update_seq": 11235147,
  "purge_seq": 0,
  "compact_running": false,
  "disk_size": 31112671367,
  "data_size": 26435480433,
  "instance_start_time": "1584383321738659",
  "disk_format_version": 6,
  "committed_update_seq": 11235147
}

Sean Deng · Answer 10 · Wed Apr 29 2020 19:07:17 GMT+0800 (China Standard Time)

This is what i did

npm run prepublishOnly
npm login
npm publish

by the way, have you set a custom npm registry?

Clément Prod'homme · Answer 11 · Wed Apr 29 2020 20:10:41 GMT+0800 (China Standard Time)

yes i had put a custom npm registry :/ (github package)

exemple of my ~/.npmrc

//npm.pkg.github.com/:_authToken=MY_GITHUB_TOKEN
//registry.npmjs.org/:_authToken=MY_NPM_TOKEN
registry=https://registry.npmjs.org/

Sean Deng · Answer 12 · Wed Apr 29 2020 21:54:22 GMT+0800 (China Standard Time)

yes i had put a custom npm registry :/ (github package)

exemple of my ~/.npmrc
//npm.pkg.github.com/:_authToken=MY_GITHUB_TOKEN
//registry.npmjs.org/:_authToken=MY_NPM_TOKEN
registry=https://registry.npmjs.org/

Try to use default registry.

Clément Prod'homme · Answer 13 · Wed Apr 29 2020 23:46:07 GMT+0800 (China Standard Time)

how i use the default ?

Sean Deng · Answer 14 · Thu Apr 30 2020 00:03:07 GMT+0800 (China Standard Time)

npm config set registry https://registry.npmjs.org

Clément Prod'homme · Answer 15 · Thu Apr 30 2020 00:05:09 GMT+0800 (China Standard Time)

already done this :/

Sean Deng · Answer 16 · Thu Apr 30 2020 00:10:19 GMT+0800 (China Standard Time)

already done this :/

npm publish still not work?

Gijs Paulides · Answer 17 · Thu Apr 30 2020 00:45:02 GMT+0800 (China Standard Time)

Could it be easier to do it with yarn publish?
https://classic.yarnpkg.com/en/docs/publishing-a-package/

Are you on a company / managed network? Sometimes they block specific protocols, causing you to be able to visit the website, but not communicate from Shell.

Clément Prod'homme · Answer 18 · Thu Apr 30 2020 02:55:47 GMT+0800 (China Standard Time)

i can't publish arctic_admin :

error Couldn't publish package: "https://registry.npmjs.org/arctic_admin: Package name too similar to existing packages; try renaming your package to '@cprodhomme/arctic_admin' and publishing with 'npm publish --access=public' instead"

i thinks it's because the package https://www.npmjs.com/package/arctic-admin exist :/

i have made :
https://www.npmjs.com/package/@cprodhomme/arctic_admin

Clément Prod'homme · Answer 19 · Thu Apr 30 2020 06:42:07 GMT+0800 (China Standard Time)

@doabit please,
maybe you could remove your package :
https://www.npmjs.com/policies/unpublish

And after i could publish a package with the name arctic_admin 🙂

If you want, we can also speak by email

Sean Deng · Answer 20 · Thu Apr 30 2020 08:49:48 GMT+0800 (China Standard Time)

@cprodhomme I've do that, you can try again.

Clément Prod'homme · Answer 21 · Thu Apr 30 2020 16:40:25 GMT+0800 (China Standard Time)

same error :(

$ yarn publish
yarn publish v1.19.2
[1/4] Bumping version...
info Current version: 3.2.0
question New version: 
[2/4] Logging in...
[3/4] Publishing...
$ rm -rf src && cp -R app/assets/javascripts/arctic_admin src && cp -R app/assets/stylesheets/arctic_admin src/scss && cp -R app/assets/fonts src/fonts
error Couldn't publish package: "https://registry.npmjs.org/arctic_admin: ESOCKETTIMEDOUT"
info Visit https://yarnpkg.com/en/docs/cli/publish for documentation about this command.

Sean Deng · Answer 22 · Fri May 01 2020 10:32:45 GMT+0800 (China Standard Time)

same error :(

$ yarn publish
yarn publish v1.19.2
[1/4] Bumping version...
info Current version: 3.2.0
question New version: 
[2/4] Logging in...
[3/4] Publishing...
$ rm -rf src && cp -R app/assets/javascripts/arctic_admin src && cp -R app/assets/stylesheets/arctic_admin src/scss && cp -R app/assets/fonts src/fonts
error Couldn't publish package: "https://registry.npmjs.org/arctic_admin: ESOCKETTIMEDOUT"
info Visit https://yarnpkg.com/en/docs/cli/publish for documentation about this command.

How did you published the @cprodhomme/arctic_admin? When i've some problems with npm, i tried to backup ~/.npmrc and remove the file, it works for me.

Clément Prod'homme · Answer 23 · Sun May 03 2020 03:58:20 GMT+0800 (China Standard Time)

https://www.npmjs.com/package/arctic_admin 🎉

thanks all for your help !

i think i can close this issue :)

Orce Maceski · Answer 24 · Sun May 03 2020 04:22:36 GMT+0800 (China Standard Time)

Sorry, not part of this issue but Fontawesome Icons don't show up

Gijs Paulides · Answer 25 · Sun May 03 2020 15:47:38 GMT+0800 (China Standard Time)

Good stuff @cprodhomme @doabit ! I haven't had the chance to test the setup yet, but I will when I have time.

In the meantime this ticket is solved. Nice work and thanks!