Razzle: What are you struggling with?

[jaredpalmer]

[ranyefet]

Managing CSS is a little bit cumbersome.
I'm using BassCSS as a global utility library and use it with Aphrodite in components like:

const styles = StyleSheet.create({
  header: {
    backgroundColor: 'red',
  }
});

const Header = () => <div className={`m1 p2 ${css(styles.header)}`}>...</div>

Also adding third party components with their own CSS is messy, I either add their CSS into my "global" css file or just write my own styles if possible.

Besides CSS, I guess working with static assets like images also needs special solution to work in server side rendering so it could be improved as well.

Thanks for the great work!

[jaredpalmer]

Yeah Aphrodite biggest downfall is that can't compose / curry styles easily. Thus default styles are almost impossible.

I have been using Pete Hunt's jsxstyle in a few projects recently. My main issue with it is that buttons are really really annoying to deal with.

[sebastiancarlsson]

I'm having problems with CSS as well, I want to use scss and tried to install the isomorphic-style-loader that is mentioned in issue #60, but I can't get it to work, I get this error:

"Warning: Failed Context Types: Required context insertCss was not specified in WithStyles(App). Check the render method of RouterContext".

The author of isomorphic-style-loader has an example project but his router is set up in some different way and I don't understand what I should do to make this work.

Edit: Nevermind I've given up on this now

[developerwok]

How would you guys approach user authentication for this project?

[jaredpalmer]

@developerwok Use passport-js + whatever strategy you want (FB, Github, etc), express-session, and connect-redis / connect-mongo for session persistence. Then pass req.user to your redux store through initial state. You then can write some ensureAuth() express middleware to protect API routes and use redux-auth-wrapper to protect react-router routes.

[jaredpalmer]

@developerwok did that help?

[misterfresh]

Hi Jared, I'm not getting 'redial'. It looks complicated and yet another abstraction layer. Would it be possible to make the data-fetching isomorphic simply by adding in the action creators something like:

if(window)
  return dispatch ( fetch(url) ).then(do stuff) 
else
 return dispatch ( db.select(posts) ) .then(do stuff)

Just asking I haven't completely understood how isomorphic data-fetching works.

The other thing I'm not sure I understand is the async routes / async reducers part. What's the purpose of making that async? If we have SSR, the page will be shown immediately to the user, and while he figures out what to do the bundle.js can load in the background. So it seems to me that if SSR is enabled, it isn't so crucial to reduce the size of the js download, and the added complexity of async routes / reducers to split the code into chunks, is not worth it, especially for the kind of projects that would use a starter-kit to begin with. Feel free to correct me :)

[jaredpalmer]

@misterfresh Async routes ensure bundle size minimization and js sandboxing. For example, if you have a protected but sync route, _all_ of your app's js still gets bundled into your main js file. In contrast, if it's async, it get's chunked out and cannot be loaded without auth. This lets you scale out your app without ever worrying about bundle size or leaking sensitive logic to the client. I agree that this isn't a big deal for little apps, but if you have an app with ~20 routes (like we do on my team) it starts to become more important.

[misterfresh]

I tried to make my routes and reducer async, and it almost works but I get the following error :

combineReducers.js : 36 Unexpected properties "styles" found in previous state received by the reducer. Expected to find one of the known reducer property names instead: "display", "user", "project"

[jaredpalmer]

@misterfresh

Hi Jared, I'm not getting 'redial'. It looks complicated and yet another abstraction layer. Would it be possible to make the data-fetching isomorphic simply by adding in the action creators...

If you are struggling with redial, I suggest replacing it with more vanilla promise resolver. Github search for code with fetchComponentData() you'll find some examples of other promise resolution approaches.

[harrybabu]

It would be great if you can add a stateful component page to the boilerplate, this will help people who have just start adpoting the new react concepts...

[ghost]

I'm struggling with how awesome this boilerplate is. Prepare for takeoff. 😄

[walshe]

is there an easy way to access process.env variables from the client side ?

[jaredpalmer]

@walshe you can put stuff in the initialState that is injected here, make sure you update the respective reducer too. Remember, never ever send any password/api-keys/sensitive info!

[walshe]

ah great, thanks

[walshe]

how can I temporarily ignore all the js lint warnings ?

I tried adding a .eslintignore at the root with

*/.js

nu made no difference

[jaredpalmer]

Remove the standard loader from webpack config.

[walshe]

can you be a bit more specific which part needs changing, I'm a newb to webpack

module: {
preLoaders: [
{
// set up standard-loader as a preloader
test: /.jsx?$/,
loader: 'standard',
exclude: /(node_modules)/
}
],
loaders: [
{
test: /.js$/,
loader: 'babel',
exclude: /(node_modules|server)/,
query: {
cacheDirectory: true,
presets: ["es2015", "react", "stage-0"]
}
},
]
},

[jaredpalmer]

@lewis-elliott unfortunately, redial forces you to have "fat controllers." All SSR data fetching must be declared at the route component level.

[jaredpalmer]

No it is. My mistake. I misunderstood your question. I thought you were talking about nested data fetching. You can checkout the react router 3 mega app demo. Basically, this uses the same technique, but this kit wraps the route declaration in a function if you need to inject reducers.

[sathishkategaru]

i am trying to use css files but cant get it working..Installed css-loader, style-loader..
and in my webpack load
loaders: [
...,
{
test: /.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
exclude: /(node_modules|server)/
}
]
I get following error while
npm run start

[email protected] start /Users/sathish/Desktop/Desktop/reactPro
cross-env NODE_ENV=development node -r "babel-register" ./server

/Users/sathish/Desktop/Desktop/reactPro/node_modules/babel-core/lib/transformation/file/index.js:600
throw err;
^

SyntaxError: /Users/sathish/Desktop/Desktop/reactPro/common/routes/Home/components/Home.css: Unexpected token (1:0)

1 | .text {
| ^
2 | border: 1px solid black;
3 | }
4 |
at Parser.pp$5.raise (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:4246:13)
at Parser.pp.unexpected (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:1627:8)
at Parser.pp$3.parseExprAtom (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:3586:12)
at Parser.parseExprAtom (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:6402:22)
at Parser.pp$3.parseExprSubscripts (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:3331:19)
at Parser.pp$3.parseMaybeUnary (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:3311:19)
at Parser.pp$3.parseExprOps (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:3241:19)
at Parser.pp$3.parseMaybeConditional (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:3218:19)
at Parser.pp$3.parseMaybeAssign (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:3181:19)
at Parser.parseMaybeAssign (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:5694:20)

I tried using this with no luck as it runs in dev but production build still causes issues..
require.extensions['.css'] = () => {
return;
};
Any ideas how to solve this..and how can i use extract-text-webpack-plugin to seperate css file and it can be cached..Thanks to exports in advance..