There are many starter kits that will help you get started with React and Redux. This is the one created by, maintained by and used by Atomic Jolt. Atomic Jolt uses this as application as a starting place for Ruby on Rails applications that utilize React.
rails new my_app -m https://raw.githubusercontent.com/atomicjolt/landlord/master/template.rb
See Setting up React Rails Starter App below to configuration the application. Once setup Start Rails and the webpack server:
rails server
yarn hot
Rename .env.example to .env and configure it to your liking.
Note: the App and Assets subdomains must be different.
- Open application.rb and change
Landlordto the name you choose. - Do a global search and replace for
landlordand change it to the name you choose. - Do a global search and replace for
Landlord(use only letters or numbers for this name. Special characters like '_' will result in errors).
Rename config/secrets.example.yml to config/secrets.yml. Open the file and change each entry to values that are relevant for your application.
This file should not be committed to your repository.
You will need to request a Key ID and Secret from the desired provider.
This application requires:
- Ruby
- Rails
- PostGreSQL
- npm
- yarn
Learn more about Installing Rails.
Setup an admin user with:
$ rake db:setup
Oauth2 Redirect URI: https://Landlord.atomicjolt.xyz/auth/[provider]/callback
Icon URL: https://Landlord.atomicjolt.xyz/oauth_icon.png
Once your request is approved you will receive a Key and Secret. Add these credentials to config/secrets.yml and
then add those values to devise.rb. It will look something like this:
config.omniauth :github, Rails.application.secrets.github_developer_id, Rails.application.secrets.github_developer_key, scope: 'user,public_repo'
Webpack is used to build the client side applications. Configure the client applications in client/config/settings.js
An example 'hello_world' client application is provided in client/apps. Rename or copy and paste this directory to build additional client applications. The webpack build process will automatically pick up applications in this directory and generate an entry point for them. The resulting build will include a bundle that uses the directory name, a vendor and a manifest file. These are served by views/home/index.html.erb by default. If the application name is changed then be sure to also change the name in index.html.erb.
The React Rails Starter App uses React. All client side code can be found in the "client" directory. This project contains the code required to launch a React application. index.html.erb contains the following code which will launch a React application whose entry point is 'app.jsx'
<% content_for :head do -%>
<%= webpack_styles_tag 'styles' %>
<% end -%>
<%= render 'shared/default_client_settings' %>
<%= webpack_manifest_script %>
<div id="main-app"></div>
<%= webpack_bundle_tag 'app' %>
Any files added to the assets directory can be used by in code and assigned to a variable. This allows for referring to assets using dynamically generated strings. The assets will be built according to the rules specified in your webpack configuration. Typically, this means that in production the names will be changed to include a SHA.
First importing the assets:
import assets from '../libs/assets';
Then assign the assest to a variable:
const img = assets("./images/atomicjolt.jpg");
The value can then be used when rendering:
render(){ const img = assets("./images/atomicjolt.jpg"); return<div> <img src={img} /> </div>; }
Files added to the static directory will be copied directly into the build. These files will not be renamed.
Karma and Jasmine are used for testing. To run tests run:
yarn test
Inside the client directory run:
yarn upgrade-interactive
The following scripts are available for testing and building client applications
Run all tests:
yarn test
Generate coverage report:
yarn coverage
Run webpack hot reload server:
yarn hot
Run reload server for a specific application:
yarn hot [app name]
Serve production assets. Must run yarn build first:
yarn live
Build development version including html pages:
yarn build_dev
Only run the webpack build without generating html pages or subdirectories. This will output all results
directly into the build/dev directory
yarn build_dev_pack
Build for production:
yarn build
Only run the webpack build without generating html pages or subdirectories. This will output all results
directly into the build/prod directory
yarn build_pack
After setting up .s3-website.json this will create a S3 bucket and set it as a website:
yarn create
Release a production build to the S3 website bucket created by yarn create
yarn release
Run a linter over the project:
yarn lint
Make sure you have signed up for a heroku account Heroku. Then follow the instructions provided by Heroku to create your application.
Push secrets to production:
$ rake heroku:secrets RAILS_ENV=production
Deploy to Heroku:
$ git push heroku master
This application uses PostgreSQL with ActiveRecord.
You may need to install chromedriver if you haven't already.
$ brew install chromedriver
To run tests:
$ rake spec