jaredpalmer / razzle Goto Github PK
View Code? Open in Web Editor NEW✨ Create server-rendered universal JavaScript applications with no configuration
Home Page: https://razzlejs.org
License: MIT License
✨ Create server-rendered universal JavaScript applications with no configuration
Home Page: https://razzlejs.org
License: MIT License
My problem is Aphrodite is a lack of composebility....base styles with overrides are impossible. I prefer jsxstyle for this, but it has not yet been updated for React 15.
Should we move to CSS Modules in the meantime? If so, What PostCSS plugins should we use?
Pretty sure I broke it with v2. 😨
Hi Jared,
I just tried to deploy an app I've been working on for the last month to Heroku.
After deploying I got the following errors:
2016-06-08T15:20:14.906386+00:00 app[web.1]: > npm run clean && npm run build && cross-env NODE_ENV=production node ./build/server
2016-06-08T15:20:14.906349+00:00 app[web.1]:
2016-06-08T15:20:16.312074+00:00 app[web.1]: > rm -rf build
2016-06-08T15:20:16.312075+00:00 app[web.1]:
2016-06-08T15:20:17.182897+00:00 app[web.1]: > [email protected] build /app
2016-06-08T15:20:17.182898+00:00 app[web.1]: > webpack -p --config ./webpack.config.prod.js && webpack -p --config ./webpack.server.config.prod.js
2016-06-08T15:20:17.182899+00:00 app[web.1]:
2016-06-08T15:21:12.058454+00:00 heroku[web.1]: Stopping process with SIGKILL
2016-06-08T15:21:12.058454+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2016-06-08T15:21:13.159176+00:00 heroku[web.1]: Process exited with status 137
2016-06-08T15:21:13.174340+00:00 heroku[web.1]: State changed from starting to crashed
It looks like the build
script takes more then 60 seconds which make Heroku think it failed.
I guess that I could run the build locally and commit the files and skip building altogether but I wonder if there's a better way?
Any suggestions?
Thanks!
Was thinking maybe "Airrrrr" (Async Isomorphic React Redux React-Router Redial).
Hi,
First of all: thanks for this useful boilerplate, great to get me started!
While trying to wrap my head around everything that is going on, I noticed that upon loading one of the posts pages directly (f.ex. http://localhost:5000/post/you-smart-you-loyal), the console spits out the following warning:
Unexpected key "currentPost" found in previous state received by the reducer. Expected to find one of the known reducer keys instead: "posts". Unexpected keys will be ignored.
When I reach the page by clicking on the link on the homepage, this warning does not appear.
Is this by design? Does this boilerplate assume there is always a single point of entry?
Hi,
Can you give the webpack configuration to use css-loaders?
I tried a lot of things from the internet, nothing worked.
Thanks
What do you think about those plugins?
FormidableLabs/spectacle#154
Hello,
What is the best way to load images and other assets that will work for both client & server?
I could add url-loader
and file-loader
to webpack config but it will not work on the server.
Are there other options?
Thanks,
Ran.
tired of all the semicolons
Hi, I found your boilerplate yesterday and it seems very cool !
But I have a bug when I want to run your example.
When I go to http://0.0.0.0:5000/ all works fine.
But if I go to http://0.0.0.0:5000/post/hows-business-boomin and then refresh the page, I have some errors into my Chrome and Firefox inspector:
I think it's a bug relate to asynchronous reducers. Why do you want asynchronous reducers ?
Hi @jaredpalmer thanks for starter :) it's awesome. I liked it much so I wanted to try to port it to my reasync
lib nex to redial
to see differences. I found it quite easy, you have done a lot of good work, but I have found one issue
When i server-side render page where async reducer is used (Post), i get following error
Unexpected key "currentPost" found in initialState argument passed to createStore. Expected to find one of the known reducer keys instead: "posts". Unexpected keys will be ignored.
With redial, it only show empty page, as it is not doing fetching when initial state is i page. I little bit tweaked your functions if should something be fetched and make it working in my fork with reasync. Take a look if you want https://github.com/svrcekmichal/react-production-starter
It's working because I'm fetching data on client, but it's not solving the issue. But if you find out how to work around that async reducer it would be awesome! :)
create-react-app
's setup.babel-preset-optimize
and babel-plugin-istanbul
The posts route here (https://github.com/jaredpalmer/react-production-starter/blob/master/src/routes/Post/index.js#L6) show posts/:slug, slug being dynamic
I was looking into having a short one, like "http://domain.stuff/my-post-slug", which would translate to path: ':slug'
at the same spot. Thing is, no way to make it work that short
Using the same with regular routing (not ssr and no dynamic redux routes loading), it works without problem. But I just can't see how to solve this in those fields — sorry if the answer is obvious; but thx a lot if it exists !
(ps thx a lot for the patterns and arch exposed in this repo! best work found)
The first time I heard about hot reloading I was so euphoric, but since when ever I try to test it in an open source project, it doesn't seem to work. Can you verify that this doesn't work or do I use it wrong?
I followed the installation guide from the README.md. I called $ npm start
. This should start watching the source files and hot reloading, right? I then changed this line from Home
to Home2
. I'd expect to see Home2
now in my browser after re-compiling, but I only get a warning in the console:
[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.
[HMR] - ./src/components/Nav.js
Hi.
How can I use Less for building my stylesheets? Because I don't want to use Aphrodite. Please, help me, because I started to use this boilerplate for the real project.
Loving your starter-kit, has been a real inspiration for me! I would love to see the use of react-hot-loader. Currently the new (awesome!) version is in beta, almost done and it has got some really nice features. Is this something you would consider?
React-boilerplate
(the most popular react boilerplate on github) is struggling to implement ssr. Obviously, that's this project's bread and butter. Wondering if it makes sense to rename this project, react-boilerplate-ssr
to increase discoverability.
Any other ideas? Objections? Comments?
Boilerplates work best when things can be deleted easily. I would like to create some recipes for common changes people might have such as:
“In a Redux app, state keys like currentPost are usually an anti-pattern.” - Dan Abramov
Should implement normalizr + selectors
Is there a particular reason as to why the HttpClient
still resolve's if the error status is 404?
I have noticed that the starter project will just be stuck at Loading... if the slug is incorrect. Wouldn't it be better if all errors are rejected so the reducers can deal with it?
Use config vars instead of hard coding the build directory.
I saw you starred kube recently. I would really love to hear your thoughts on it.
Hi @jaredpalmer , started working on a project using your starter-project. Great work!
I have a question about dispatching redux actions on user interactions (e.g. button click). My questions is more about the right syntax. In the past I called the constructor and called the bind function like that:
function mapDispatchToProps(dispatch) {
return bindActionCreators({
importedAction,
}, dispatch);
}
class Calendar extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(programId) {
this.props.importedAction()
.then((response) => {
do something with response
});
}
}
....
render() {
return (
<a onClick={this.handleClick}>Click me to dispatch action</a>
)
}
I think you have a babel-plugin installed which allows you to avoid writing the "extends React.Component" all the time. I cant see 'bindActionCreators' as well.
Question, how would I write above in the way it could be used in your starter project?
now - OccurenceOrderPlugin
should -OccurrenceOrderPlugin
(rr)
Hello
I have actually an issue with my isomorphic react application. There is also code splitting with webpack.
I have been able to reproduce my issue with your project by modifying the render function of client.js
let render = () => {
// We need to have a root route for HMR to work.
const createRoutes = require('./routes/root').default;
const routes = createRoutes(store);
// Pull child routes using match. Adjust Router for vanilla webpack HMR,
// in development using a new key every time there is an edit.
// Render app with Redux and router context to container element.
// We need to have a random in development because of `match`'s dependency on
// `routes.` Normally, we would want just one file from which we require `routes` from.
ReactDOM.render(
<Provider store={store}>
<Router routes={routes} history={browserHistory} key={Math.random()}/>
</Provider>,
container
);
};
The problem can been seen by enable Network Throttle (Regular 3G).
Go to the page http://localhost:5000/post/hows-business-boomin and you can seen a blink of the page.
The page is displayed once thank to server rendering et then a second time and this is the problem.
It seems that the react-router client side a rendering the route again.
Have you been able to experience the same issue ? Can you explain me why plz ?
Why did wrapped the ReactDOM.render function into match({ routes, location }, () => {}
by the way ?
Best regards
Sorry if this is a noob question. What happens when the API call needs user's session. I assume those session cookies won't be forwarded to the API endpoint when the rendering happens on server-side?
Any idea on how should I forward user's cookies to the API endpoint. I think it will be somewhere inside HttpClient.js?
Thanks
Repo appears to start fine with 'npm start,' however the terminal returns the following error:
ERROR in ./client/index.js
Module parse failed: /home/nitrous/code/react-server-boilerplate/node_modules/standard-loader/index.js!/home/nitrous/code/react-server-boilerplate/client/index
.js Unexpected token (37:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (37:6)
Will require file-loader and perhaps asset-webpack-loader
Hi,
Thanks for the great repo!
I have a concern about the usage of babel-register on the server.
According to babel docs, it should not be used in production.
Note that this is not meant for production use. It's considered bad practice to deploy code that gets compiled this way. It is far better to compile ahead of time before deploying.
Is there a plan to tackle this issue?
@jaredpalmer what are your thoughts about updating this to React 15.0.1?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.