README.md in quilt_rails-1.2.0 vs README.md in quilt_rails-1.3.1

- old
+ new

@@ -4,17 +4,24 @@ This document focuses on Rails integration. For details of `@shopify/react-server`'s configuration and usage, see the [react-server documentation](/packages/react-server/README.md). ## Quick Start -Create a Rails project using `dev init` then: +### Add Ruby dependencies +`bundle add sewing_kit quilt_rails` + +First, create a Rails project using `dev init`. Next, run `rails generate quilt:install`. This will install the Node dependencies, provide a basic React app (in TypeScript) and mounts the Quilt engine inside of your `config/routes.rb` file. + +## Manual Installation + +You can also perform the steps within the rake task manually by following the guide below. + ### Install Dependencies ```sh -# Add Ruby/Node dependencies -bundle add sewing_kit quilt_rails +# Add Node dependencies yarn add @shopify/sewing-kit @shopify/react-server # Optional - add Polaris and quilt libraries yarn add @shopify/polaris @shopify/react-self-serializers react react-dom @@ -24,12 +31,38 @@ ### Add JavaScript sewing_kit looks for JavaScript in `app/ui/index.js`. The code in `index.js` (and any imported JS/CSS) will be built into a `main` bundle. -### Setup your react controller and routes +### Rails Setup +There are 2 ways to consume this package. + +### Option 1: Mount the Engine + +Add the engine to `routes.rb`. + +```ruby +# config/routes.rb +Rails.application.routes.draw do + # ... + mount Quilt::Engine, at: '/' +end +``` + +Where `at` is the path where your App will respond with the React App. If you only want a sub-section of routes to respond with the React App, you can pass in the path to that sub-section here. For example: + +```ruby +# config/routes.rb +Rails.application.routes.draw do + # ... + mount Quilt::Engine, at: '/path/to/react' +end +``` + +### Option 2: Add your react controller and routes + Create a `ReactController` to handle react requests. ```ruby class ReactController < ApplicationController include Quilt::ReactRenderable @@ -78,5 +111,15 @@ ); } export default App; ``` + +## Rails Generators' + +### `quilt:install` + +Installs the Node dependencies, provide a basic React app (in TypeScript) and mounts the Quilt engine inside of your `config/routes.rb` file. + +### `sewing-kit:install` + +Adds a basic `sewing-kit.config.ts` file.