Skip to content
This repository has been archived by the owner on Oct 1, 2024. It is now read-only.

🔥 remove the mentioned of locale from quilt_rails and link the exampl… #1300

Merged
merged 1 commit into from
Feb 28, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 4 additions & 27 deletions gems/quilt_rails/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -390,41 +390,18 @@ With SSR enabled React apps, state must be serialized on the server and deserial

#### Customizing the node server

By default, sewing-kit bundles in `@shopify/react-server-webpack-plugin` for `quilt_rails` applications to get apps up and running fast without needing to manually write any node server code. If what it provides is not sufficient, a custom server can be defined by adding a `server.js` or `server.ts` file to the app folder.
By default, sewing-kit bundles in [`@shopify/react-server-webpack-plugin`](../../packages/react-server-webpack-plugin/README.md) for `quilt_rails` applications to get apps up and running fast without needing to manually write any node server code.

If what it provides is not sufficient, a completely custom server can be defined by adding a `server.js` or `server.ts` file to the `app/ui` folder. The simplest way to customize the server is to export the object created by [`@shopify/react-server`](../../packages/react-server/README.md#node-usage)'s `createServer` call in `server.ts` file.

```
└── app
└── appeon
└── ui
└─- app.{js|ts}x
└─- index.{js|ts}
└─- server.{js|ts}x
```

```tsx
// app/ui/server.tsx
import '@shopify/polyfills/fetch';
import {createServer} from '@shopify/react-server';
import {Context} from 'koa';
import React from 'react';

import App from './app';

// The simplest way to build a custom server that will work with this library is to use the APIs provided by @shopify/react-server.
// https://github.com/Shopify/quilt/blob/master/packages/react-server/README.md#L8
const app = createServer({
port: process.env.PORT ? parseInt(process.env.PORT, 10) : 8081,
ip: process.env.IP,
assetPrefix: process.env.CDN_URL || 'localhost:8080/assets/webpack',
render: (ctx, {locale}) => {
const whatever = /* do something special with the koa context */;
// any special data we add to the incoming request in our rails controller we can access here to pass into our component
return <App server someCustomProp={whatever} location={ctx.request.url} locale={locale} />;
},
});

export default app;
```

#### Fixing rejected CSRF tokens for new user sessions

If a React component calls 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.
Expand Down
11 changes: 10 additions & 1 deletion packages/react-server/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,20 @@ Node apps require a server entry point that calls the `createServer` function. A
```tsx
import React from 'react';
import {createServer} from '@shopify/react-server';
import {Context} from 'koa';
import App from '../app';

const app = createServer({
render: ctx => <App location={ctx.request.url} />,
port: process.env.PORT ? parseInt(process.env.PORT, 10) : 8081,
ip: process.env.IP,
assetPrefix: process.env.CDN_URL || 'localhost:8080/assets/webpack',
render: (ctx: Context) => {
const whatever = /* do something special with the koa context */;
// any special data we add to the incoming request in our rails controller we can access here to pass into our component
return <App server location={ctx.request.url} someCustomProp={whatever} />;
},
});
export default app;
```

If you already have an existing node server, you can opt in to using only the render middleware provided by this package. See `createRender()`.
Expand Down