{"id":15667902,"url":"https://github.com/rupurt/webpack-sprockets-rails-manifest-plugin","last_synced_at":"2025-05-05T23:45:08.933Z","repository":{"id":65379370,"uuid":"67624687","full_name":"rupurt/webpack-sprockets-rails-manifest-plugin","owner":"rupurt","description":"Allow Sprockets to load files from a Webpack build","archived":false,"fork":false,"pushed_at":"2023-09-11T14:28:37.000Z","size":15,"stargazers_count":11,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-17T18:34:29.387Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/rupurt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-09-07T16:29:27.000Z","updated_at":"2020-12-10T18:38:13.000Z","dependencies_parsed_at":"2024-10-03T14:05:50.931Z","dependency_job_id":"ec2ce2bb-8db6-4313-94cc-5de1dc7e4c54","html_url":"https://github.com/rupurt/webpack-sprockets-rails-manifest-plugin","commit_stats":{"total_commits":23,"total_committers":3,"mean_commits":7.666666666666667,"dds":0.08695652173913049,"last_synced_commit":"1ca3791b23e821245f9af0a39730dbbba0a00740"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rupurt%2Fwebpack-sprockets-rails-manifest-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rupurt%2Fwebpack-sprockets-rails-manifest-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rupurt%2Fwebpack-sprockets-rails-manifest-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rupurt%2Fwebpack-sprockets-rails-manifest-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rupurt","download_url":"https://codeload.github.com/rupurt/webpack-sprockets-rails-manifest-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252596325,"owners_count":21773842,"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":[],"created_at":"2024-10-03T14:05:47.288Z","updated_at":"2025-05-05T23:45:08.915Z","avatar_url":"https://github.com/rupurt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Webpack Sprockets Rails Manifest Plugin\n=======================================\n\nA Webpack plugin that allows [`sprockets-rails`](https://github.com/rails/sprockets-rails) \nto find static assets from a Webpack build without requiring them in sprockets directives. \nWe can leverage standard Rails view helpers (i.e. `javascript_include_tag`, `stylesheet_link_tag`) \nto load artifacts supporting finger printing and prepended host urls.\n\n## Rails Gem\n\nTo automatically create the recommended configuration install the [`webpack_on_rails`](https://github.com/rupurt/webpack-sprockets-rails-manifest-plugin) \ngem and run the `webpack_on_rails:install` generator.\n\n## Manual Install\n\n### yarn\n\n```bash\nyarn add webpack-sprockets-rails-manifest-plugin\n```\n\n### npm\n\n```bash\nnpm install webpack-sprockets-rails-manifest-plugin --save\n```\n\n## Usage\n\n```ruby\n# config/initializers/assets.rb\n# Avoid creating the manifest file in public/assets as it can be downloaded by anyone\nRails.configuration.assets.manifest = Rails.root.join(\"config\", \"sprockets-manifest.json\")\n```\n\n```ruby\n# config/environments/development.rb\nconfig.assets.debug = false\n```\n\n```erb\n\u003c% # app/views/layouts/application.html.erb %\u003e\n\u003c% # Use rails helpers in the same way you normally would with sprockets %\u003e\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\u003c/head\u003e\n  \u003cbody\u003e\n    \u003c%= javascript_include_tag \"webpack-application-bundle\" %\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n```javascript\n// client/bundles/webpack-application.js\nalert(\"Howdy, Webpack is working!\");\n```\n\n```javascript\n// client/webpack.config.js\nvar path = require(\"path\");\nvar WebpackSprocketsRailsManifestPlugin = require(\"webpack-sprockets-rails-manifest-plugin\");\n\nvar config = {\n  context: __dirname,\n\n  entry: {\n    \"webpack-application-bundle\": \"./bundles/webpack-application\"\n  },\n\n  output: {\n    path: path.resolve(__dirname, \"../public/assets\"),\n    filename: \"[name]-[chunkhash].js\"\n  },\n\n  // Other config ...\n\n  plugins: [\n    new WebpackSprocketsRailsManifestPlugin({\n      // [optional] this is the default location relative to the output directory \n      // that the assets will be built. e.g `public/assets`\n      manifestFile: \"../../config/sprockets-manifest.json\"\n    })\n  ]\n};\n\nmodule.exports = config;\n```\n\n## Heroku\n\nFollow the [instructions](https://devcenter.heroku.com/articles/nodejs-support) \nto install the ruby and node multi-buildpack. \n\nCreate a `package.json` file in the root of the rails project.\n\n```json\n{\n  \"name\": \"MyProject\",\n  \"version\": \"1.0.0\",\n  \"description\": \"A description of MyProject\",\n  \"main\": \"index.js\",\n  \"cacheDirectories\": [\n    \"client/node_modules\"\n  ],\n  \"scripts\": {\n    \"preinstall\": \"cd client \u0026\u0026 npm install\",\n    \"postinstall\": \"cd client \u0026\u0026 npm run build\"\n  }\n}\n```\n\n## Hot Module Replacement\n\nRails provides us with the ability prepend a host to our asset paths generated by\nthe Rails view helpers. This option is normally configured for production environments\nbut we can use it in development to load assets from `webpack-dev-server` instead of \npublic.\n\n```sh\nexport ASSET_HOST=http://localhost:8080\n```\n\n```ruby\n# config/application.rb\n# ...\n\nif ENV[\"ASSET_HOST\"].present?\n  Rails.application.config.action_controller.asset_host = proc { |source, _request|\n    ENV[\"ASSET_HOST\"]\n  }\nend\n```\n\n## Gradually Replacing the Asset Pipeline with Webpack\n\nThe Webpack ecosystem works best when it controls a whole subpath. For greenfield \nprojects this is easy to achieve. However if you're running a legacy Rails app, don't\nfret! Webpack can copy build files into a location so that they can be required via \nsprockets directives. We recommend using this technique when you're just getting started,\nbut the end goal should be to have Webpack completely control the build process \nof your static assets. For more information and setup instructions check out the\nseparate plugin [`webpack-copy-after-build-plugin`](https://github.com/rupurt/webpack-copy-after-build-plugin).\n\n## How Does It Work?\n\n`sprockets-rails` provides two strategies to map logical paths (`webpack-application.js`) \nto file system paths (`webpack-application-8f88619b6ef3a358a7ad.js`). By using the \n`manifest` strategy we can load finger printed static assets via the existing \nview helpers (i.e. `javascript_include_tag`, `stylesheet_link_tag`).\n\n#### Environment\n\nSearches the default sprockets directory for a file type manifest. By default \nthis is only enabled in the `dev` and `test` environments e.g.\n\n```javascript\n// app/assets/javascripts/application.js\n//= require_self\nalert(\"Hi, I'm a Javascript manifest in the default Sprockets Asset Pipeline\");\n```\n\n#### Manifest\n\nA json file which stores a mapping between a compiled asset and the original \nlogical path, along with meta information such as size, creation time and \nintegrity hash. `webpack-sprockets-rails-manifest-plugin` uses this manifest file\nto make `sprockets-rails` aware of the files and meta information in the \n`webpack` build. Since Rails 3.x `sprockets-rails` writes it's manifest file to \na dynamic location using a randomly generated filename (e.g. `public/assets/.sprockets-manifest-b4b2e3829c91f2f867c051a855232bed.json`).\nTo get `sprockets-rails` and `webpack` talking to each other we need to \nconfigure `sprockets-rails` to write it's manifest file to a static location \nthat `webpack` knows about.\n\nIf `Rails.configuration.assets.debug = false` the asset pipeline will check the \nmanifest first, if an entry can't be found, it falls back and checks the file \nsystem through the environment strategy.\n\n## Examples\n\nHead over to [https://github.com/rupurt/react_on_rails_simplified_configuration_examples](https://github.com/rupurt/react_on_rails_simplified_configuration_examples)\nfor examples on how to configure:\n\n* Greenfield Rails projects\n* Legacy Rails projects\n* Hot Module Replacement\n\n## TODO\n* [x] - support webpack-dev-server\n* [x] - gradual migration documentation\n* [x] - sample projects\n* [x] - Rails gem\n* [ ] - tests\n* [ ] - [`script` integrity](https://w3c.github.io/webappsec-subresource-integrity)\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frupurt%2Fwebpack-sprockets-rails-manifest-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frupurt%2Fwebpack-sprockets-rails-manifest-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frupurt%2Fwebpack-sprockets-rails-manifest-plugin/lists"}