faceyspacey / redux-first-router-boilerplate Goto Github PK

License: MIT License

JavaScript 81.31% CSS 18.69%

redux-first-router-boilerplate's Introduction

Simple Universal Boilerplate of Redux-First Router

For a demo/boilerplate that goes even farther make sure to check out the "DEMO". A lot more features and use-cases are covered there, but this boilerplate is the best place to start to learn the basics of RFR, especially if you're new to any of these things: SSR, Code Splitting, Express, APIs, Webpack and Redux in general.

Installation

git clone https://github.com/faceyspacey/redux-first-router-boilerplate
cd redux-first-router-boilerplate
yarn
yarn start

Files You Should Look At:

client code:

src/configureStore.js
src/routesMap.js - (the primary work of RFR)
src/components/Switcher.js - (universal component concept)
src/components/Sidebar.js - (look at the different ways to link + dispatch URL-aware actions)

server code:

server/index.js
server/render.js - (super simple thanks to webpack-flush-chunks from our "Universal" product line)
server/configureStore.js - (observe how the matched route's thunk is awaited on)

redux-first-router-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

mengtzu ashleahhill machellerogden r0bson dalebaldwin herlevsen sleepycat ericblancas23 nvwebd derickwarshaw coletmnz markesplana netanelben jmsdevx

redux-first-router-boilerplate's Issues

SSR pages with actions load but non ssr pages fail

I built a new site based off this boilerplate and have done a previous site with it as well but the new one has this problem.

I can get SSR pages with data from an external api to load using an action I've created however if I navigate to that page from a different page that has been SSR loaded first then React just clears the dom and errors out.

mapStateToProps() in Connect(TourSearch) must return a plain object. Instead received undefined.

If I reload the page it comes up fine. Any idea what would be causing this?

Current RFR version is 1.9.19

thanks

webpack 4

any webpack 4 example? somewhere
cheers

Warning about JSON and unicode

Hey discovered this one over the last couple of days. I'm pulling a rather large set of JSON feeds from an API I control which contains a large amount of data I don't control. Some of that data contains unicode characters in particular \2028.

When reloading and taking the server rendered version I would often get a red screen of death but making a change and letting the page hot reload would let the page load fine. Also navigating to that page without triggering off a browser reload would also let that content load.

From what I can tell this is an issue with the state object loaded into the script tag on page and React having trouble re-hydrating from that object if it contains certain unicode characters.

It might be worth putting in a warning somewhere here and on other universal modules that might have issues with JSON that isn't as clean or controllable as we would like.

`build:node` fails because `server/api.js` doesn't exist

The build:node script:

cross-env NODE_ENV=production babel server/index.js -o buildServer/index.js && babel server/api.js -o buildServer/api.js

Fails at babel server/api.js -o buildServer/api.js because this file isn't in the boilerplate.

minifying vendor brings up development build errors

You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.

I noticed the vendor file wasn't getting uglified so modified my webpack prod build to do so. After doing that I started seeing this error which I'm guessing indicates somewhere auto dll isn't recognising the NODE_ENV settings. Any idea how to fix it?

The boilerplait doesn't reflect 'basename'-based changes made to rudy-named branch.

The boilerplate is based on redux-first-router-link v1.4.1 which is based in its turn on original history package, not on rudy-history, as I can see. I was embarrassed by "Rudy" string at the picture...

So, this boilerplate here is without possibility to specify the basename for application?

Fails to start on Windows 10

Listening @ http://localhost:3000/
{ Error: invalid argument
    at pathToArray (C:\Users\[username]\Documents\Personal Projects\redux-first-router-boilerplate\node_modules\memory-fs\lib\MemoryFileSystem.js:44:10)
    at MemoryFileSystem.writeFileSync (C:\Users\[username]\Documents\Personal Projects\redux-first-router-boilerplate\node_modules\memory-fs\lib\MemoryFileSystem.js:200:13)
    at C:\Users\[username]\Documents\Personal Projects\redux-first-router-boilerplate\node_modules\autodll-webpack-plugin\lib\createMemory.js:62:11
    at runCallback (timers.js:800:20)
    at tryOnImmediate (timers.js:762:5)
    at processImmediate [as _immediateCallback] (timers.js:733:5)
From previous event:
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:528:3)
  code: 'EINVAL',
  errno: 18,
  message: 'invalid argument',
  path: '\\assets\\vendor.js' }

Just went to get my dev setup running on my Win10 machine and discovered that yarn start fails with the above error. My app and the boilerplate work on my Mac fine so guessing this is something windows related.

Errors treated as cross-origin

https://reactjs.org/docs/cross-origin-errors.html#webpack

Some JavaScript bundlers may wrap the application code with eval statements in development. (For example Webpack will do this if devtool is set to any value containing the word “eval”.) This may cause errors to be treated as cross-origin.

If you use Webpack, we recommend using the cheap-module-source-map setting in development to avoid this problem.