michaelbenin / react-ssr-spa Goto Github PK

https://github.com/gabmontes/babel-preset-latest-minimal

https://www.npmjs.com/package/babel-preset-node6

Currently <!doctype> needs to be

https://github.com/michaelBenin/react-ssr-spa/blob/master/gulpfile.babel.js/tasks/gulp_sass_dev.js#L20

Fix:

change to:

.pipe(livereload({ file: '/css/main.css' }));;

https://github.com/babel/babel-preset-env

Right now it's at 51% for server and 13% for client.

remix-run/react-router#5132

https://github.com/prettier/eslint-config-prettier

Waiting on: Unitech/pm2#2995

Fixed here: gotwarlost/istanbul#816

https://wiki.saucelabs.com/display/DOCS/Using+Status+Badges+and+the+Browser+Matrix+Widget+to+Monitor+Test+Results

example http://url#something causes invariant error when parsing

This is known, everything is working as expected.

gaearon/react-hot-loader#298

Thread here: facebook/react#812

In initializer for server use this snippet:

if (process.env.NODE_ENV === 'production') {
    require('react/dist/react.min.js');
    require.cache[require.resolve('react')] = require.cache[require.resolve('react/dist/react.min.js')];

    require('react-dom/dist/react-dom-server.min.js');
    require.cache[require.resolve('react-dom/server')] = require.cache[require.resolve('react-dom/dist/react-dom-server.min.js')];
}

Should have an example.

From the comment from UXLayout here: remix-run/react-router#3936 doesn't look like there's a "happy path" for this yet.

Waiting on foundation/foundation-sites#9458 to upgrade.

Errors in render method will cause server to hang. The issue is known:
facebook/react#2461

Also enable chrome headless: https://swizec.com/blog/how-to-run-javascript-tests-in-chrome-on-travis/swizec/6647

Webpack 3 etc - quarterly chore

https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b

https://github.com/michaelBenin/react-ssr-spa/blob/master/src/redux/reducers/meta_reducer.js#L47

https://github.com/codecov/example-node

Try adding babel-register to mocha opts in config.

https://gist.github.com/gaearon/9a4d54653ae9c50af6c54b4e0e56b583#javascript-environment-requirements

Also add a check for support in legacy browsers, if not load in the polyill

https://github.com/commissure/redbox-react

Example with react-hot-loader:

https://github.com/commissure/redbox-react/blob/master/examples/react-hot-loader/index.js

See example here: https://github.com/bemusic/bemuse/blob/master/karma.conf.js

Issue: webpack/webpack#2145

gaearon/react-hot-loader#56

Bootstrapped config randomized properties.

https://github.com/zalmoxisus/redux-devtools-extension#usage

Server: https://www.npmjs.com/package/gulp-coverage
Client: https://github.com/karma-runner/karma-coverage

https://medium.com/@aickin/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67

Close the stream on error:

import gulp from 'gulp';
import { log } from 'gulp-util';
import changed from 'gulp-changed';
import babel from 'gulp-babel';
import config from './../configs/config';

gulp.task('babel-server', function babelServer() {
  const babelStream = babel({
    sourceMaps: 'inline',
    presets: [
      'react',
      [
        'env',
        {
          targets: {
            node: 'current'
          }
        }
      ]
    ]
  });

  babelStream.on('error', function handleError(err) {
    log(`Error transpiling babel in gulp_babel_server task.`);
    log(err);
    babelStream.end();
  });

  return gulp
    .src(config.server.src)
    .pipe(changed(config.dest))
    .pipe(babelStream)
    .pipe(gulp.dest(config.dest));
});

Source: gulpjs/gulp#71

Provide how we contribute to the project.

In server rendering, it's important to use utf-8 in browser for the bootstrapping of data.

After initial page load client can return null. Only needed to bootstrap data.

https://www.npmjs.com/package/react-amphtml

We pass store around a lot, it makes more sense to use dispatch and state, also we plan on moving the data fetching to be called on the component from the client instead of in the browserHistory listener.

Sometimes we have components which only work in the client and we don't want to render them on the server. What we can do here is check for the initial page load in the state, if it is don't render the component until after that render. Essentially, render first without client side component by doing a check if it's initial page load, after that, an event is dispatched, the component then rerenders with the client side component. This solves issues with invariants with components from react-d3 and many others.

reactjs/react-router-redux#481

Revert to previous release.

https://github.com/indutny/webpack-common-shake

I also think it would be cool to have a code splitting branch. I try to avoid it until I actually need it.

https://www.npmjs.com/package/plato

@johnferrie's base seo util would be great to have, maybe scaled back to be more generic to allow people to extend for their needs.

Issue here: remy/nodemon#1003