60frames / react-boilerplate Goto Github PK

https://github.com/babel/babel-loader#babel-is-injecting-helpers-into-each-file-and-bloating-my-code

We need a logo.

Rather than relying on global.process.env in Node and window.process.env in the browser it might be nicer to simply add the env vars to the redux store.

Right now in the code splitting branch reducers aren't code split as they're defined in reducers/index and they in turn import ACTION_TYPES from action creators so actions also aren't code split.

POC https://github.com/60frames/react-boilerplate/tree/code-splitting-reducer

I used to have this working for me, but no matter which devtool option I try, none are correctly mapping lines currently.

You'd hope 'cheap-module-eval-source-map' was the answer. But all options except eval generate line numbers corresponding to a line in the entire main.js file (for example).

eval at least gets the file correct.

I'm using the latest version of Webpack.

They've been moved to /src/public

React loadable has since implemented https://github.com/60frames/react-boilerplate/blob/master/src/components/lib/loadable/loadable.js

https://github.com/thejameskyle/react-loadable#flushserversiderequirepaths--flushwebpackrequireweakids

RR2 / 3 is pretty bloated and who knows how long it'll be supported for.

RR4 ditched the centralised router config which makes it hard to identify data dependencies before rendering on the server... https://www.npmjs.com/package/react-router-config might work or perhaps there's another router which will be a better fit.

Hello,
first of all thank you for the boilerplate, it's an awesome start for codesplitting with SSR.

I was wondering if you could provide an update of the boilerplate for react-loadable v5?

The v5 provides utils to:

• preloadAll() on server: to prefetch all components on server
• preloadReady() on client: to wait for bundles that were used to on server before rendering on client
  with webpack plugins to abstract / hide the logic for async imports.

I believe it would make the boilerplate a bit easier to start with.

I would have liked to bring a PR but I couldn't set it up to make it work.

and use eslint:recommended

In certain circumstances renderProps.components can contain null values.

See https://github.com/richardscarrott/richardscarrott.co.uk/blob/master/src/server.js#L12

If a runtime error occurs during render the server will currently stop.

See https://github.com/richardscarrott/richardscarrott.co.uk/blob/master/src/server.js#L97

include naming convention for containers and loadable components as well as the dir structure following the component owner-ownee relationship and the use of 'lib'.

If there is already an .editorconfig in the destination we need to prompt 'Are you sure?'. Obviously we could do this easily with the fs module however we'd have to manually build the path for this check, duplicating gulp.src logic which reads paths from the process.cwd() -- this duped code isn't difficult or really a problem, I just think it's worth doing a bit of research to see if there's a nice way to do this sort of thing with gulp.

geowarin/friendly-errors-webpack-plugin#9

The initial intention of the Node server was to just render the client react app and serve static assets which is why the webpack server bundle get's hot reloaded but the regular api routes don't.

We can't use nodemon to restart the server every time because that'd cause the webpack middlewares to restart which would be sloooooow so it'd be good to investigate a nice solution for this...may have to start two servers and proxy requests from the API server to the dev server although this is something I was hoping to avoid.

Jest snapshots might be a nice way to do this cheaply.

https://github.com/reactjs/react-router-redux/blob/master/examples/server/server.js

https://github.com/60frames/react-boilerplate/blob/docs/src/components/html/Html.js#L24

i.e. They should be output as strings so you would be required to do process.env.BROWSER === 'true' rather than just process.env.BROWSER.

Or alternatively the serverside env vars could be cast to appropriate data types...

During development we requireFromString to use the latest server bundle however this doesn't give us very useful stack traces:

I was thinking we could potentially write the in-memory bundle and source map from the webpack compiler to a temp directory and then use something like node-source-map-support to give us something like this:

Details here - f6a5ac7

Doesn't make sense to server dist/server.js, might end up containing sensitive data.

Prob want to output client to dist/public/client.js and server to dist/server.js.

Looks like the extract text plugin has now been updated to work with use etc.

Might be worth looking into https://github.com/andywer/webpack-blocks (not 100% sold yet though)

https://www.npmjs.com/package/webpack-hot-middleware has been released since we originally started work on this which makes it easy to integrate hot module reloading with an existing server.

It also supports https://www.npmjs.com/package/redbox-react

Waiting for jestjs/jest@62c4e9a to be released.

The package react is included as both a dev and production dependency.

ps. thanks for this ultra simple and readable boilerplate. curious of what's coming.

Now IDEs generally have good support for auto import the custom import resolution feels like a bad idea, e.g.

import Index from 'components/index/Index'

Should be:

import Index from '../relative/path/to/components/index/Index';

Right now prettier is used as an extension to eslint because it allowed the use of a shared config file... prettier now supports a config file so would be better to use that and keep eslint separate (ide plugins work better as standalone)

It'd be good to take advantage of LTC for node_modules as they're less likely to change so frequently.

The new code splitting PR adds a bootstrap chunk which could double up as a vendor chunk too.

Main issues are pulling out the chunk manifest from the webpack boostrap to ensure changes to other chunks don't invalidate the entry chunk. Also need to review records / deterministic re-builds (i.e. use hashes or names instead of indexes as module ids).

At the moment there's an issue when using the chunk-manifest-webpack-plugin as the chunkhash is generated before the plugin runs...workarounds could include the webpackmd5hash plugin...

I think we can get away with ditching Gulp and just use Node scripts that run tasks/*.js (i.e. still don't use cli's)

Hi Richard,

first of all, thanks for the awesome react-boilerplate project. I especially appreciate the out of the box server-side rendering (which is sorely lacking from the 'create-react-app' project).
Maybe you are able to help me with problem I'm encountering. I've included enzyme as it felt like a good addition to jest which is thankfully already present in your boilerplate setup.

I know want to test a Component which includes a <Link to="/test">test</Link> component. But whenever I try to get it render with either mount or render it is failing with:

Invariant Violation: link is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

For some reason <Link/> is being interpreted as <link/>. I can not reproduce this with the 'create-react-app'. It feels I'm missing something here.

Steps to reproduce

• I did checkout the react-boilerplate project
• I've added enzyme via npm install --save-dev enzyme (and ended up with version 2.9.1)
• I wrote the following minimal test case

import {render} from 'enzyme';
import React from 'react';
import {Link} from 'react-router';

describe('<Link/>', () => {
    it('renders without complaining', () => {
        render(<Link>test</Link>);
    });
});

The exact same test with the same version of enzyme works like a charm with create-react-app but so far I could not find out what is missing from react-boiler-plate.

I would appreciate any hints! Thanks!