reactgo / reactgo Goto Github PK
View Code? Open in Web Editor NEWYour One-Stop solution for a full-stack universal Redux App!
License: MIT License
Your One-Stop solution for a full-stack universal Redux App!
License: MIT License
The requireAuth
function (https://github.com/choonkending/react-webpack-node/pull/52/files#diff-70012bb93dfce2be702a0251971c1db5R13) which was introduced in the PR #52 works great if I click on a route with has a onEnter
attached to it.
But if I visit a link via the url for example localhost:3000/dashboard
I am redirected but the following line https://github.com/choonkending/react-webpack-node/pull/52/files#diff-70012bb93dfce2be702a0251971c1db5R15 is never hit. This means the app doesn't know where to redirect to once the user has logged it.
I'm getting ready to deploy to production in a week or so, but have noticed the app.js file is very large > 1MB.
I'd like to make it a lot smaller to make the download faster as it currently takes 5-7 seconds.
Any thoughts on how to get minification going or any other tips for performance (particularly on initial download). I can see the network tab in google chrome dev tools takes a long time for the app.js file.
It's an m-class aws insance, so not the random accessibility t-class instance that would delay initial download.
I've just downloaded a copy of this project and after installing the dependencies, I'm running:
npm run dev
But I get the following error, stating that it couldn't find a few modules inside react-router:
https://gist.github.com/lucasmotta/37142dc1747389417d62 (error log)
And I couldn't find those files (used by react-webpack-node) on react-router:
I am missing something?
Hi, first thanks for this boilerplate. I'm a beginner.
I ran the npm watch command so I don't need to keep manually rebuilding the app every time there's a change. However, upon running it the app isn't recompiling and I get a huge message, a lot of it that has to do with these type of errors in the react components as shown below
WARNING in ./app/components/Vote.react.js
jscs results in errors
parseError @ line 38 char 13
Unexpected token =
Here is that line 38 it is referring to:
_onChange = () => {
It looks like the ES6 isn't being parsed correctly? The app seems to be served properly as I am able to run the app perfectly on localhost. Is it because the babel is only currently meant to render the JS in the front end? Anyone else having these issues?
I've only done some small tweaks to the boilerplate like setting my own secrets and MongoDB which I don't think causes these errors.
Thanks.
Since the new React Router PR (#52) I am doing something like the following once a user has entered the correct details https://github.com/rackt/react-router/blob/master/examples/auth-flow/app.js#L80
Once they get redirected the user store doesn't contain the server user state which can be seen here https://github.com/choonkending/react-webpack-node/blob/master/server/config/routes.js#L62. The user state only contains what has been set at https://github.com/choonkending/react-webpack-node/blob/master/app/stores/UserStore.js#L67
Once I refresh the page the state contains the entire user object, this could be an issue with react router and the transitionTo
but I am not sure.
I have two different login tables, one for User and another for Admin. Can you please suggest what changes needed to do that logging possible from two different tables and also need to keep separate session.
When running npm run devHotLoader
and opening http://localhost:3000/
.
TypeError: Cannot read property 'makeHref' of undefined
at render (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react-router/lib/Link.js:90:19)
at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactCompositeComponent.js:789:34)
at ReactCompositeComponentMixin._renderValidatedComponent (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactCompositeComponent.js:816:14)
at wrapper [as _renderValidatedComponent] (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactPerf.js:70:21)
at ReactCompositeComponentMixin.mountComponent (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactCompositeComponent.js:237:30)
at wrapper [as mountComponent] (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactPerf.js:70:21)
at Object.ReactReconciler.mountComponent (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactReconciler.js:38:35)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactMultiChild.js:192:44)
at ReactDOMComponent.Mixin._createContentMarkup (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactDOMComponent.js:289:32)
at ReactDOMComponent.Mixin.mountComponent (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactDOMComponent.js:199:12)
at Object.ReactReconciler.mountComponent (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactReconciler.js:38:35)
at ReactCompositeComponentMixin.mountComponent (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactCompositeComponent.js:247:34)
at wrapper [as mountComponent] (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactPerf.js:70:21)
at Object.ReactReconciler.mountComponent (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactReconciler.js:38:35)
at ReactCompositeComponentMixin.mountComponent (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactCompositeComponent.js:247:34)
at wrapper [as mountComponent] (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactPerf.js:70:21)
Hey,
First of all love this application - it is a fantastic learning tool!
I have a quick question, is there a reason the node part of this app isn't wrote using ES6?
Most of the syntax still is in ES5. The plan is begin changing them to ES6 syntax, but still leave it properly documented with ES5 syntax for those who are unfamiliar with it.
client / server configs share most options, so can have a common set and just override things like target
as needed.
maybe need a common.config imported by webpack config and dev-server config
I am getting this warning message in the Chrome console:
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) ght:40px;width:40px;-webkit-user-select:
(server) ght:40px;width:40px;user-select:none;bor
If I were to use the Mozilla browser, the client markup would be -moz-user-select
instead of -webkit-user-select
I've isolated the different markup to originate from:
this content
variable from the server:
let content = React.renderToString(React.createElement(Handler));
this container
argument from the client:
render = Iso.bootstrap((state, _, container) => {...
I have modified very little from the boilerplate. I've basically only added an API call to display user information. This problem originates from me using a Material-UI React component as shown below from my repo
<Avatar>gabriel</Avatar>
I don't know if it has anything to do with it, but the results I've described above is from firing up my local server and building my app using the npm run dev
and npm run watch
commands. If I instead use npm run devHotLoader
and npm run watchHotLoader
, my elements all seem to be there, but all CSS styling seems to be completely broken and not existent.
So my questions are:
routes.js
where it seems like styling is removed? What can I do to fix this? html = html.replace("LINK", '');
Thanks!
So I decided to hack away at this boilerplate and thought of it as a great opportunity to learn react router and flux. I have a couple questions that have me stumped though. I get the express js/node code pretty decently. I know that we are setting up our routes for logging in and out, but where I get confused is at React Router.
What im trying to do is Have a Log In page, a Sign up page. The login and signup work fine, they just perform whatever was written in express using passport. However what I want to do is make a route '/dashboard'. I did so and it's just a dashboard component made up of other components like a navbar and body/content. How do I write it in react router in such a way that it only allows me to access the route /dashboard if the user is authenticated. In express I would write a function like this :
function isLoggedIn(req, res, next) {
//if user is authenticated in the session, carry on
if (req.isAuthenticated())
return next(); //cuz we want to move on incase we're stuck here
//if they arent redirect them to the home page
res.redirect('/');
}
However I didn't even write in the dashboard route in express. I only did it in react-router. My component hierarchy is like this right now
<App/>
<Dashboard/>
<NavBar/>
<NavMenu/>
<Body/>
<Login/>
<Signup/>
<About/>
And my routing is like this :
const routes = (
<Route>
<Route name ="signup" path="/signup" handler={Signup} />
<Route name ="login" path="/" handler={Login} />
<Route name ="app" path="/dashboard" handler={App} >
<Route name ="logout" path="/logout" handler={NavMenu} />
</Route>
</Route>
);
I don't understand if i'm grasping the concept right, but from what the webpage is displaying it doesn't seem like it. So basically at localhost:3000/ comes up the log in page, and I can toggle between that and the signup page completely fine, when the log in button is hit it uses express to login (it can use react-router to do it as well correct?), on success it goes to /dashboard (res.redirect('/dashboard') in express). It also seems as routes handled by react router has that single page app feel, whereas express it feels like i'm going to a new webpage (I'm guessing that happens because of react-router just changing the url and rendering the component we want?). In my NavMenu component I link the logout button Logout however the url changes to localhost:3000/logout and nothing happens.
I want to maintain that react-router web feel instead of that express redirect but im struggling and looking for help. :/
The github for this repository is Here
Tested using npm run dev, and npm start.
When I connect to the server in a browser on the same machine that is running the server - no problem. I don't use localhost, and can connect via IP:3000 no problem. Images stay on screen.
When I connect from another PC or phone, the html all loads okay, the s load briefly, and then 2 seconds later they dissapear.
I dont see any errors in the console. It's just a static img src url - i can load the image fine if I Paste it into a browser, but it dissapears after 2-3 seconds when loading the within a page (if the browser and server are on different machines).
What might the issue be here? Some kind of server side rendering vs client side rendering issue? Where to start?
This has been a frequent question. Gotta get this one out!
Hi @choonkending, when i use a decorator function on a react class i get the following console.warn:
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) 3">WebRTC</a></nav><div data-reactid=".v
(server) 3">WebRTC</a></nav><h1 data-reactid=".vt
here is the example decorator
function withWebRTC(ComposedComponent) {
return class WebRTC extends React.Component {
constructor() {
super();
this.state = {
whatever: true
};
}
render() {
return (
<ComposedComponent {...this.props} whatever ={this.state. whatever} />
);
}
};
}
The code is working properly but i guess it wouldn't be always the case.
Currently the catch all in routes.js is not an elegant solution. Every request goes through the react-router unless specifically caught by the if statement.
Also, initialImages.js is definitely not a nice way to load images. We should be looking at https://github.com/webpack/react-starter/tree/master/app/elements for some inspiration, or possibly html-loader.
Can't seem to get this working.
I've ensured mongodb, mongoose are all installed. What am I missing?
rhysedwards$ npm run dev
> [email protected] dev /Users/rhysedwards/Downloads/ideas
> NODE_ENV=development node server/index.js
Environment: development
Error connecting to: mongodb://localhost/ReactWebpackNode. MongoError: connect ECONNREFUSED
/Users/rhysedwards/Downloads/ideas/node_modules/connect-mongo/node_modules/mongodb/lib/server.js:228
process.nextTick(function() { throw err; })
^
Error: connect ECONNREFUSED
at exports._errnoException (util.js:746:11)
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1010:19)
npm ERR! Darwin 14.5.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v0.12.7
npm ERR! npm v2.13.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `NODE_ENV=development node server/index.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'NODE_ENV=development node server/index.js'.
npm ERR! This is most likely a problem with the react-webpack-node package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! NODE_ENV=development node server/index.js
npm ERR! You can get their info via:
npm ERR! npm owner ls react-webpack-node
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/rhysedwards/Downloads/ideas/npm-debug.log
When I run 'npm start' I get endless warnings of "No route matches "/socket.io/?EIO=3&transport=polling&t=XXXXXXXXXXX-XXXXX". Make sure you have <Route path="/socket.io/?EIO=3&transport=polling&t=XXXXXXXXXXX-XXXXX" somewhere in your routes. Any idea why this would be happenning?
Run webpack . Commit and push the changes (I know, not the best idea).
I deployed right to Heroku without doing this and it seemed to work fine.
in app/components/MainSection.react.js
line 7
export default class MainSection extends React.Component {
render() {
const topics = this.props.topics.toKeyedSeq().map((topic, key) => { // line 7
return (<TopicItem id={key} key={key} text={topic.get('text')} />);
}).toArray();
how did this.props.topics
get defined? I was attempting to copy every part of topic into a new mongodb collection type but for some reason this.props
only contained {params: {}, query: {}}
Local login is not possible. Status changes to "Waiting ..." and stays there.
Succeeded connected to: mongodb://localhost/ReactWebpackNode
Error: Failed to serialize user into session
at pass (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/authenticator.js:277:19)
at serialized (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/authenticator.js:282:7)
at /Users/main/Projects/fun/react/react-webpack-node/server/config/passport.js:12:5
at pass (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/authenticator.js:290:9)
at Authenticator.serializeUser (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/authenticator.js:295:5)
at IncomingMessage.req.login.req.logIn (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/http/request.js:48:29)
at /Users/main/Projects/fun/react/react-webpack-node/server/controllers/users.js:16:9
at allFailed (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/middleware/authenticate.js:87:18)
at attempt (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/middleware/authenticate.js:160:28)
at Strategy.strategy.fail (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/middleware/authenticate.js:277:9)
at Strategy.authenticate (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport-local/lib/strategy.js:75:17)
at attempt (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/middleware/authenticate.js:341:16)
at authenticate (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/middleware/authenticate.js:342:7)
at exports.postLogin (/Users/main/Projects/fun/react/react-webpack-node/server/controllers/users.js:21:5)
at Layer.handle [as handle_request] (/Users/main/Projects/fun/react/react-webpack-node/node_modules/express/lib/router/layer.js:95:5)
at next (/Users/main/Projects/fun/react/react-webpack-node/node_modules/express/lib/router/route.js:131:13)
I don't know how to debug this exactly or where to start. When ever I traverse through routes in my single page app sometimes going back to the route the server stops responding and doesn't fetch any data to present to the app. I thought it was my routes at first but I'm not sure where to start or even look at. Is it maybe something to do with my API, could too many ajax calls be getting called? Any advice? The strange thing is, on chrome hitting refresh it will say 'Waiting for localhost..' and on firefox it will refresh normally.
Hi, I cloned a fresh copy from Master and after installing the dependencies I am unable to log in with Google.
From the login
route, after clicking the green "Login with Google" button, I am redirected to the index page where the "Log in" button is still present in the Nav Bar.
On that note, are you working on a test suite? Do you have a list of priorities for new features published? Maybe I can help, I started modeling one after another Alt-Flux boilerplate using Chai/Mocha/Karma.
Still having issues getting this set up locally.
Have looked towards this but can't see the router being called twice in any components;
remix-run/react-router#1595
Thoughts?
Warning: owner-based and parent-based contexts differ (values: `undefined` vs `[object Object]`) for key (router) while mounting Link (see: http://fb.me/react-context-by-parent)
TypeError: Cannot read property 'makeHref' of undefined
at render (/Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/Link.js:90:19)
at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactCompositeComponent.js:789:34)
at ReactCompositeComponentMixin._renderValidatedComponent (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactCompositeComponent.js:816:14)
at wrapper [as _renderValidatedComponent] (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactPerf.js:70:21)
at ReactCompositeComponentMixin.mountComponent (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactCompositeComponent.js:237:30)
at wrapper [as mountComponent] (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactPerf.js:70:21)
at Object.ReactReconciler.mountComponent (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactReconciler.js:38:35)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactMultiChild.js:192:44)
at ReactDOMComponent.Mixin._createContentMarkup (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactDOMComponent.js:289:32)
at ReactDOMComponent.Mixin.mountComponent (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactDOMComponent.js:199:12)
at Object.ReactReconciler.mountComponent (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactReconciler.js:38:35)
at ReactCompositeComponentMixin.mountComponent (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactCompositeComponent.js:247:34)
at wrapper [as mountComponent] (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactPerf.js:70:21)
at Object.ReactReconciler.mountComponent (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactReconciler.js:38:35)
at ReactCompositeComponentMixin.mountComponent (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactCompositeComponent.js:247:34)
at wrapper [as mountComponent] (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactPerf.js:70:21)
Error: Invariant Violation: Server-side <Router>s need location, branch, params, and components props. Try using Router.run to get all the props you need
at invariant (/Users/rhysedwards/Downloads/ideas/node_modules/react-router/node_modules/invariant/invariant.js:44:15)
at componentWillMount (/Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/Router.js:254:34)
at ReactCompositeComponentMixin.mountComponent (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactCompositeComponent.js:228:14)
at wrapper [as mountComponent] (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactPerf.js:70:21)
at /Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactServerRendering.js:42:27
at ReactServerRenderingTransaction.Mixin.perform (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/Transaction.js:134:20)
at Object.renderToString (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactServerRendering.js:39:24)
at /Users/rhysedwards/Downloads/ideas/public/assets/app.server.js:101:39
at /Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/Router.js:53:7
at done (/Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/AsyncUtils.js:14:14)
at next (/Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/AsyncUtils.js:24:12)
at /Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/RoutingUtils.js:120:9
at /Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/RoutingUtils.js:100:13
at done (/Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/AsyncUtils.js:14:14)
at next (/Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/AsyncUtils.js:24:12)
at /Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/RoutingUtils.js:120:9
Why is it when I run the heroku demo, I can refresh and still be logged in whereas when I run it on localhost the data/stores also refresh. Does persistence not work with localhost? It seems like my session ID won't save either as a cookie.
Running devHotLoader of a clean repo pull and opening up localhost:3000 gives me a error such as this:
Invariant Violation: renderToString(): You must pass a valid ReactElement.
I thought this was a peerdependency problem so I added react and reactdom into the devDependencies in Package.json but that didnt resolve the problem. Is the hot loader not running on 3000? I know the assets are proxied from 3001/assets
What's the reason for this?
There are tons of goodies to be used from the alt utils. I'd like to provide a really solid starting point with good examples of how to utilise them.
How to create a new layout for admin here. What all are the changes needed in routes and webpack.config files.
Hi, I want to transition to a new page I've made after login, or after adding a topic (in the demo app), etc.
I've added the page to the routes.jsx section, and i can navigate to the page via URL no problem, or via ..
But, what i need to do is navigate to a page of my choosing after creating a topic (e.g. in TopicActions.js or TopicStore.js (which is better and how can I do it?))
Just wondering if anyone has successfully managed to set up a webpack-dev-server for this project?
As mentioned here #50 (comment) I am having issues when trying to set up an authenticated route.
You can see in the following code example - if you try and visit the about route via the nav bar you will successfully see the login page such as http://localhost:3000/login?nextPath=%2Fabout
But if you go to http://localhost:3000/about
directly the following error is shown:
Error: Unhandled aborted transition! Reason: [object Object]
at Function.React.createClass.statics.handleAbort (/Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/createRouter.js:262:55)
at Function.dispatchHandler (/Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/createRouter.js:379:20)
at /Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/createRouter.js:349:29
at /Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/Transition.js:64:41
at /Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/Transition.js:69:9
at Function.Transition.to (/Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/Transition.js:72:15)
at /Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/createRouter.js:348:22
at Function.Transition.from (/Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/Transition.js:51:15)
at Function.dispatch (/Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/createRouter.js:345:20)
at Function.refresh (/Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/createRouter.js:396:16)
at Function.run (/Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/createRouter.js:392:16)
at Object.runRouter [as run] (/Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/runRouter.js:45:10)
at renderToMarkup (/Users/joshuahornby/code/react-webpack-node/public/assets/app.server.js:132:29)
at UniversalRenderer.render (/Users/joshuahornby/code/react-webpack-node/public/assets/app.server.js:155:23)
at /Users/joshuahornby/code/react-webpack-node/server/config/routes.js:83:16
at Layer.handle [as handle_request] (/Users/joshuahornby/code/react-webpack-node/node_modules/express/lib/router/layer.js:95:5)
After some discussion on Reactiflux with @ericclemmons I believe the issue is due to the server render function and this package would fix this https://github.com/ericclemmons/react-router-server-location
I think updating the server function to call the Router.create
function like https://github.com/ericclemmons/react-router-server-location/blob/master/test/support/express.js would fix the issue. Although not sure how this would work with Iso.
This would also help towards solving issue #47 which I believe to be a big feature that should be added to this boilerplate.
It'd be pretty awesome to have this as a Yeoman generator :)
I have my routes set up in a way where nested routes exist. When hitting refresh on non nested routes it loads the stores and html fine with this:
app.get('*', function (req, res, next) {
var html = App(JSON.stringify(res.locals.data || {}), req.url);
html = html.replace("TITLE", Header.title)
.replace("META", Header.meta)
.replace("LINK", Header.link);
res.contentType = "text/html; charset=utf8";
res.end(html);
});
So I decided to mess with a bit and try to understand why none of the css or data was loading on the refresh of nested route that is dynamic (based off '/x/:id') so I decided to do something like this.
app.get('*', function (req, res) {
Router.run(routes, req.path, function (Handler, state) {
var element = React.createElement(Handler);
var html = React.renderToString(element);
res.render('main', { content: html });
});
});
I just wanted to know if what was written in the boilerplate was supposed to deal with nested routes, if so I'll know my problem lies elsewhere. I haven't tested this yet, because I have to require my 'route' here on the server as well. I also have little idea of what is going on in the boilerplay app.get(*)
I don't getting session data in the topics.js page, How to fix it ?
I am using this boilerplate as the base for a project I am currently working on.
Once a users has logged out I want to stop them being able to access certain areas of the app, for example a <Dashboard />
component.
Do you know of a nice way to do this?
I've tried using external libraries that require css files via require('someFile.css')
result in errors like the following
ERROR in ../~/react-cropper/~/cropper/dist/cropper.css
Module parse failed: node_modules/react-cropper/node_modules/cropper/dist/cropper.css Line 10: Unexpected token .
You may need an appropriate loader to handle this file type.
| * Date: 2015-08-22T04:54:51.269Z
| */
| .cropper-container {
| position: relative;
| overflow: hidden;
@ ../~/react-cropper/dist/react-cropper.js 21:0-35
The CSS modules set up is great. However, I can't seem able to use the 'composes' syntax in my css/scss files. (https://github.com/webpack/css-loader#composing-css-classes)
Does anyone have the same issue?
I rather have the clear distinction that it's a jsx file
Can someone explain the startup-init flow that makes the user become automatically logged in when loading the page in a new window?
I login using the form, then close the window. When I come back, I am still logged in.
I am trying to trace the client and server code to see how this is done, but I don't see it clearly.
Running npm run watchDev
in one tab and npm run dev
(actually using gulp which reloads server on changes).
app.js.map
is being built. However, even though Chrome is configured to handle source maps, I'm not seeing in Chrome Developer Tools
. Any other hoops I have to jump through? :)
I'm a little confused on how webpack is grabbing npm modules and including them.
For example:
loaders: commonLoaders.concat([
{ test: /\.css$/, loader: "style!css" },
{ test: /\.scss$/,
loader: ExtractTextPlugin.extract("css?sourceMap!sass?sourceMap&outputStyle=expanded" +
"&includePaths[]=" + (path.resolve(__dirname, "./bower_components")) +
"&includePaths[]=" + (path.resolve(__dirname, "./node_modules")))
}
])
i Know this includes our node_modules path, but what if im using a library, and I want to link its css and js files to my basehtml, then I would go to helmconfig.js right? Then add the link href to the links. But would it be something like this?
{ "rel": "stylesheet", "href": "../../node_modules/alloyeditor/dist/alloy-editor/assets/alloy-editor-ocean-min.css"}
and the js file would I just include it <script></script> tags in the basehtml? Or is everything in the npm modules already applied?
I should just require("") it right?
I did npm run build
then started in production mode npm start
and in the browser network I see that app.js weighs 1.34 Mb when in your demo it's 408 Kb.
Hi, in trying to understand the flow of the app, I came upon the app/app.js file where the universalRenderer is exported per below:
export default universalRenderer(alt, routes, html);
However, I am unable to find what file actually imports it. I did a search but wasn't able to find anything. Is the universalRenderer only executed on the client-side after it's built or minified or something?
Thanks!
I can run node run node server/index.js
OK. I open http://localhost:3001/
and it renders Cannot GET /
.
Your repo is the closest to what I am looking for to start my foray into reactjs.
I prefer to run on windows for the client app that will hit my Laravel API already setup for CORS.
I see a base.html in the app DIR. What am I missing here?
There seems to be an issue with URLs with slashes.
For example if you try
<Route name="about/us" handler={About} />
You will receive the following error
Warning: No route matches path "/about/us". Make sure you have <Route path="/about/us"> somewhere in your routes
Warning: No route matches path "/about/assets/styles/main.css". Make sure you have <Route path="/about/assets/styles/main.css"> somewhere in your routes
Warning: No route matches path "/about/assets/app.js". Make sure you have <Route path="/about/assets/app.js"> somewhere in your routes
The full routes.js
file is here
import React from 'react';
import { Route, DefaultRoute } from 'react-router';
import App from 'components/App.react';
import Vote from 'components/Vote.react';
import About from 'components/About.react';
import Login from 'components/Login.react';
import Logout from 'components/Logout.react';
const routes = (
<Route name="app" path="/" handler={App}>
<Route name="login" handler={Login} />
<Route name="logout" handler={Logout} />
<Route name="vote" handler={Vote} />
<Route name="about/us" handler={About} />
<DefaultRoute handler={Vote} />
</Route>
);
export default routes;
Not sure what might be causing this? Something to do with express or node?
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.