{"id":20477886,"url":"https://github.com/hung-phan/generator-rails-react-webpack","last_synced_at":"2025-07-06T00:38:11.312Z","repository":{"id":27725359,"uuid":"31212748","full_name":"hung-phan/generator-rails-react-webpack","owner":"hung-phan","description":"Integrate Ruby on Rails with React.js and Webpack","archived":false,"fork":false,"pushed_at":"2016-07-24T14:05:18.000Z","size":424,"stargazers_count":56,"open_issues_count":1,"forks_count":9,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-06T00:38:09.607Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hung-phan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-23T14:59:24.000Z","updated_at":"2023-06-19T00:36:35.000Z","dependencies_parsed_at":"2022-08-24T16:11:06.135Z","dependency_job_id":null,"html_url":"https://github.com/hung-phan/generator-rails-react-webpack","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/hung-phan/generator-rails-react-webpack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hung-phan%2Fgenerator-rails-react-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hung-phan%2Fgenerator-rails-react-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hung-phan%2Fgenerator-rails-react-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hung-phan%2Fgenerator-rails-react-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hung-phan","download_url":"https://codeload.github.com/hung-phan/generator-rails-react-webpack/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hung-phan%2Fgenerator-rails-react-webpack/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263832483,"owners_count":23517350,"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-11-15T15:34:04.962Z","updated_at":"2025-07-06T00:38:11.287Z","avatar_url":"https://github.com/hung-phan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# generator-rails-react-webpack\n\n\u003e [Yeoman](http://yeoman.io) generator\n\n[![NPM](https://nodei.co/npm/generator-rails-react-webpack.png?downloads=true)](https://nodei.co/npm/generator-rails-react-webpack/)\n\n## Related project - Consider using [koa-react-isomorphic](https://github.com/hung-phan/koa-react-isomorphic)\n\nConsider to see koa-react-isomorphic project for testing component and [Redux](https://github.com/rackt/redux) usage\n\n## Getting Started\n\nTo install `generator-rails-react-webpack` from npm, run:\n\n```bash\n$ npm install -g generator-rails-react-webpack\n```\n\n## Up and Running\n\nCreate Ruby on Rails project with normal `rails` command, but skip gem bundling:\n\n```bash\n$ rails new app-name --skip-bundle\n```\n\nThen, initiate the generator:\n\n```bash\n$ cd app-name\n$ yo rails-react-webpack\n```\n\nAnswer 'Yes' to all 'Overwrite' actions. Then, update 'config/database.yml' if you use different database than 'sqlite3'.\n\n## Application template\n\n### Javascript modules\n\nAll javascript modules are placed in `app/frontend/javascripts` folder, which will be compiled into `app/assets/javascript/build`\nfolder. In addition, `app/assets/javascript/build` is appended to `.gitignore` (Webpack built bundles will be ignored and rebuilt every deployment).\n\nControl your application assets via [webpack](http://webpack.github.io/docs/) or [sprockets](https://github.com/sstephenson/sprockets).\nHowever, for javascript files, prefer `webpack` over `sprockets` for the reason that those will run through loaders before getting\nserve at the browser.\n\n### package.json\n\nManage built tools and application dependencies\n\n### Webpack\n\n- `config.json`: loads additional configurations into `javascript-build.js` via `config = require('./config.json');`\n\n  ```json\n    {\n      \"webpack\": {\n        \"path\": \"./app/frontend/javascripts/\",\n        \"test\": \"./__tests__/**/*-test.js\",\n        \"build\": \"./app/assets/javascripts/build\"\n      }\n    }\n  ```\n\n### Code splitting\n\nRefer to [webpack code spliting](http://webpack.github.io/docs/code-splitting.html) for detail implementations.\nBundles are created by `require` or `require.ensure` will be automatically loaded. Additionally, all the settings in\n`devlopment.config.js` and `production.config.js` for `optimizing common chunk` have been added to config files.\n\n```javascript\n  new webpack.optimize.CommonsChunkPlugin('common', 'common.js'), // development.config.js\n  new webpack.optimize.CommonsChunkPlugin('common', 'common-[chunkhash].bundle.js'), // production.config.js\n```\n\nUncomment those and add this tag `\u003c%= webpack_bundle_tag 'common.js' %\u003e` before your main bundle in your layout:\n\n```\n\u003c%= webpack_bundle_tag 'common.js' %\u003e\n\u003c%= webpack_bundle_tag 'main.js' %\u003e\n```\n\n### Available gulp task\n\n```bash\n$ gulp clean # remove the build folder placed at 'app/assets/javascripts/build'\n$ gulp build # should use this for testing only, please read Assets compile\n```\n\n## Start developing\n\nRun these commands, and start coding\n\n```bash\n$ npm run dev\n$ rails server\n```\n\n## Assets compile\n```bash\n$ rake assets:precompile RAILS_ENV=production\n```\n\n## Heroku deploy\nConfigure Heroku to use `ddollar's multi-buildpack`:\n\n```bash\n$ heroku config:add BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-multi.git\n```\n\nAdd the `heroku-nodejs buildpack` and `heroku-ruby buildpack` to .buildpacks:\n\n```\n$ cat .buildpacks\nhttps://github.com/heroku/heroku-buildpack-nodejs\nhttps://github.com/heroku/heroku-buildpack-ruby\n```\n\n## Options\n\nName: mongoid (for mongodb)\n\nadd `--skip-active-record` option to your `rails new app --skip-active-record` command before selecting this option.\n\n## Task\n\n## Enable flowtype in development\n```bash\n$ npm run flow:watch\n$ npm run flow:stop # to terminate the server\n```\n\n## Testing\nTest files are placed in the same folder with component.\n\n```\n▾ home/\n    home-test.js\n    home.js\n```\n\n```bash\nnpm test # unit test\n```\n\n```bash\nnpm run test:converage # generate test coverage using istanbul\n```\n\nYou need to add annotation to the file to enable flowtype (`// @flow`)\n\n## Structure\n\n```\napplication/\n  |- app/\n  |  |- apis/\n  |  |  |- v1/\n  |  |  |  |- base.rb\n  |  |  |  |- person_api.rb\n  |  |  |- base.rb\n  |  |- assets/\n  |  |  |- images/\n  |  |  |- javascripts/\n  |  |  |  |- build/\n  |  |  |  |  |- page-module.bundle.js\n  |  |  |  |- application.js\n  |  |  |- stylesheets/\n  |  |  |  |- application.css\n  |  |- frontend/\n  |  |  |- javascripts/\n  |  |  |  |- \u003cpage-module-dependencies\u003e/\n  |  |  |  |- \u003cpage-module\u003e.js\n  |  |- controllers/\n  |  |- helpers/\n  |  |- mailers/\n  |  |- models/\n  |  |- views/\n  |  |  |- application/\n  |  |  |  |- index.html # default template for the application\n  |  |  |- layouts/\n  |  |  |  |- application.html.erb\n  |- bin/\n  |- config/\n  |  |- initializers/\n  |  |  |- *.rb\n  |  |  |- webpack.rb # webpack manifest config\n  |  |- webpack/\n  |  |  |- config.json\n  |  |  |- default.config.js\n  |  |  |- development.config.js\n  |  |  |- javascript-build.js\n  |  |  |- production.config.js\n  |- db/\n  |- lib/\n  |  |- assets/\n  |  |- tasks/\n  |  |  |- webpack.rake # built task\n  |- log/\n  |- public/\n  |- test/\n  |- config.ru\n  |- gulpfile.js\n  |- package.json\n  |- config.ru\n  |- Gemfile\n  |- Gemfile.lock\n  |- Rakefile\n  |- README.rdoc\n```\n## Changelog\n0.3 -\u003e 0.4: Add [babel-plugin-typecheck](https://github.com/codemix/babel-plugin-typecheck), fixed redundant event listeners from\n`dev-server` and `only-dev-server`, and update code to es6\n\n## Acknowledgement\n\nThanks Dave Clark for this wonderful [post](http://clarkdave.net/2015/01/how-to-use-webpack-with-rails/)\n\n## Example project\n\n- [rails-react-webpack](https://github.com/hung-phan/rails-react-webpack)\n\n## Running example\n\n![alt text](https://raw.githubusercontent.com/hung-phan/generator-rails-react-webpack/master/screenshot.png \"application screenshot\")\n\n## Contribution\n\nAll contributions are welcomed.\n\n## License\n\n[MIT License](http://en.wikipedia.org/wiki/MIT_License)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhung-phan%2Fgenerator-rails-react-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhung-phan%2Fgenerator-rails-react-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhung-phan%2Fgenerator-rails-react-webpack/lists"}