Comments (21)
@developerwok did that help?
from razzle.
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 :)
from razzle.
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!
from razzle.
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.
from razzle.
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
from razzle.
How would you guys approach user authentication for this project?
from razzle.
@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.
from razzle.
@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.
from razzle.
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"
from razzle.
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.
from razzle.
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...
from razzle.
I'm struggling with how awesome this boilerplate is. Prepare for takeoff. 😄
from razzle.
is there an easy way to access process.env variables from the client side ?
from razzle.
@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!
from razzle.
ah great, thanks
from razzle.
how can I temporarily ignore all the js lint warnings ?
I tried adding a .eslintignore at the root with
**/*.js
nu made no difference
from razzle.
Remove the standard loader from webpack config.
from razzle.
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"]
}
},
]
},
from razzle.
@lewis-elliott unfortunately, redial forces you to have "fat controllers." All SSR data fetching must be declared at the route component level.
from razzle.
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.
from razzle.
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..
from razzle.
Related Issues (20)
- HMR does not activate when a file containing only types is modified
- Dependency Terminate uses GPLv2 License - any alternative?
- Can't deploy to heroku
- plugin options are coming to be undefined HOT 4
- Content Security Policy Implementation HOT 1
- Regarding deployment in server HOT 5
- For Laravel project, add it where ? please HOT 1
- Is the project abandoned? 🤔 HOT 8
- How to expose config to out ?
- digital envelope routines::unsupported HOT 1
- Why razzle forcing buffer and process package in ProvidePlugin if webpack version is 5
- Unexpected token: punc (.) HOT 6
- Does latest razzle support react 18 ? HOT 1
- Support for react 18 HOT 4
- ~Wrong repo~
- How to use webpack 5 with Razzle 4 HOT 1
- Razzle utilizes vulnerable versions of browserslist and minimatch as nested dependencies, causing security issues.
- Maybe mark this project as abandoned in its github repository description and in readme? HOT 2
- Anyone has a fork updated for webpack-dev-server 5? HOT 1
- How to use 'mini-css-extract-plugin' in razzle config HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from razzle.