Server side rendering #512

alanmoo · 2016-06-23T20:59:00Z

Closes #406

gvn · 2016-06-24T18:19:10Z

I think we should get two reviewers on this due to the size and complexity.

@Pomax, you have a lot of experience w. server side React rendering, would you mind giving this a review as well?

gvn · 2016-06-27T17:15:14Z

app/index.jsx

+module.exports = React.createClass({
+  render(){
+    return(
+<html>


Can we properly indent this block?

gvn · 2016-06-27T17:21:42Z

The webpack config files have some crazy indentation going on. Can you fix that?

gvn · 2016-06-27T17:44:04Z

When I load http://127.0.0.1:1818/programs/studygroups I get this error on the server:

{ Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
    at a (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:1:7329)
    at u (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:1:22476)
    at d.Mixin.getNativeNode (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:16:21568)
    at Object.s.getNativeNode (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:1:30054)
    at d.v.Mixin._updateChildren (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:17:18561)
    at d.v.Mixin.updateChildren (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:17:18166)
    at d.Mixin._updateDOMChildren (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:16:21513)
    at d.Mixin.updateComponent (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:16:19904)
    at d.Mixin.receiveComponent (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:16:19331)
    at Object.s.receiveComponent (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:1:30297) framesToPop: 1 }
{ Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
    at a (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:1:7329)
    at Object.u [as getNodeFromInstance] (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:1:22476)
    at a.getNativeNode (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:18:3915)
    at Object.s.getNativeNode (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:1:30054)
    at d.v.Mixin._updateChildren (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:17:18561)
    at d.v.Mixin.updateChildren (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:17:18166)
    at d.Mixin._updateDOMChildren (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:16:21513)
    at d.Mixin.updateComponent (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:16:19904)
    at d.Mixin.receiveComponent (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:16:19331)
    at Object.s.receiveComponent (/Volumes/Nostromo/mozilla-code/science.mozilla.org/server.js:1:30297) framesToPop: 1 }

alanmoo · 2016-07-06T20:56:57Z

Investigating the error. After un=minifying, it seems to be related to facebook/react#6232

Invariant Violation (click to see details)

{ [Invariant Violation: React DOM tree root should always have a node reference.] name: 'Invariant Violation', framesToPop: 1 }

alanmoo · 2016-07-07T18:46:57Z

Unless I broke something with the deploy process, this should be ready to review again.

alanmoo · 2016-07-07T19:14:00Z

@alicoding this doesn't deploy properly on heroku for some reason, can you take a look?

alicoding · 2016-07-08T12:39:36Z

Is it working now?

gvn · 2016-07-08T16:54:18Z

I'm seeing:

alicoding · 2016-07-08T19:15:12Z

webpack.server.config.js

+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        'NODE_ENV': JSON.stringify(`production`)


Also add this 'PORT': process.env.PORT because now you are compiling server.jsx and env won't be exposed there. Heroku set its own port and you need to allow that to be exposed to the app.

alanmoo · 2016-07-11T15:30:39Z

@alicoding I made those changes but it's still failing.

alicoding · 2016-07-11T16:47:22Z

app/server.jsx

@@ -11,7 +11,7 @@ import HTML from './index.jsx';


 app.listen(process.env.PORT || 1818, function () {


Change this whole block to this:

var listener = app.listen(process.env.PORT || 1818, function(){ console.log(`Listening on port ${listener.address().port}!`); });

alicoding · 2016-07-11T17:35:50Z

The problem here is that process.env.PORT is not there when server.js is trying to read it and it's being default to 1818 which is not going to work with heroku since they're using their own port number here...

2016-07-11T16:34:47.568101+00:00 heroku[web.1]: Starting process with command `node server.js`
2016-07-11T16:34:50.314339+00:00 app[web.1]: Listening on port 1818!
2016-07-11T16:35:48.203521+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

$ heroku run bash -a science-mozilla-org-sta-pr-512
Running bash on ⬢ science-mozilla-org-sta-pr-512... up, run.4421
~ $ echo $PORT
32647

alanmoo · 2016-07-11T21:23:06Z

After removing the server file optimizations (since that file's size doesn't really matter), it looks like webpack is trying to do too much voodoo on the file, causing it to optimize out env vars (at least locally). Investigating what I can do to avoid this now.

alanmoo · 2016-07-11T22:49:11Z

This is now rendering properly, but when landing on https://science-mozilla-org-sta-pr-512.herokuapp.com/projects, a 500 error results. This seems to come from the Debounce component (https://github.com/alanmoo/science.mozilla.org/blob/optimize-webpack/app/react/pages/projects/projects.jsx#L125), it's probably attempting to add an event listener server side. I'm not quite sure how to solve this though. Anyone have ideas?

alicoding · 2016-07-12T14:24:22Z

This is the error from heroku logs

2016-07-12T14:25:14.558748+00:00 app[web.1]: TypeError: _this.handlersToWrap.includes is not a function
2016-07-12T13:21:53.598192+00:00 app[web.1]:     at basePickBy (/app/node_modules/lodash/lodash.js:3347:13)
2016-07-12T13:21:53.598194+00:00 app[web.1]:     at Function.pickBy (/app/node_modules/lodash/lodash.js:12917:36)
2016-07-12T13:21:53.598144+00:00 app[web.1]:     at Base._shouldWrapHandler (/app/node_modules/react-throttle/lib/classes/processors/Base.js:51:78)
2016-07-12T13:21:53.598128+00:00 app[web.1]: TypeError: _this.handlersToWrap.includes is not a function
2016-07-12T13:21:53.598194+00:00 app[web.1]:     at Debouncer.Base._extractHandlers (/app/node_modules/react-throttle/lib/classes/processors/Base.js:43:16)
2016-07-12T13:21:53.598195+00:00 app[web.1]:     at Debouncer.Base._wrapHandlers (/app/node_modules/react-throttle/lib/classes/processors/Base.js:47:32)
2016-07-12T13:21:53.598196+00:00 app[web.1]:     at Debouncer.Base.element (/app/node_modules/react-throttle/lib/classes/processors/Base.js:34:46)
2016-07-12T13:21:53.598197+00:00 app[web.1]:     at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (/app/server.js:12447:35)
2016-07-12T13:21:53.598195+00:00 app[web.1]:     at Debouncer.Base._processElement (/app/node_modules/react-throttle/lib/classes/processors/Base.js:38:30)
2016-07-12T13:21:53.598196+00:00 app[web.1]:     at Debounce.Base._this.render (/app/node_modules/react-throttle/lib/components/Base.js:30:31)
2016-07-12T13:21:53.598197+00:00 app[web.1]:     at ReactCompositeComponentWrapper._renderValidatedComponent (/app/server.js:12467:33)
2016-07-12T13:21:53.955621+00:00 app[web.1]: { [Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.] framesToPop: 1 }

alanmoo · 2016-07-12T14:26:01Z

Yeah, I spotted that- it's the debounce component having issues server-side. Investigating how to solve for this other than removing the component or forking it to include a check for its environment.

alanmoo · 2016-07-12T19:45:23Z

I believe I've got this working now. Check out the latest deployment

alanmoo · 2016-10-10T21:20:43Z

Squashed these commits into one based on master, and added a commit to bring in the Google Analytics from #560

alanmoo added the PR – Needs Review label Jun 23, 2016

alanmoo assigned gvn Jun 23, 2016

gvn assigned Pomax Jun 24, 2016

gvn reviewed Jun 27, 2016
View reviewed changes

app/index.jsx

module.exports = React.createClass({

render(){

return(

<html>

Copy link

Contributor

gvn Jun 27, 2016

Choose a reason for hiding this comment

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

Can we properly indent this block?

cadecairos temporarily deployed to science-mozilla-org-sta-pr-512 July 7, 2016 18:48 Inactive

alanmoo temporarily deployed to science-mozilla-org-sta-pr-512 July 7, 2016 19:18 Inactive

alicoding reviewed Jul 8, 2016
View reviewed changes

alanmoo temporarily deployed to science-mozilla-org-sta-pr-512 July 11, 2016 15:25 Inactive

alicoding reviewed Jul 11, 2016
View reviewed changes

alanmoo temporarily deployed to science-mozilla-org-sta-pr-512 July 11, 2016 22:15 Inactive

alanmoo temporarily deployed to science-mozilla-org-sta-pr-512 July 11, 2016 22:21 Inactive

alanmoo temporarily deployed to science-mozilla-org-sta-pr-512 July 12, 2016 19:26 Inactive

alanmoo changed the base branch from develop to master September 26, 2016 18:47

alanmoo mentioned this pull request Oct 4, 2016

RSS feed #525

Open

cadecairos temporarily deployed to science-mozilla-org-sta-pr-512 October 10, 2016 21:45 Inactive

This was referenced Oct 11, 2016

Migrate React-router to server side #406

Open

Refactor webpack settings to reduce front-end overhead #407

Open

alanmoo added 2 commits October 13, 2016 13:11

Server side rendering

200200a

Add GA to server side rendering

6803afe

alanmoo deployed to science-mozilla-org-sta-pr-512 October 13, 2016 17:22 View deployment

cadecairos temporarily deployed to science-mozilla-org-sta-pr-568 November 8, 2016 18:10 Inactive

Pomax removed their assignment May 10, 2017

arush0311 mentioned this pull request May 18, 2017

Server Side rendering #631

Open

Pomax closed this Jan 18, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Server side rendering #512

Server side rendering #512

alanmoo commented Jun 23, 2016 •

edited

Loading

gvn commented Jun 24, 2016

gvn Jun 27, 2016

gvn commented Jun 27, 2016

gvn commented Jun 27, 2016 •

edited

Loading

alanmoo commented Jul 6, 2016 •

edited

Loading

alanmoo commented Jul 7, 2016

alanmoo commented Jul 7, 2016

alicoding commented Jul 8, 2016

gvn commented Jul 8, 2016

alicoding Jul 8, 2016 •

edited

Loading

alanmoo commented Jul 11, 2016

alicoding Jul 11, 2016

alicoding commented Jul 11, 2016 •

edited

Loading

alanmoo commented Jul 11, 2016

alanmoo commented Jul 11, 2016

alicoding commented Jul 12, 2016 •

edited

Loading

alanmoo commented Jul 12, 2016

alanmoo commented Jul 12, 2016

alanmoo commented Oct 10, 2016

		@@ -11,7 +11,7 @@ import HTML from './index.jsx';


		app.listen(process.env.PORT \|\| 1818, function () {

Server side rendering #512

Server side rendering #512

Conversation

alanmoo commented Jun 23, 2016 • edited Loading

gvn commented Jun 24, 2016

gvn Jun 27, 2016

Choose a reason for hiding this comment

gvn commented Jun 27, 2016

gvn commented Jun 27, 2016 • edited Loading

alanmoo commented Jul 6, 2016 • edited Loading

alanmoo commented Jul 7, 2016

alanmoo commented Jul 7, 2016

alicoding commented Jul 8, 2016

gvn commented Jul 8, 2016

alicoding Jul 8, 2016 • edited Loading

Choose a reason for hiding this comment

alanmoo commented Jul 11, 2016

alicoding Jul 11, 2016

Choose a reason for hiding this comment

alicoding commented Jul 11, 2016 • edited Loading

alanmoo commented Jul 11, 2016

alanmoo commented Jul 11, 2016

alicoding commented Jul 12, 2016 • edited Loading

alanmoo commented Jul 12, 2016

alanmoo commented Jul 12, 2016

alanmoo commented Oct 10, 2016

alanmoo commented Jun 23, 2016 •

edited

Loading

gvn commented Jun 27, 2016 •

edited

Loading

alanmoo commented Jul 6, 2016 •

edited

Loading

alicoding Jul 8, 2016 •

edited

Loading

alicoding commented Jul 11, 2016 •

edited

Loading

alicoding commented Jul 12, 2016 •

edited

Loading