{"id":14976468,"url":"https://github.com/the-teacher/gemsassetswebpackbridge","last_synced_at":"2025-10-27T20:31:46.247Z","repository":{"id":56873836,"uuid":"123716372","full_name":"the-teacher/GemsAssetsWebpackBridge","owner":"the-teacher","description":"It helps to build a bridge from ruby gems' assets to Webpack","archived":false,"fork":false,"pushed_at":"2022-11-30T09:36:09.000Z","size":12,"stargazers_count":22,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-30T08:56:21.333Z","etag":null,"topics":["assets","gems","rails","ruby","webpack","webpack3"],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/the-teacher.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-03T17:45:23.000Z","updated_at":"2024-03-20T17:59:50.000Z","dependencies_parsed_at":"2022-08-20T22:30:30.319Z","dependency_job_id":null,"html_url":"https://github.com/the-teacher/GemsAssetsWebpackBridge","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-teacher%2FGemsAssetsWebpackBridge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-teacher%2FGemsAssetsWebpackBridge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-teacher%2FGemsAssetsWebpackBridge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-teacher%2FGemsAssetsWebpackBridge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/the-teacher","download_url":"https://codeload.github.com/the-teacher/GemsAssetsWebpackBridge/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238553192,"owners_count":19491385,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["assets","gems","rails","ruby","webpack","webpack3"],"created_at":"2024-09-24T13:53:55.997Z","updated_at":"2025-10-27T20:31:40.968Z","avatar_url":"https://github.com/the-teacher.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GemsAssetsWebpackBridge\n\nThis Rails gem helps to build a bridge from assets in your ruby gems to [Webpack](https://webpack.js.org/).\n\n![pexels-photo-208684](https://user-images.githubusercontent.com/496713/36936816-18261a9c-1f1b-11e8-9c46-6b6d830fed2c.jpeg)\n\n## The Problem\n\n1. I had a classic monolith Rails application with Sprockets.\n2. I've split my Rails app into a few Rails gems and moved my assets into gems.\n3. I started migration from Sprockets to Webpack.\n4. Webpack didn't know how to find my assets in Rails gems.\n\n## The Solution\n\nThis gem helps to collect paths to assets' folders in gems and adds some [aliases](https://webpack.js.org/configuration/resolve/#resolve-alias) for Webpack to help it to find assets in classic Rails gems.\n\n## Installation\n\n**Gemfile**\n\n```ruby\ngem 'gems_assets_webpack_bridge'\n```\n\n```\n$ bundle\n```\n\n## Usage\n\nBuild a bridge between Rails gems and Webpack:\n\n```ruby\nrake gems_assets_webpack_bridge:build\n```\n\n### What is The Bridge?\n\n* The Bridge is a JSON file with paths to assets in your gems.\n* The Bridge provides additional [aliases](https://webpack.js.org/configuration/resolve/#resolve-alias) for Webpack to help it to find assets' folders in ruby gems.\n* Every alias has the following naming: `@[UNDERSCORED_GEM_NAME]-[ASSET_TYPE]`.\n* Default asset types are: `images`, `scripts`, `styles`.\n* By default the file has name `gems-assets-webpack-bridge.json` and looks like that:\n\n```json\n{\n  \"@crop_tool-scripts\": \"/Users/@username/.rvm/gems/ruby-2.4.2/gems/crop_tool/app/assets/javascripts\",\n  \"@crop_tool-styles\": \"/Users/@username/.rvm/gems/ruby-2.4.2/gems/crop_tool/app/assets/stylesheets\",\n  \"@jquery_ui_rails-images\": \"/Users/@username/.rvm/gems/ruby-2.3.3@open-cook.ru/gems/jquery-ui-rails-5.0.0/app/assets/images\",\n  \"@jquery_ui_rails-scripts\": \"/Users/@username/.rvm/gems/ruby-2.3.3@open-cook.ru/gems/jquery-ui-rails-5.0.0/app/assets/javascripts\",\n  \"@jquery_ui_rails-styles\": \"/Users/@username/.rvm/gems/ruby-2.3.3@open-cook.ru/gems/jquery-ui-rails-5.0.0/app/assets/stylesheets\",\n  \"@log_js-scripts\": \"/Users/@username/.rvm/gems/ruby-2.4.2/gems/log_js/app/assets/javascripts\",\n  \"@notifications-scripts\": \"/Users/@username/.rvm/gems/ruby-2.4.2/gems/notifications/app/assets/javascripts\",\n  \"@notifications-styles\": \"/Users/@username/.rvm/gems/ruby-2.4.2/gems/notifications/app/assets/stylesheets\",\n}\n```\n\n### How to use The Bridge?\n\nNow, when you have the bridge file, you can use it in Webpack like this:\n\n**webpack.config.js**\n\n```javascript\n// This helper-function reads the bridge file and\n// adds some additional aliases in `WebPackConfig.resolve.alias`\nfunction addGemsAssetsWebpackBridge (WebPackConfig) {\n  const alias = WebPackConfig.resolve.alias\n  const bridgeFile = `${rootPath}/gems-assets-webpack-bridge.json`\n\n  var bridgeAlias = JSON.parse(fs.readFileSync(bridgeFile, 'utf8'))\n  return Object.assign(alias, bridgeAlias)\n}\n\nlet WebpackConfig = {\n  entry: {\n    ...\n  },\n\n  output: {\n    ...\n  },\n\n  resolve : {\n    alias: {\n      '@vendors': `${rootPath}/assets/vendors`\n    }\n  }\n}\n\nWebPackConfig.resolve.alias = addGemsAssetsWebpackBridge(WebPackConfig)\nmodule.exports = WebPackConfig\n```\n\nAfter you added the aliases you can use them in your Webpack entries like this:\n\n```javascript\nrequire('@log_js-scripts/log_js')\nrequire('@notifications-scripts/notifications')\nrequire('@the_comments-scripts/the_comments')\n\nrequire('@notifications-styles/notifications')\nrequire('@the_comments-styles/the_comments')\n```\n\n### How can I configure this gem?\n\nYou can create a new initializer in your Rails app change options:\n\n**config/initializers/gems_assets_webpack_bridge.rb**\n\n```ruby\nGemsAssetsWebpackBridge.configure do |config|\n  # From a root of your Rails app\n  config.bridge_path = '/configs/gems-webpack-bridge.json'\n\n  #  From a root of every Rails gem\n  config.assets_types = {\n    # Default values\n    images: 'app/assets/images',\n    scripts: 'app/assets/javascripts',\n    styles: 'app/assets/stylesheets',\n\n    # Your custom values\n    vendor_select2_images: 'vendors/select2/images',\n  }\nend\n```\n\n### Should I add the bridge file in my VCS?\n\nNo. Paths will be different for different users. Just add `gems-assets-webpack-bridge.json` in your `.gitignore` and run `rake gems_asstes_webpack_bridge:build` when you need it.\n\n### Should I change my deployment process?\n\nYou have to run `rake gems_asstes_webpack_bridge:build` before every Webpack compilation during deployment. Otherwise Webpack will know nothing about aliases and a compilation won't work.\n\n### License\n\nThe gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n\n[Bridge image @ pexels.com](https://www.pexels.com/photo/architecture-autumn-blue-blue-sky-208684/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthe-teacher%2Fgemsassetswebpackbridge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthe-teacher%2Fgemsassetswebpackbridge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthe-teacher%2Fgemsassetswebpackbridge/lists"}