tomatau / breko-hub Goto Github PK

Make use of select effects instead of the getState calls.

There have been updates to the babel7 monorepo:

• • The dependency @babel/core was updated from 7.1.1 to 7.1.2.

• The dependency @babel/plugin-proposal-class-properties was updated from 7.0.0 to 7.1.0.
• The dependency @babel/plugin-proposal-decorators was updated from 7.1.1 to 7.1.2.
• The devDependency @babel/plugin-transform-runtime was updated from 7.0.0 to 7.1.0.
• The dependency @babel/preset-env was updated from 7.0.0 to 7.1.0.
• The dependency @babel/runtime was updated from 7.1.1 to 7.1.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

https://github.com/smooth-code/loadable-components/ seems like a more elegant solution with better support than react-loadable.

I tried to do server side rendering with this project and I wanted to preload the state with a data that is fetched from API. It seems I did it wrongly. Can anyone help? This is what I added in render-app middleware in server directory.

return function renderApp(ctx){
        ctx.store.dispatch({
            type: LOCATION_CHANGE,
            payload: ctx.history.location
        })
        // dispatch locale action
        ctx.store.dispatch(apiFetch()) // this is what I added

        let modules = []
        const __html = ReactDOMServer.renderToString(
            <Loadable.Capture report={mod => modules.push(mod)}>
                {app.ImageSearch(ctx.store, ctx.history, StaticRouter)}
            </Loadable.Capture>
        )

        if(isClientRedirect(ctx.history.action)) {
            log('302 redirect to', ctx.history.location.pathname)
            ctx.status = 302
            ctx.redirect(ctx.history.location.pathname)
        } else {
            log('setting html response body')
            ctx.response.body = makeHtmlBody({
                headScripts: compact([
                    javascripts.head,
                    getBundles(require(LOADABLE), modules).map(b => b.file)
                ]),
                headStyles: compact([ styles.imagesearch, styles.head ]),
                bodyScripts: compact([ javascripts.imagesearch ]),
                stringScripts: [
                    `window.__INITIAL_STATE__ = ${
                        JSON.stringify(ctx.store.getState(), null, isEnv('development') && 2)
                    }`
                ],
                content: [ {
                    id: CONTAINER_ELEMENT_ID,
                    dangerouslySetInnerHTML: { __html }
                } ]
            })
        }
    }

Please help..... Thanks in advance

Hi @tomatau! I've just clean clone this repo and I'm making some tests with dynamic routes(https://github.com/rackt/react-router/blob/master/docs/guides/advanced/DynamicRouting.md), but I'm having some hard times to figure it out how to implement it. Could you give some tips about it?

I know it is not an issue, but I couldn't find another way to contact you.
Thanks!

It's good stuff, lets get more in there as default, like minification hacks.

Hi, I'm trying this boilerplate for one of my personal projects. Two problems that I faced at the very beginning:

1. babel-polyfill works only when I explicitly call babel-register with presets like this:
   require("babel-register")({ presets: [ 'es2015', 'react', 'stage-0'], plugins: [ "add-module-exports", "babel-root-import", "react-require", ["provide-modules", { "debug": "debug" }] ] });
   It seems that it ignores .babelrc. So how can I fix it without calling require("babel-register") explicitely/
2. debug doesn't work with babel-polyfill. I tried various configurations (exact as in the boilerplate, explicitly requiring debug), but it works only when I remove babel-polyfill at all. Any thoughts how to work around this?

Thanks.

Version 3.4.0 of mocha just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As mocha is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

This is tricky as:

• Review apps are auto-created on pull requests
• Need to wait until the review app is deployed
• Need to know the review app's URL for cypress tests
• Not sure of the approach to use for code to push a review app in GitHub workflow
• Risk of incurring more cost

Could use this https://github.com/niteoweb/reviewapps-deploy-status

Let's rock it

• this will enable better functional testing around the server render as there is no more data-reactid pollution, only the top checksumid to consider.

Hi - I added a redux store called auth, and now the test Server Side Render -> renders initial state from store is failing. I see that the rendered state contains the key auth along with the initial state of the reducer, but the expected state does not contain this key.

I've been looking all over the repo to figure out where the expected state is created but I'm a bit lost. Any pointers?

Thanks!

new version out. already used in tomatao-blog

might be worth using some es6 and making it easier to read?

alternatively could just inline it for even further optimisation.

It's using a history enhancer now (like we did in breko hub a while back! smug)

Let's upgrade it!

There's a branch in progress for react-router 4 and overall it offers many improvements to current master.

Some key points:

• Support for server side prefetch has become more route config based. This isn't really an MVP for breko-hub so is being removed. I hope to document some options for server side prefetch or maybe a better solution will start to shine through.
• The current functional testing strategy is very coupled to implementation. I'd like to remove this coupling. Maybe an IoC container or a simple contract for the SSR to inject the routing/components/store/history.

I've been searching through all other solutions, and semantic seems to be working correctly, all css is loaded correctly, and icon font reference codes are correct. It feels like the font isn't being delivered to the client.

Default webpack configs.

With a default install of semantic ui, all of the fonts are built:

[./src/assets/semantic/dist/themes/default/assets/fonts/icons.eot] 82 bytes {mini-css-extract-plugin} [built]

Css is correct in body[hash].css

@font-face{font-family:Icons;src:url(/8e3c7f5520f5ae906c6cf6d7f3ddcd19.eot);.<more src references>

style shows correct icon code that matches css

i.icon.paragraph:before {
    content: "\F1DD";
}

There are also flag png files that are loaded and display correctly in the same folder structure.

Semantic takes care of all of it's styles, so, what am I missing?

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

Sorry, but i did not understand. I trying launch boilerplate in production mode, but even in it it do not preloading "bar" module data.

Boilerplate doesn't provide preloading data from api before SSR render, right?)

Strange, as i see, many boilerplates don't care about it, but without rendering data from backend on SSR - it does not work completely isomorphic.

Hi @tomatau!

I've update Koa to 1.1.2 and Reac-router to 2.0.0-rc5. Is there some reason why you didn't do it yet?

If you agree, I'll submit a PR.

Not sure this is even important really. But maybe a nice to have.

I've an issue where CSS Grid styles aren't applied on initial app load, but will hot-load if they are changed. In trouble-shooting I get the following error in the client. I've tried to change the localIdentName in the dev and prod configs, but the server path is always the full path from C:\. I'm not sure if it's related.. So perhaps this is two issues.

Warning: Prop className did not match. Server: "<localPathRedacted>app\\components\\HeadNavigation\\app-components-HeadNavigation-module-active" Client: "HeadNavigation-module-active"

Is it just me or is the redux store global, so every request from one use for one session will affect the initial store state sent to client for others?

Hello,

on OSX and Linux it works fine, but Windows (7|10) is throwing errors.

$ npm start

> [email protected] start breko-hub
> node ./src/server-entry.js

clean-webpack-plugin: breko-hub\src\static has been removed.
./src/styles/main.scss
Module parse failed: breko-hub\src\styles\main.scss Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type.
| // placeholder file
| @import '~vars';
| @import '~tao-scss/index';
|
 @ multi babel-polyfill ./src/app/entry.js ./src/styles/main.scss
./src/app/main.js
Module parse failed: breko-hub\src\app\main.js Unexpected token (33:2)
You may need an appropriate loader to handle this file type.
|
| export const Main = (
|   <Provider store={store}>
|     <Router history={history} onUpdate={onRouteUpdate}>
|       {makeRoutes()}
 @ ./src/app/entry.js 5:0-36
 @ multi babel-polyfill ./src/app/entry.js ./src/styles/main.scss
./src/app/utils/index.js
Module parse failed: breko-hub\src\app\utils\index.js Unexpected token (1:7)
You may need an appropriate loader to handle this file type.
| export get from './get'
| export typeToReducer from 'type-to-reducer'
| export * as request from './request'
 @ ./src/app/entry.js 2:0-33
 @ multi babel-polyfill ./src/app/entry.js ./src/styles/main.scss
./src/app/components/DevTools/DevTools.js
Module parse failed: breko-hub\src\app\components\DevTools\DevTools.js Unexpected token (7:2)
You may need an appropriate loader to handle this file type.
|
| export default createDevTools(
|   <DockMonitor
|     toggleVisibilityKey='ctrl-h'
|     changePositionKey='ctrl-q'>
 @ ./src/app/composition/makeCreateStore.js 4:0-55
 @ ./src/app/composition/store.js
 @ ./src/app/entry.js
 @ multi babel-polyfill ./src/app/entry.js ./src/styles/main.scss
./src/app/reducers/flash.reducers.js
Module parse failed: breko-hub\src\app\reducers\flash.reducers.js Unexpected token (14:4)
You may need an appropriate loader to handle this file type.
|
|   [ REMOVE_MESSAGE ]: (state, action) => ({
|     ...state,
|     messages: filter(
|       flash => flash.id !== getFlashId(action),
 @ ./src/app/reducers/index.js 3:0-57
 @ ./src/app/composition/store.js
 @ ./src/app/entry.js
 @ multi babel-polyfill ./src/app/entry.js ./src/styles/main.scss
./src/app/reducers/bar.reducers.js
Module parse failed: breko-hub\src\app\reducers\bar.reducers.js Unexpected token (16:6)
You may need an appropriate loader to handle this file type.
|   [ API_FETCH ]: {
|     PENDING: () => ({
|       ...initialState,
|       isPending: true,
|     }),
 @ ./src/app/reducers/index.js 4:0-51
 @ ./src/app/composition/store.js
 @ ./src/app/entry.js
 @ multi babel-polyfill ./src/app/entry.js ./src/styles/main.scss
./src/app/reducers/foo.reducers.js
Module parse failed: breko-hub\src\app\reducers\foo.reducers.js Unexpected token (15:4)
You may need an appropriate loader to handle this file type.
|
|   [ GET ]: (state, action) => ({
|     ...state,
|     data: getFoo(action),
|   }),
 @ ./src/app/reducers/index.js 5:0-51
 @ ./src/app/composition/store.js
 @ ./src/app/entry.js
 @ multi babel-polyfill ./src/app/entry.js ./src/styles/main.scss
webpack built 6699a20433e5eccff0c7 in 10087ms

Needs to be explicit:

https://github.com/reactjs/react-redux/releases/tag/v2.0.0

Mocha doesn't terminate during integration test run using ./scripts/test/int.sh, and suspect this because the mocha developers decided to change the mocha termination behavior starting v4.0.0. This answer explains it. Should we add the --exit flags to int.sh and unit.sh? (Please do note that unit.sh is terminating however)

Configuration:

mocha (global): 5.2.0
node: v10.7.0

Working on this locally to get things clean before pushing the changes in.

• add functional setup
• write tests for server side render
• write tests for server side api
• write tests for client side render

@tomatau I would like to discuss what's the best approach to implement user authentication on this starter kit.

I was looking at Estejs and react-redux-universal-hot-example, but I'm not sure how to do it.

[webpack-isomorphic-tools] [error] .development() method is now deprecated (for server-side instance only, not for webpack plugin instance) and has no effect. Set up a proper process.env.NODE_ENV variable instead

^^^^ Got above when ran 'npm start'

Many thanks love ur work bro, employ me

Hi,

We have been using your boilerplate for our production app, just wanna let you current state breko-hub is broken due to [email protected] is used by koa.

You might refer this issue for the detail, so the workaround for this boilerplate is explicitly used older version [email protected] in package.json.

Hope it might helps.

The devDependency eslint was updated from 6.2.0 to 6.2.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Hi,

I want to build a client <-> server socket connection in one of my routes. I'm not exactly sure how to do that (I couldn't import socket from 'composition/socket.js' in a route due to TypeError: Cannot read property 'protocol' of undefined). Can I get a sample code for event listeners for both server sided API route and client side Component? Thanks.

Hi Thomas,

First of all, thank you for your boilerplate, I played with it for some time and I find it more useful and better structured than more popular ones. Still I don't understand how am I supposed to debug babel-transpired code on a server for this case. Most of the examples that I saw, use gulp to load source maps. Personally, I don't like gulp, and I find it overwhelming to use it only for such a purpose. Can you tell me, is there any better way to do this without gulp?

I also have some suggestions for this boilerplate, but I'd better put them in a separate issue.

Thanx.

HI @tomatau,

What is your recommendation to retrieve data from an external API? May I ask you for some example?

I'm making some tests, but I couldn't get these data inside my thumb component.

Hi
So there is issue in Chrome: styles are applied only after js loaded because classnames added into DOM.
Is there any way to fix the loading process so class names generated at server rendering phase are exact as in css bundle file?

Thanks.

https://github.com/tomatau/breko-hub/blob/master/src/config/webpack.base.config.js

minetype should be mimetype.

Version 3.0.2 of redux-logger just got published.

This version is covered by your current version range and after updating it in your project the build failed.

redux-logger is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

First of all, great boilerplate - thanks for publishing it.

Second, I'm trying to integrate with https://onsen.io and merely referencing one of the components returns window is not defined. I assume these components depend on a window object and won't easily integrate with a server-side rendering process.

Is there a reasonable way to disable the server-side rendering? I'm looking in render-app.js and I found the isBrowser utility but I still get the error even when I return early if isBrowser === false.

Hi, here are some questions/suggestions that I have on my mind after playing with this boilerplate for several days:

• Your koa server setup is spread across several files (partly in app.js, partly in start.js). So at the first time it's hard to grasp, what is happening here. Maybe it would be better to move koa app setup code to app.js file and leave at start.js only isomorphic tools configuration
• I'd suggest react-helmet as a more convenient way to manage page head
• It also would be nice to add react-intl support for internationalization
• You have a socket.io support included in this boilerplate. There is no need for socket.io in my case. Is it necessary for any infrastructure to work properly (I mean hot-reload first of all)?

Thanks and keep up the good work.

Need to figure out a good solution for acceptance tests.. once one is down, a full 'Acceptance' Journey can be coded up and integrated.

Requirements

• can run any browser (possible browserstack or something?)
• can integrate easily with circleCI
• can run a complete user journey or more
• debuggable
• (nice to have) can mock out API calls
• open source
• friendly API for handling transitions or animations, navigating, page events and powerful selectors

Braindump

• Not something in ruby, php, java or any other lang (we're a JS only project here!)
• Not dalek - seems unstable, although good
• Not intern - don't want gulp/grunt.. already using mocha only for functional and unit tests
• Maybe buster - I haven't researched it
• Maybe nightwatch - good but doesn't support babel needs extra helpers for consistent assertions
• Maybe cypresIO - good but doesn't support babel, also Early access beta... can mock API calls which is very powerful but maybe not needed for a full journey anyway as we have functional tests.
• Not just selenium, casper is helpful here but could be much more work... same with webdriver io
• Not pioneer, seems very similar to nightwatch but less popular
• Not protractor, avoiding karma and it's more about angular

export const isBrowser = typeof global !== 'undefined'
I find this in predicates.js file.
But i think global exists in browser, sometimes it is the same as window.
What's the matter?

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Replaced the old Node.js version in your .nvmrc with the new one
• The engines config in 1 of your package.json files was too ambiguous to be updated automatically

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

Your Greenkeeper Bot 🌴

nfl/react-helmet#260 (comment)

Similar to #1, npm run doesn't run out of the box after a fresh install.

This is especially bad for people trying out this stack.

The .env file as in #1 doesn't help here – might it be a similarly simple issue that does the polishing?

This is what I'm getting:

npm test

> [email protected] test /Users/dbr/code/github/breko-hub
> node ./scripts/babel.entry.js --test

module.js:338
    throw err;
    ^

Error: Cannot find module './/webpack.config'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:286:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/dbr/code/github/breko-hub/src/config/webpack.unit-test.browser.config.js:5:52)
    at Module._compile (module.js:434:26)
    at normalLoader (/Users/dbr/code/github/breko-hub/node_modules/babel-core/lib/api/register/node.js:199:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/dbr/code/github/breko-hub/node_modules/babel-core/lib/api/register/node.js:216:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/dbr/code/github/breko-hub/scripts/test.js:4:26)
    at Module._compile (module.js:434:26)
    at normalLoader (/Users/dbr/code/github/breko-hub/node_modules/babel-core/lib/api/register/node.js:199:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/dbr/code/github/breko-hub/node_modules/babel-core/lib/api/register/node.js:216:7)
npm ERR! Test failed.  See above for more details.

Not sure about this, client functional tests don't run in a real location and the connections are made at import automatically.

• write tests for server side socket integration
• write tests for client side socket integration

Hi, I stumbled on your boilerplate and found it is a very good start point to a react-babel-koa project, thanks!
And I got a little confused after I had found babel-register used heavily, I think Babel guys do not agree use it for production:

babel/example-node-server#13
babel-handbook

options:

• webpack strip loader on debug|log function calls + replacement plugin for an empty debug.js file
• straight up replace debug with a stub

Might want to keep debug statements in there just in-case production needs debugging?... could only strip when DEBUG isn't available in env... but would need a recompile for prod debugging... very much worse case scenario here.

There have been updates to the react monorepoundefined

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Will start adding more tests for each piece once functional tests are sorted

• Server side HTML component
• App component
• Head Navigation component
• Flash message component
• Foo & Bar Route components
• flash reducer
• bar reducer
• flash saga
• actions
• util functions
• flash messages server middleware
• set store server middleware