{"id":15667932,"url":"https://github.com/rupurt/webpack_on_rails","last_synced_at":"2025-05-06T19:48:52.379Z","repository":{"id":56897985,"uuid":"69287031","full_name":"rupurt/webpack_on_rails","owner":"rupurt","description":"Use the full power of Webpack within your Rails app with minimal configuration","archived":false,"fork":false,"pushed_at":"2017-03-02T04:48:48.000Z","size":12,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-28T22:46:09.943Z","etag":null,"topics":[],"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/rupurt.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":"2016-09-26T19:50:00.000Z","updated_at":"2018-04-30T20:45:07.000Z","dependencies_parsed_at":"2022-08-20T17:40:42.282Z","dependency_job_id":null,"html_url":"https://github.com/rupurt/webpack_on_rails","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rupurt%2Fwebpack_on_rails","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rupurt%2Fwebpack_on_rails/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rupurt%2Fwebpack_on_rails/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rupurt%2Fwebpack_on_rails/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rupurt","download_url":"https://codeload.github.com/rupurt/webpack_on_rails/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252758451,"owners_count":21799851,"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:52.187Z","updated_at":"2025-05-06T19:48:52.345Z","avatar_url":"https://github.com/rupurt.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebpackOnRails\n\nUse the full power of Webpack within your Rails app, leverage existing view \nhelpers like `javascript_include_tag` \u0026 `stylesheet_link_tag`\n\n## Installation\n\nAdd this line to your application's Gemfile:\n\n```ruby\ngem 'webpack_on_rails'\n```\n\nAnd then execute:\n\n    $ bundle\n\nOr install it yourself as:\n\n    $ gem install webpack_on_rails\n\nRun the install generator to create the Webpack configuration files and an empty \nWebpack entry\n\n```\nrails g webpack_on_rails:install\n```\n\nWhich creates the directory structure:\n\n+ `client/`\n  - `config/`\n      + `...`\n  + `entries/`\n      + `webpack-application`\n          + `index.js`\n  - `lib/`\n  - `package.json`\n\nInstall the node packages via:\n\n### yarn\n\n```\ncd client \u0026\u0026 yarn\n```\n\nor\n\n### npm\n\n```\ncd client \u0026\u0026 npm install\n```\n\n## Rails Template Usage\n\nReference your Webpack entry bundles using the standard Rails helpers\n\n```erb\n\u003c% # app/views/layouts/application.html.erb %\u003e\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003c%= stylesheet_link_tag \"webpack-application\", media: :all %\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c%= yield %\u003e\n\n    \u003c%= javascript_include_tag \"webpack-application\" %\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Usage\n\nIn development you can run Webpack in 2 modes:\n\n* `watch` - Recompiles on change, writes to disk, page refresh required to view changes\n* `devserver` - Recompiles on change, doesn't write files to disk, can automatically reload your changes\n\n### watch\n\nRun the build task and allow the build to finish. This will generate the manifest \nfile that sprockets uses to map logical paths `webpack-application.js` to file \nsystem paths `webpack-application-8f88619b6ef3a358a7ad.js` and write the build artifacts\nto `public/assets`.\n\n```\ncd client \u0026\u0026 yarn run build:dev\n```\n\nOnce the manifest has been generated start a Rails server.\n\n```\nrails s\n```\n\nUnfortunately sprockets doesn't currently support automatic reloading of the manifest \nfile when it changes. If you add or rename any bundles you will need to `spring stop` \nand restart the Rails server. If sprockets (or one of us :)) adds support for manifest \nreloading we would be able to enable asset fingerprints in development. Thus getting us \ncloser to replicating a production environment as we develop.\n\n### devserver\n\nDevserver can provide a faster and more efficient development workflow by hot \nreloading modules as they are recompiled.\n\nRun the server task and allow the build to finish. This will generate the manifest \nfile that sprockets uses to map logical paths `webpack-application.js` to file \nsystem paths `webpack-application-8f88619b6ef3a358a7ad.js`. Devserver writes the build \nartifacts to memory and serves them up via a node http server on `http://localhost:8080`\n\n```\ncd client \u0026\u0026 yarn run server\n```\n\nOnce the manifest has been generated start a Rails server and set the `ASSET_HOST` environment \nvariable to the devserver address.\n\n```\nASSET_HOST=http://localhost:8080 rails s\n```\n\n## Foreman \u0026 Invoker\n\nIf you would like to manage your processes in 1 command and load environment variables from a \nfile, take a look at the [foreman](https://github.com/theforeman/foreman) or [invoker](https://github.com/code-mancers/invoker) gems.\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## How Does It Work?\n\n[webpack-sprockets-rails-manifest-plugin](https://github.com/rupurt/webpack-sprockets-rails-manifest-plugin#how-does-it-work) \nhas a full description of the Webpack plugin\n\n## Development\n\nAfter checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.\n\nTo install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/rupurt/webpack_on_rails.\n\n## License\n\nThe gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frupurt%2Fwebpack_on_rails","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frupurt%2Fwebpack_on_rails","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frupurt%2Fwebpack_on_rails/lists"}