svnm / react-router-redux-example Goto Github PK

View Code? Open in Web Editor NEW

206.0 12.0 54.0 3.63 MB

react, redux, react-router, reselect, css-modules

JavaScript 84.92% CSS 14.20% HTML 0.88%

react-router-redux-example's Introduction

react-router-redux-example

A complete and minimal react-router-redux example

latest version of react, redux, reselect and react-router
hot reloading with webpack dev server
Universal/ Isomorphic server rendering
css modules and cssnext
testing with enzyme.

Dependencies

react 15.3.1
react-redux 4.4.5
react-router 2.7.0
react-router-redux 4.0.5
redux 3.5.2
reselect 2.5.2

Run Dev

webpack dev server with hot reloading, no server rendering

npm install
npm run dev
open http://127.0.0.1:5000

Run Prod

Universal server side rendering!

npm install
npm run build
npm run prod
open http://127.0.0.1:3000

Testing

Using Enzyme, Tape and Jsdom

npm install
npm test

Versions

Version 1 was a little simpler not using reselect, no testing and using react v14
Version 2 is the current version with reselect, react v15 and a sidebar for different component types

License

MIT

react-router-redux-example's People

Contributors

Stargazers

Watchers

Forkers

jameszmartin michaelbontyes codii javierlopezdeancos bigethan danawhite zhuyuming abhay-joshi-git laggingreflex wesovilabs ariesw sunkeyhub petitspois lonelypale yuyaohshimo pkapoor1989 johanbissemattsson digideskio darmin000 sqtihxy twaider unclemeric ashokvijayendra linhanfeng emacadocious sunlightwdd zxlweb alisonzthu ooyoow tecsyscom maximenajim robksawyer gauravbansal74 liushili72 taikongfeizhu justinpincar apapacy gitby15 jarben elfscript createhui myuanyuan tvollmer react-cd bigbigbo harrifeng vdoan hhy5277 hsh0917 uttam28s gandhigautam

react-router-redux-example's Issues

Sass won't work in prod build instead of css files

First off, thanks for putting this together @StevenIseki. It's been a fabulous tool to start my project with.

I tried putting in the sass loader into the build and got it working easily and perfectly for dev but nothing but CSS files works for when trying to do npm run start:prod. It vomits saying:

/Users/danwilt/Projects/64i-v2/node_modules/babel-core/lib/transformation/file/index.js:591
      throw err;
      ^

SyntaxError: /Users/danwilt/Projects/64i-v2/src/components/App/App.scss: Unexpected token (1:1)
> 1 | @import '../../styles/animations';
    |  ^
  2 | @import "../../styles/variables";
  3 | 
  4 | :global {
    at Parser.pp.raise (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:89:8)
    at Parser.pp.parseExprAtom (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:517:12)
    at Parser.parseExprAtom (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:18:22)
    at Parser.pp.parseExprSubscripts (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:272:19)
    at Parser.pp.parseMaybeUnary (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:252:19)
    at Parser.pp.parseExprOps (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:183:19)
    at Parser.pp.parseMaybeConditional (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:165:19)
    at Parser.pp.parseMaybeAssign (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:128:19)
    at Parser.pp.parseDecorator (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:199:26)

Why is babel trying to parse this as a JS file when I have a loader specifically targeting .scss files. I'm pretty sure I have it setup correctly because when I run npm run build and npm run start:dev it works correctly. Any ideas?

windows node_env not internal or external command, operable program batch file

npm run dev

node_env not internal or external command, operable program batch file

windows:nt v6.1
node v7.1
npm v3.10
error code elifecycle

How do I get this to run with webpack hot middleware?

I tried following the steps https://github.com/glenjamin/webpack-hot-middleware.

Somehow changing none of the components cause the UI to update. Any idea why?

Converting existing react+redux+react-router App to server side render

I currently have a an SPA that uses React+Redux+react-router deployed using firebase hosting. However I wanted utilize server side rendering. I am looking at this project but still unclear about how to achieve it. Can you recommend a post /article as to how to add such functionality. Would i use something like heroku to run the server in addition to firebase hosting or would i just use heroku and not firebase hosting.

Getting errors after running npm run build in V2

'rm' is not recognized as an internal or external command, operable program or batch file. 'true' is not recognized as an internal or external command, operable program or batch file.

Missing npm dependency 'request'?

Hey there,

Thanks for putting this together...really awesome example! Just FYI, upon running per the instructions in the readme (and npm run dev, etc.), received an error about module 'request' not found. Traced it down to ./src/api/routes/npmPackages.js, using the request node package there and sure enough, wasn't listed in package.json.

Just thought I'd let you know.
Cheers!

const scrollHistory = useScroll(() => browserHistory)() runtime error

index.js:27 runtime error useScroll is not a function

useScroll returns an object, which has a single method renderRouterContext

Should I do that?:

const scrollHistory = useScroll(() => browserHistory).renderRouterContext()

Can't seem to get images to work with both dev and prod modes

So I added the url-loader etc:

    {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
      loader: 'url-loader?limit=10000',
    }

So in SiteSidebar.js if I do:

import imgSrc from '../../roger93.jpg'

and then later:

          {/*<img styleName='LogoImage' src='http://i.imgur.com/79JhCaq.png' />*/}
          <img styleName='LogoImage' src={imgSrc} />

In dev mode, it will base64 encode images until 10k and just do a path for images > 10k. Awesome.

But when I do npm run build, npm run prod it fails:

SyntaxError: /Users/rstudner/projects/react-router-redux-example/roger93.jpg: Unexpected character '�' (1:0)
> 1 | ����&

I'm guessing that in prod somehow it isn't either figuring out how to point to the image (or something).

Since you hadn't yet addressed an example of "local images" (versus the SideSidebar pointing at a remote image) I was wondering if you had any insight with how to do "local images".

To note, my image was just at the root of the project, so not inside of public. (hence the ../..)

Can't get the classnames to line up correctly

Love this example repository.

I'm trying to set my own up, but can't seem to shake this checksum error.

I have cmrh.conf.js with...

module.exports = {
  generateScopedName: "[name]__[local]___[hash:base64:5]",
};

And in my webpack.config...

loader: ExtractTextPlugin.extract("style", "css?modules&localIdentName=[name]_[local]__[hash:base64:5]"),

Any ideas?

Thanks!