README.md in quilt_rails-3.0.0 vs README.md in quilt_rails-3.1.0
- old
+ new
@@ -21,25 +21,20 @@
- [Performance tracking a React app](#performance-tracking-a-react-app)
- [API](#api)
## Server-side-rendering
-🗒 This guide is focused on internal Shopify developers with access to [`dev`](https://github.com/Shopify/dev) and [@shopify/sewing-kit](https://github.com/Shopify/sewing-kit). A similar setup can be achieved using the [manual installation](./docs/manual-installation.md) , and following the [react-server webpack plugin](../../packages/react-server/README.md#webpack-plugin) guide. Apps not running on Shopify infrastructure should [disable server-side GraphQL queries](./docs/FAQ.md) to avoid scalability issue.
+🗒 This guide is focused on internal Shopify developers with access [@shopify/sewing-kit](https://github.com/Shopify/sewing-kit). A similar setup can be achieved using the [manual installation](./docs/manual-installation.md) , and following the [react-server webpack plugin](../../packages/react-server/README.md#webpack-plugin) guide. Apps not running on Shopify infrastructure should [disable server-side GraphQL queries](./docs/FAQ.md) to avoid scalability issue.
### Quick start
Using the magic of generators, we can spin up a basic app with a few console commands.
#### Generate Rails boilerplate
-With access to [`dev`](https://github.com/Shopify/dev), you can use `dev init` to scaffold out a Rails application.
-When prompted, choose `rails`. This will generate a basic Rails application scaffold.
+Use [`rails new . --skip-javascript`](https://guides.rubyonrails.org/command_line.html#rails-new) to scaffold out a Rails application.to do the same.
-Alternatively, you can use [`rails new .`](https://guides.rubyonrails.org/command_line.html#rails-new) to do the same.
-
-In either case, remove [`webpacker`](./docs/FAQ.md#i-run-into-webpacker-issue-while-setting-up-quilt_rails) and [these files](./docs/FAQ.md#any-other-files-i-should-remove-before-running-generator) that any create conflict before continuing.
-
#### Add Ruby dependencies
`bundle add sewing_kit quilt_rails`
This will install our ruby dependencies and update the project's gemfile.
@@ -48,19 +43,20 @@
`rails generate sewing_kit:install`
This will generate a package.json file with common sewing-kit script tasks, default lint, format configuration; a sewing-kit configuration file, and other project default configurations.
-`rails generate quilt:install`
+`rails generate quilt::install_demo_app`
-This will install Node dependencies, provide a basic React app (in TypeScript), and mount the Quilt engine in `config/routes.rb`. Basic linting and format configurations are also generated.
+Both command will install Node dependencies, mount the Quilt engine in `config/routes.rb`, set up basic linting and format configurations, and provide a demo React app (in TypeScript) that uses all of quilt toolings and is a more complete example of a typical application.
+If you prefer to setup all of the React app yourself, `rails generate quilt:install` does the same as above but with a bare bone React app.
+
#### Try it out
```sh
-dev up
-dev server
+bin/rails server
```
Will run the application, starting up both servers and compiling assets.
### Manual installation
@@ -149,10 +145,12 @@
render_react(headers: {'x-custom-header': 'header-value-a'})
end
end
```
+🗒️ if you don't have a controller. Follow the [instruction](./docs/manual-installation#add-a-react-controller-and-routes) to setup `quilt_rails` in a controller instead of using the engine.
+
Headers can be accessed during server-side-rendering with the `useRequestHeader` hook from `@shopify/react-network`.
```tsx
// app/ui/index.tsx
@@ -181,12 +179,14 @@
render_react(data: {'some_id': 123})
end
end
```
-If using the webpack plugin, this will be automatically passed into your application as the `data` prop.
+🗒️ if you don't have a controller. Follow the [instruction](./docs/manual-installation#add-a-react-controller-and-routes) to setup `quilt_rails` in a controller instead of using the engine.
+If using `react-server` without a customized server & client file, this will be automatically passed into your application as the `data` prop. If `react-server` is not being used or a customized server / client file was provided, check out [`react-server/webpack-plugin`](../../packages/react-server/src/webpack-plugin/webpack-plugin.ts) on how to pass the data to React.
+
```tsx
// app/ui/index.tsx
import React from 'react';
@@ -220,11 +220,11 @@
#### Isomorphic state
With SSR enabled React apps, state must be serialized on the server and deserialized on the client to keep it consistent. When using `@shopify/react-server`, the best tool for this job is [`@shopify/react-html`](https://github.com/Shopify/quilt/tree/master/packages/react-html)'s [`useSerialized`](https://github.com/Shopify/quilt/tree/master/packages/react-html#in-your-application-code) hook.
-`useSerialized` can be used to implement [universal-providers](https://github.com/Shopify/quilt/tree/master/packages/react-universal-provider#what-is-a-universal-provider-), allowing application code to manage what is persisted between the server and client without adding any custom code to client or server entrypoints. We offer some for common use cases such as [CSRF](https://github.com/Shopify/quilt/tree/master/packages/react-csrf-universal-provider), [GraphQL](https://github.com/Shopify/quilt/tree/master/packages/react-graphql-universal-provider), [I18n](https://github.com/Shopify/quilt/tree/master/packages/react-i18n-universal-provider), and the [Shopify App Bridge](https://github.com/Shopify/quilt/tree/master/packages/react-app-bridge-universal-provider).
+`useSerialized` can be used to implement [universal-providers](https://github.com/Shopify/quilt/tree/master/packages/react-universal-provider#what-is-a-universal-provider-), allowing application code to manage what is persisted between the server and client without adding any custom code to client or server entrypoints. We offer some for common use cases such as [GraphQL](https://github.com/Shopify/quilt/tree/master/packages/react-graphql-universal-provider), and [I18n](https://github.com/Shopify/quilt/tree/master/packages/react-i18n-universal-provider).
#### Customizing the Node server
By default, sewing-kit bundles in [`@shopify/react-server/webpack-plugin`](../../packages/react-server/README.md#webpack-plugin) for `quilt_rails` applications to get apps up and running fast without needing to manually write any Node server code.
@@ -242,10 +242,14 @@
When a React component sends HTTP requests back to a Rails endpoint (e.g., `/graphql`), Rails may throw a `Can't verify CSRF token authenticity` exception. This stems from the Rails CSRF tokens not persisting until after the first `UiController` call ends.
If your API **does not** require session data, the easiest way to deal with this is to use `protect_from_forgery with: :null_session`. This will work for APIs that either have no authentication requirements, or use header based authentication.
+While `Can't verify CSRF token authenticity` error will persist, `protect_from_forgery with: :null_session` will keep CSRF protection while ensuring the session is nullified when a token is not sent in to be more secure.
+
+You can also add `self.log_warning_on_csrf_failure = false` to the controller to suppress this error all together.
+
##### Example
```rb
class GraphqlController < ApplicationController
protect_from_forgery with: :null_session
@@ -261,10 +265,10 @@
```
If your API **does** require session data, you can follow these steps:
- Add an `x-shopify-react-xhr` header to all GraphQL requests with a value of 1 (this is done automatically if you are using `@shopify/react-graphql-universal-provider`)
-- Add a `protect_from_forgery with: Quilt::HeaderCsrfStrategy` override to your controllers
+- Add a `protect_from_forgery with: Quilt::HeaderCsrfStrategy` override to your API controllers
##### Example
```rb
class GraphqlController < ApplicationController