{"id":13819033,"url":"https://github.com/atomicjolt/react_rails_starter_app","last_synced_at":"2026-02-19T23:48:06.446Z","repository":{"id":2409275,"uuid":"41841133","full_name":"atomicjolt/react_rails_starter_app","owner":"atomicjolt","description":"React with Rails using Webpack","archived":false,"fork":false,"pushed_at":"2023-01-19T10:59:32.000Z","size":5639,"stargazers_count":45,"open_issues_count":33,"forks_count":10,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-08-05T08:07:31.670Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/atomicjolt.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}},"created_at":"2015-09-03T03:59:05.000Z","updated_at":"2022-05-10T17:22:54.000Z","dependencies_parsed_at":"2023-02-10T22:45:16.048Z","dependency_job_id":null,"html_url":"https://github.com/atomicjolt/react_rails_starter_app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicjolt%2Freact_rails_starter_app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicjolt%2Freact_rails_starter_app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicjolt%2Freact_rails_starter_app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicjolt%2Freact_rails_starter_app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atomicjolt","download_url":"https://codeload.github.com/atomicjolt/react_rails_starter_app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225405501,"owners_count":17469348,"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-08-04T08:00:38.288Z","updated_at":"2024-11-19T18:30:56.933Z","avatar_url":"https://github.com/atomicjolt.png","language":"Ruby","funding_links":[],"categories":["Happy Exploring 🤘"],"sub_categories":[],"readme":"# React Rails Starter App [![Build Status](https://travis-ci.org/atomicjolt/react_client_starter_app.svg?branch=master)](https://travis-ci.org/atomicjolt/react_client_starter_app) [![Coverage Status](https://coveralls.io/repos/github/atomicjolt/react_rails_starter_app/badge.svg?branch=master)](https://coveralls.io/github/atomicjolt/react_rails_starter_app?branch=master)\n-----------------------\nThere are many starter kits that will help you get started with React and Redux.\nThis is the one created by, maintained by and used by [Atomic Jolt](http://www.atomicjolt.com).\nAtomic Jolt uses this as application as a starting place for Ruby on Rails applications that\nutilize React.\n\n## Build a new application using the React Rails Starter App Rails application template:\n-----------\nrails new my_app -m https://raw.githubusercontent.com/atomicjolt/react_rails_starter_app/master/template.rb\n\n## Running React Rails Starter App\n-----------\nSee [Setting up React Rails Starter App](#setup) below to configuration the application.\nOnce setup Start Rails and the webpack server:\n\n```\n  rails server\n  yarn hot\n```\n\n## \u003ca name=\"setup\"\u003e\u003c/a\u003eSetting up React Rails Starter App\n-----------\n\n### File Modifications\n-----------\n\n#### Setup .env\n-----------\nRename `.env.example` to `.env` and configure it to your liking.\n\nNote: the App and Assets subdomains must be different.\n\n#### Modify application name\n-----------\n1. Open application.rb and change `reactrailsstarterapp` to the name you choose.\n2. Do a global search and replace for `react_rails_starter_app` and change it to the name you choose.\n3. Do a global search and replace for `reactrailsstarterapp` (use only letters or numbers for this name. Special characters like '_' will result in errors).\n\n#### Secrets file\n-----------\nRename `config/secrets.example.yml` to `config/secrets.yml`. Open the file and change each entry to values that are relevant for your application.\n\n*This file should not be committed to your repository.*\n\nYou will need to [request a Key ID and Secret from the desired provider](#developer_key).\n\n### Project Dependencies\n-----------\n\n#### Requirements\n-----------\nThis application requires:\n\n-   Ruby\n-   Rails\n-   PostGreSQL\n-   npm\n-   yarn\n\nLearn more about [Installing Rails](http://railsapps.github.io/installing-rails.html).\n\n### \u003ca name=\"seeds\"\u003e\u003c/a\u003eSetting up Database\n-----------\nSetup an admin user with:\n```\n$ rake db:setup\n```\n\n### \u003ca name=\"developer_key\"\u003e\u003c/a\u003eSetting up OAuth\n-----------\n**Oauth2 Redirect URI:**\nhttps://reactrailsstarterapp.atomicjolt.xyz/auth/[provider]/callback\n\n**Icon URL:**\nhttps://reactrailsstarterapp.atomicjolt.xyz/oauth_icon.png\n\nOnce your request is approved you will receive a Key and Secret. Add these credentials to `config/secrets.yml` and\nthen add those values to devise.rb. It will look something like this:\n\nconfig.omniauth :github, Rails.application.secrets.github_developer_id, Rails.application.secrets.github_developer_key, scope: 'user,public_repo'\n\n## Development\n-----------\n\n### Versions\n-----------\nWe follow some conservative rules:\n\n  1. Use what’s packaged by Debian/Ubuntu, whenever possible, except for Gems and NPM packages.\n  2. For software not packaged by Debian/Ubuntu, use the oldest version that still receives security updates.\n  3. Gems and NPM packages may use the newest version, as long as doing so does\n  not conflict with other software adhering to the previous two rules.\n\n### Client\n-----------\n\n#### Webpack\n-----------\nWebpack is used to build the client side applications. Configure the client applications in client/config/settings.js\n\n#### Structure\n-----------\nAn example 'hello_world' client application is provided in client/apps. Rename or copy and paste this directory\nto build additional client applications. The webpack build process will automatically pick up applications\nin this directory and generate an entry point for them. The resulting build will include a bundle that uses the\ndirectory name, a vendor and a manifest file. These are served by views/home/index.html.erb by default. If the\napplication name is changed then be sure to also change the name in index.html.erb.\n\n#### React\n-----------\nThe React Rails Starter App uses React. All client side code can be found in the \"client\" directory.\nThis project contains the code required to launch a React application. index.html.erb contains the following\ncode which will launch a React application whose entry point is 'app.jsx'\n\n```\n\u003c% content_for :head do -%\u003e\n  \u003c%= webpack_styles_tag 'styles' %\u003e\n\u003c% end -%\u003e\n\n\u003c%= render 'shared/default_client_settings' %\u003e\n\u003c%= webpack_manifest_script %\u003e\n\u003cdiv id=\"main-app\"\u003e\u003c/div\u003e\n\u003c%= webpack_bundle_tag 'app' %\u003e\n```\n\n##### Custom Build Settings\n-----------\nDefault build settings can be overridden by adding an options.json file to the application directory.\n\n###### Options:\n-----------\n* outName - Change the output directory for an application by specifying \"outName\" which will override the default name\nused when generating a path.\n* port - Hard code a port for the application to run. Typically, you won't need to set this value as the build process\nwill calculate one for you.\n* onlyPack - If true don't generate html files. Instead, only run the webpack process and output the resulting files.\n* noClean - If true then don't delete files before starting a new build.\n* rootOutput - Dump the application directly into the root directory.\n\nExample options.json\n`\n{\n  \"outName\": \"hello_world\",\n  \"port\": 8080,\n  \"onlyPack\": true,\n  \"noClean\": false,\n  \"rootOutput\": false,\n  \"codeSplittingOff\": true, // Turn off code splitting\n  \"extractCssOff\": true     // Turn off css extraction\n}\n`\n\nBy default app.jsx is used as the webpack entry point. This can be overriden in webpack.json. Change the buildSuffix,\nfilename, chunkFilename and other settings:\n\nIn webpack.json\n`\n{\n  \"file\": \"app.js\",         // The webpack entry. Default is app.jsx\n  \"buildSuffix\": \".js\",     // Change the build suffix. Default is _bundle.js\n  \"filename\": \"[name]\",     // Change the output file name. Default is based on production/development\n  \"chunkFilename\": \"[id]\",  // Change the chunkFilename. Default is based on production/development\n}\n`\n\n#### Assets\n-----------\nAny files added to the assets directory can be used by in code and assigned to a variable. This\nallows for referring to assets using dynamically generated strings. The assets will be built according to\nthe rules specified in your webpack configuration. Typically, this means that in production the names will\nbe changed to include a SHA.\n\nFirst importing the assets:\n  `import assets from '../libs/assets';`\n\nThen assign the assest to a variable:\n  `const img = assets(\"./images/atomicjolt.jpg\");`\n\nThe value can then be used when rendering:\n  `render(){\n    const img = assets(\"./images/atomicjolt.jpg\");\n    return\u003cdiv\u003e\n    \u003cimg src={img} /\u003e\n    \u003c/div\u003e;\n  }`\n\n\n#### Static\n-----------\nFiles added to the static directory will be copied directly into the build. These files will not be renamed.\n\n\n#### Tests\n-----------\nKarma and Jasmine are used for testing. To run tests run:\n  `yarn test`\n\n#### Check for updates\n-----------\nInside the client directory run:\n\n  `yarn upgrade-interactive`\n\n\n#### Scripts:\n-----------------------\nThe following scripts are available for testing and building client applications\n\nRun all tests:\n  `yarn test`\n\nGenerate coverage report:\n  `yarn coverage`\n\nRun webpack hot reload server:\n  `yarn hot`\n\nRun reload server for a specific application:\n  `yarn hot [app name]`\n\nServe production assets. Must run `yarn build` first:\n  `yarn live`\n\nBuild development version including html pages:\n  `yarn build_dev`\n\nOnly run the webpack build without generating html pages or subdirectories. This will output all results\ndirectly into the build/dev directory\n  `yarn build_dev_pack`\n\nBuild for production:\n  `yarn build`\n\nOnly run the webpack build without generating html pages or subdirectories. This will output all results\ndirectly into the build/prod directory\n  `yarn build_pack`\n\nAfter setting up .s3-website.json this will create a S3 bucket and set it as a website:\n  `yarn create`\n\nRelease a production build to the S3 website bucket created by `yarn create`\n  `yarn release`\n\nRun a linter over the project:\n  `yarn lint`\n\nWipe out all node modules:\n  `yarn nuke`\n\n## Deployment\n-----------\n\n### Heroku\n-----------\n\nMake sure you have signed up for a heroku account [Heroku](http://www.heroku.com). Then follow the instructions provided by Heroku to create your application.\n\nPush secrets to production:\n```\n$ rake heroku:secrets RAILS_ENV=production\n```\n\nDeploy to Heroku:\n```\n$ git push heroku master\n```\n\n## Database\n-----------\nThis application uses PostgreSQL with ActiveRecord.\n\nIf you run into an error while installing the pg gem try including the path to pg_config. For an example see\nthe command below. Be sure to use the correct version for the pg gem and the correct path to pg_config.\n\n  `gem install pg -v '1.2.2' --source 'https://rubygems.org/' -- --with-pg-config=/Users/jbasdf/.asdf/installs/postgres/9.5.19/bin/pg_config`\n\n## Tests\n-----------\nYou may need to install chromedriver if you haven't already.\n\n```\n$ brew install chromedriver\n```\n\nTo run tests:\n\n```\n$ rake spec\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomicjolt%2Freact_rails_starter_app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatomicjolt%2Freact_rails_starter_app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomicjolt%2Freact_rails_starter_app/lists"}