Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a guide for running react-server in production #777

Merged
merged 12 commits into from
Dec 3, 2016

Conversation

drewpc
Copy link
Collaborator

@drewpc drewpc commented Dec 1, 2016

This PR adds a basic guide for running react-server in production, multiple environments, and with a fronting HTTP server. This is still a work in progress and I would love input from others who are running this in production (I am not yet--still getting prepared). Hopefully this is a start.

Also, there's one minor fix to the logging documentation to add a link target.

@gigabo gigabo added this to the Production ready milestone Dec 1, 2016
@@ -63,5 +63,5 @@ var fooLogger = logging.getLogger(__LOGGER__({ label: "foo" }));
var barLogger = logging.getLogger(__LOGGER__({ label: "bar" }));
```

See [react-server-gulp-module-tagger]() for more details on how `__LOGGER__` is
See [react-server-gulp-module-tagger](https://github.com/redfin/react-server/tree/master/packages/react-server-module-tagger) for more details on how `__LOGGER__` is
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Heh, whoops. 😅

@gigabo
Copy link
Contributor

gigabo commented Dec 1, 2016

Oh yeah! @aickin @roblg @doug-wade Check this out!

@gigabo
Copy link
Contributor

gigabo commented Dec 1, 2016

This addresses #188.

Copy link
Collaborator

@doug-wade doug-wade left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@drewpc This is amazing and incredible. Thank you so much for doing this; it's something we really needed. There's one other part I might consider adding is using react-server as an express middleware, rather than using the generated express instance, but I'm definitely not going to hold up this awesome pr for it.

example. At this point, `nginx` handles all requests on port 80 and proxies it to `react-server` running inside `ExpressJS`
on port 3000.

### `Apache`
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I'd prefer this TODO in an issue, rather than the doc itself

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed.

Now you can interact directly with the process using `pm2` commands or use `npm start`, `npm run start-beta`, or
`npm run start-prod` to start the processes.

## `recluster`
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oooo I'd never heard of recluster before, but it seems like it fits in to the ecosystem really well, and fills a pretty big gap. Do you think we should ship with a recluster config out of the box? Or add a react-server-recluster module to the monorepo?

generated by `react-server` after compilation. Simply point the fronting server to the appropriate `__clientTemp/build`
directory and you're all set.

If you have additional, referenced assets that you want to be served by your fronting server, you can add an addition
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

additional*

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! fixed.

and production settings. To begin, create a `.reactserverrc` file in the root of your project. An example of this
would be

```json
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I would move this example to a "putting it all together" section at the end, and slim down this example to focus on only a few environment-specific examples -- this feels like a lot of concepts to introduce at once, and might make it hard to focus on the part that you want them to focus on.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. I didn't move it yet though--just trying to get something out there first. I'm sure people other than me are much better at organizing stuff like this!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


All of this relies on proper configuration of `react-server` as mentioned in the example `.reactserverrc` file at the
beginning of this guide. Because `react-server` loads your compiled assets for you, you need to tell it where to find the assets.
The `jsUrl` setting at the beginning of this guide does just that. If you use `jsUrl: /assets/`, then `react-server` will
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The thing you're referencing is ~185 lines away, which is a long way to scroll or a long time to remember. I think I'd add another example here.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I fixed it by adding a link to the section where that example is. Not perfect, but I figured it works for now.

you're all set! This works reliably on both server and client sides of the application--fully isomorphic!
Here's an example:

```javascript es6
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

javascript es6 seems to be confusing github's markdown renderer. (based on https://github.com/SoprisApps/react-server/blob/5cfe98d563bdca8612e4d6695afee53ba7920720/docs/guides/production.md). It gets really confused and then starts making code blocks out of strange things.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed.

Copy link
Collaborator

@doug-wade doug-wade left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

…pecifying an additional webpack configuration file.
@doug-wade doug-wade merged commit 47e1eab into redfin:master Dec 3, 2016
@drewpc drewpc modified the milestones: Production ready, 0.6.0 Jan 27, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants