metnew / suicrux Goto Github PK
View Code? Open in Web Editor NEW๐ Ultimate universal starter with lazy-loading, SSR and i18n. [not maintained]
License: Apache License 2.0
๐ Ultimate universal starter with lazy-loading, SSR and i18n. [not maintained]
License: Apache License 2.0
After I ran npm run build
, then I serve the dist folder, then the app is running at localhost:5000.
But when I directly type 'http://localhost:5000/auth' in the browser address bar, it will show 'Not Found'.
Why is that?
More bugs <3
When running yarn run dev
, the site will show unstyled content (skeleton html structure without CSS applied) for .25 seconds or so on refresh of browser.
CSS loaded first.
.25 seconds of skeletons.
yarn run dev
(e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, useful links, eg. stackoverflow, gitter, etc)
SSR doesn't appear to have this problem. Your SSR implementation and separation from any generic backend API is a major plus to this boilerplate!
Server is running on ${PORT} port is never reached when running SSR.
chalk.blue(USER IS LOGGED IN: ${req.user.isLoggedIn ? 'YES' : 'NO'}
)
I never see these outputs in console on SSR. The chalk blue one never.
git clone, npm install, npm run build, npm run start
Demo is all messed up, it used to be fine a few builds ago in SSR :( . I was injecting babel-polyfill and whatg-fetch in the past at entry and it was all smooth sailing. I saw you added some polyfill stuff, so I took your new refactor completely (maybe I'll try the old code, Im thinking this is webpack? theres no console errors in IE11, it's hitting the API, etc.).
I need to support IE11. Not sure what changed in this boilerplate that caused this! Any help/guidance would be appreciated. I'll have to nail this one down. IE11 isn't really part of your scope, but it was working perfectly not too long ago :(
It'd be nice to get a working example that implements KeystoneJS as an admin area. I've started this over at https://github.com/robksawyer/keystone-react-template-mern/tree/feature/semantic-ui-implementation, but I don't have the time to see get it fully functional.
This would be useful as Keystone provides a lot of backend API features and I think paired with semantic ui front could make a serious NodeJS framework.
I'm still getting some problems when it comes to OfflinePlugin configuration for universal apps with auth. The current implementation works, but better OfflinePlugin config can make it works even better. Can anyone help with it?
Hello!
I am trying to deploy the production built application.
Everything runs fine in dev mode, however when i build it for production after the Auth page, I get
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined." erros.
How should I try to solve this problem? Does it have to do with my code, or just missing something in the webpack prod bundle?
Best Regards,
Pjata
in ./src/common/actions/auth/index.js
Syntax Error: Unexpected token, expected , (19:33)
setLocalToken(result.data.token])
Hi, thanks for the project !
After properly compiling and running npm run dev in the browser the app doesn't appear.
The console states:
[HMR] Waiting for update signal from WDS...
lowPriorityWarning.js?d93c:40 Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see https://fb.me/react-create-class
printWarning @ lowPriorityWarning.js?d93c:40
lowPriorityWarning @ lowPriorityWarning.js?d93c:59
get @ React.js?24ef:108
whyDidYouUpdate @ index.js?3f48:35
(anonymous) @ index.jsx?1f8a:18
(anonymous) @ client.js:3799
webpack_require @ client.js:660
fn @ client.js:86
(anonymous) @ client.js:7263
webpack_require @ client.js:660
(anonymous) @ client.js:709
(anonymous) @ client.js:712
index.js?3f48:41 Uncaught TypeError: Cannot set property createClass of # which has only a getter
at whyDidYouUpdate (eval at (client.js:7240), :41:23)
at eval (eval at (client.js:3799), :37:40)
at Object. (client.js:3799)
at webpack_require (client.js:660)
at fn (client.js:86)
at Object. (client.js:7263)
at webpack_require (client.js:660)
at client.js:709
at client.js:712
whyDidYouUpdate @ index.js?3f48:41
(anonymous) @ index.jsx?1f8a:18
(anonymous) @ client.js:3799
webpack_require @ client.js:660
fn @ client.js:86
(anonymous) @ client.js:7263
webpack_require @ client.js:660
(anonymous) @ client.js:709
(anonymous) @ client.js:712
client.js?102b:67 [HMR] connected
Currently, lazy-loading works using LazyLoad component, which is custom + very minimalistic. I think it would be better to make maintained package responsible for lazy-loading. react-universal-components has lazy-loading out-of-box and provides cool additional options. But personally, I see a problem in react-universal-component
s hard-dependency with webpack-flush-chunks. You can find more info about these libraries in their repos + blog of the creator of these plugins.
I'm just curious if there's still a benefit in adding the Webpack DLL plugin to shrink build times during dev cycles? The reason I ask is because I'm not sure if it wouldn't be needed in this project because it already has something similar
Tried to add Dimmable dimmer to use blurring feature of semantic
{isLoggedIn && !sidebarOpened && <Dimmer.Dimmable dimmed={true}><Dimmer active={true} /></Dimmer.Dimmable>}
Doesn't work. Even with a <StyledDimmerDimmable>
with zIndex applied.
{isLoggedIn && !sidebarOpened && <Dimmer active={true} />}
or with <StyledDimmer {...dimmerProps}
Works
(e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, useful links, eg. stackoverflow, gitter, etc)
Spent forever on this :( . Not really part of your scope though! Feel free to close.
I know this is probably part of the Pusher issues.
Currently, fixed elements on desktop will not stay fixed and will scroll. Once mobile (menu is gone), all issues are resolved.
Bundle analyzer pauses build of server.
Using
base.plugins.push(new BundleAnalyzerPlugin({analyzerMode: 'static'}))
instead.
Use npm start
to proxy npm run dev
Any idea how to bring this down? Is it just semantics and iconsapple-touch-startup-image-1536x2008.png?
Current config was developed as a patch for #49. App needs more smart/optimized SWs configuration.
I've been pouring over this code, articles, google searches, trying to figure out the best/correct way to use semantic-ui-css and themes with webpack/react. Lots of people seem to be having this problem. I can't figure out exactly how this project is enabling Semantic UI themes (maybe it's not), but even just using semantic-ui-css
I have problems with "unable to resolve ../themes/default/.......
errors (in my own project). I'm wondering if you could explain the secret sauce of how you made that work here? Thanks!
Cloned the repo, did yarn
, then yarn run dev
and yarn run db
and while the project loads, it throws an error Manifest: Line: 1, column: 1, Unexpected token.
in Chrome.
When going to the Application tab in devtools and clicking in manifest.json
it shows the following instead of the manifest.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React-Semantic.UI Starter</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="/images/logo.png">
<!-- Disable tap highlight on IE -->
<meta name="msapplication-tap-highlight" content="no">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="React-Semantic.UI-Starter">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="React-Semantic.UI-Starter">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#2F3BA2">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Theme Color -->
<meta name="theme-color" content="#1b1c1d">
</head>
<body>
<div id="app"></div>
<noscript>
You are using outdated browser. You can install modern browser here: <a href="http://outdatedbrowser.com/" >http://outdatedbrowser.com</a>.
</noscript>
<script type="text/javascript" src="/client.js"></script></body>
</html>
Also, the service worker doesn't seem to be running. Or does it only run in production mode?
I'm wondering if this starter app can be run on Windows, or if I can make some adjustments so that it can? I develop on Windows 7, and I'm getting an error when running npm run build
.
webpack --config webpack_config/webpack.prod.js
'rm' is not recognized as an internal or external command, operable program or batch file.
child_process.js:526
throw err;
^
Hi, thanks for this project.
I tried to run it as the readme states, but after
I see lots of compilation errors (I copy pasted some of the output below)
Also seems that dependency on purify-css is not working as after npm install in the dependency graph it says
โโโ UNMET PEER DEPENDENCY purify-css@>= 1.0.0 < 2.0.0
Am I doing something wrong ? please help and thank you in advance !
Here is the 'npm run dev' output:
`$ npm run dev
[email protected] dev /Users/Rafal/Projects/react-semantic.ui-starter
node webpack_config/server.js
webpack: wait until bundle finished:
ERROR Failed to compile with 7 errors 10:42:29 PM
error in ./~/semantic-ui-css/semantic.css
Syntax Error: Unexpected token {
@ ./~/semantic-ui-css/semantic.css 4:14-146 18:2-22:4 19:20-152
@ ./src/client/index.jsx
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true webpack/hot/only-dev-server ./src/client/index.jsx
error in ./src/common/styles/index.scss
Syntax Error: Unexpected token {
@ ./src/common/styles/index.scss 4:14-259 18:2-22:4 19:20-265
@ ./src/client/index.jsx
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true webpack/hot/only-dev-server ./src/client/index.jsx
error in ./src/common/components/Footer/Footer.scss
Syntax Error: Unexpected token {
@ ./src/common/components/Footer/Footer.scss 4:14-272 18:2-22:4 19:20-278
@ ./src/common/components/Footer/index.jsx
@ ./src/common/components/index.js
@ ./src/common/index.jsx
@ ./src/client/index.jsx
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true webpack/hot/only-dev-server ./src/client/index.jsx
error in ./src/common/components/Header/Header.scss
Syntax Error: Unexpected token {
@ ./src/common/components/Header/Header.scss 4:14-272 18:2-22:4 19:20-278
@ ./src/common/components/Header/index.jsx
@ ./src/common/components/index.js
@ ./src/common/index.jsx
@ ./src/client/index.jsx
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true webpack/hot/only-dev-server ./src/client/index.jsx
error in ./src/common/components/Sidebar/Sidebar.scss
Syntax Error: Unexpected token {
@ ./src/common/components/Sidebar/Sidebar.scss 4:14-273 18:2-22:4 19:20-279
@ ./src/common/components/Sidebar/index.jsx
@ ./src/common/components/index.js
@ ./src/common/index.jsx
@ ./src/client/index.jsx
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true webpack/hot/only-dev-server ./src/client/index.jsx
error in ./src/common/containers/App/App.scss
Syntax Error: Unexpected token {
@ ./src/common/containers/App/App.scss 4:14-269 18:2-22:4 19:20-275
@ ./src/common/containers/App/index.jsx
@ ./src/common/containers/index.js
@ ./src/common/routing/index.jsx
@ ./src/common/index.jsx
@ ./src/client/index.jsx
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true webpack/hot/only-dev-server ./src/client/index.jsx
error in ./src/common/containers/Inbox/Inbox.scss
Syntax Error: Unexpected token {
@ ./src/common/containers/Inbox/Inbox.scss 4:14-271 18:2-22:4 19:20-277
@ ./src/common/containers/Inbox/index.jsx
@ ./src/common/containers/index.js
@ ./src/common/routing/index.jsx
@ ./src/common/index.jsx
@ ./src/client/index.jsx
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true webpack/hot/only-dev-server ./src/client/index.jsx
App is running at http://localhost:3000
webpack built 5341938db93d04dd35bb in 19097ms
Hash: 5341938db93d04dd35bb
Version: webpack 2.6.1
Time: 19097ms
Asset Size Chunks Chunk Names
client.js 6.55 MB 0 client
chunk {0} client.js (client) 2.15 MB [entry] [rendered]
[468] ./src/client/index.jsx 1.74 kB {0} [built]
[469] .//react-hot-loader/patch.js 41 bytes {0} [built]/querystring-es3/index.js 127 bytes {0} [built]
[470] (webpack)-hot-middleware/client.js?reload=true 6.68 kB {0} [built]
[471] (webpack)/hot/only-dev-server.js 2.29 kB {0} [built]
[484] ./src/common/config/dev.js 783 bytes {0} [built]
[496] ./src/common/index.jsx 2.06 kB {0} [built]
[764] ./
[765] .//react-addons-perf/index.js 52 bytes {0} [built]/react-hot-loader/lib/patch.js 209 bytes {0} [built]
[838] ./
[972] .//strip-ansi/index.js 161 bytes {0} [built]/semantic-ui-css/semantic.css 1.2 kB {0} [built]
[973] ./
[979] ./src/common/styles/index.scss 1.56 kB {0} [built]
[985] (webpack)-hot-middleware/client-overlay.js 1.82 kB {0} [built]
[986] (webpack)-hot-middleware/process-update.js 3.88 kB {0} [built]
[994] multi react-hot-loader/patch webpack-hot-middleware/client?reload=true webpack/hot/only-dev-server ./src/client/index.jsx 64 bytes {0} [built]
+ 980 hidden modules
ERROR in .//css-loader?{"sourceMap":true}!.//postcss-loader/lib?{"sourceMap":true}!.//resolve-url-loader!.//semantic-ui-css/semantic.css
Module build failed: SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:387:25)
at requireFromString (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/require-from-string/index.js:27:4)
at /Users/Rafal/Projects/react-semantic.ui-starter/node_modules/cosmiconfig/lib/loadJs.js:11:15
@ ./~/semantic-ui-css/semantic.css 4:14-146 18:2-22:4 19:20-152
@ ./src/client/index.jsx
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true webpack/hot/only-dev-server ./src/client/index.jsx
ERROR in .//css-loader?{"sourceMap":true}!.//postcss-loader/lib?{"sourceMap":true}!.//resolve-url-loader!.//sass-loader/lib/loader.js?{"sourceMap":true}!./src/common/styles/index.scss
Module build failed: SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:387:25)
at requireFromString (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/require-from-string/index.js:27:4)
at /Users/Rafal/Projects/react-semantic.ui-starter/node_modules/cosmiconfig/lib/loadJs.js:11:15
@ ./src/common/styles/index.scss 4:14-259 18:2-22:4 19:20-265
@ ./src/client/index.jsx
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true webpack/hot/only-dev-server ./src/client/index.jsx
ERROR in .//css-loader?{"sourceMap":true}!.//postcss-loader/lib?{"sourceMap":true}!.//resolve-url-loader!.//sass-loader/lib/loader.js?{"sourceMap":true}!./src/common/components/Footer/Footer.scss
Module build failed: SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:387:25)
at requireFromString (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/require-from-string/index.js:27:4)
at /Users/Rafal/Projects/react-semantic.ui-starter/node_modules/cosmiconfig/lib/loadJs.js:11:15
@ ./src/common/components/Footer/Footer.scss 4:14-272 18:2-22:4 19:20-278
@ ./src/common/components/Footer/index.jsx
@ ./src/common/components/index.js
@ ./src/common/index.jsx
@ ./src/client/index.jsx
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true webpack/hot/only-dev-server ./src/client/index.jsx
ERROR in .//css-loader?{"sourceMap":true}!.//postcss-loader/lib?{"sourceMap":true}!.//resolve-url-loader!.//sass-loader/lib/loader.js?{"sourceMap":true}!./src/common/components/Header/Header.scss
Module build failed: SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:387:25)
at requireFromString (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/require-from-string/index.js:27:4)
at /Users/Rafal/Projects/react-semantic.ui-starter/node_modules/cosmiconfig/lib/loadJs.js:11:15
@ ./src/common/components/Header/Header.scss 4:14-272 18:2-22:4 19:20-278
@ ./src/common/components/Header/index.jsx
@ ./src/common/components/index.js
@ ./src/common/index.jsx
@ ./src/client/index.jsx
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true webpack/hot/only-dev-server ./src/client/index.jsx
ERROR in .//css-loader?{"sourceMap":true}!.//postcss-loader/lib?{"sourceMap":true}!.//resolve-url-loader!.//sass-loader/lib/loader.js?{"sourceMap":true}!./src/common/components/Sidebar/Sidebar.scss
Module build failed: SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:387:25)
at requireFromString (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/require-from-string/index.js:27:4)
at /Users/Rafal/Projects/react-semantic.ui-starter/node_modules/cosmiconfig/lib/loadJs.js:11:15
@ ./src/common/components/Sidebar/Sidebar.scss 4:14-273 18:2-22:4 19:20-279
@ ./src/common/components/Sidebar/index.jsx
@ ./src/common/components/index.js
@ ./src/common/index.jsx
@ ./src/client/index.jsx
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true webpack/hot/only-dev-server ./src/client/index.jsx
ERROR in .//css-loader?{"sourceMap":true}!.//postcss-loader/lib?{"sourceMap":true}!.//resolve-url-loader!.//sass-loader/lib/loader.js?{"sourceMap":true}!./src/common/containers/App/App.scss
Module build failed: SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:387:25)
at requireFromString (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/require-from-string/index.js:27:4)
at /Users/Rafal/Projects/react-semantic.ui-starter/node_modules/cosmiconfig/lib/loadJs.js:11:15
@ ./src/common/containers/App/App.scss 4:14-269 18:2-22:4 19:20-275
@ ./src/common/containers/App/index.jsx
@ ./src/common/containers/index.js
@ ./src/common/routing/index.jsx
@ ./src/common/index.jsx
@ ./src/client/index.jsx
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true webpack/hot/only-dev-server ./src/client/index.jsx
ERROR in .//css-loader?{"sourceMap":true}!.//postcss-loader/lib?{"sourceMap":true}!.//resolve-url-loader!.//sass-loader/lib/loader.js?{"sourceMap":true}!./src/common/containers/Inbox/Inbox.scss
Module build failed: SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:387:25)
at requireFromString (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/require-from-string/index.js:27:4)
at /Users/Rafal/Projects/react-semantic.ui-starter/node_modules/cosmiconfig/lib/loadJs.js:11:15
@ ./src/common/containers/Inbox/Inbox.scss 4:14-271 18:2-22:4 19:20-277
@ ./src/common/containers/Inbox/index.jsx
@ ./src/common/containers/index.js
@ ./src/common/routing/index.jsx
@ ./src/common/index.jsx
@ ./src/client/index.jsx
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true webpack/hot/only-dev-server ./src/client/index.jsx
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 1.48 MB 0
chunk {0} index.html 543 kB [entry] [rendered]
[0] .//lodash/lodash.js 540 kB {0} [built]/html-webpack-plugin/lib/loader.js!./src/common/index.html 2.12 kB {0} [built]
[1] ./
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Failed to compile.
Error: no such file or directory
at MemoryFileSystem.readFileSync (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/memory-fs/lib/MemoryFileSystem.js:107:10)
at /Users/Rafal/Projects/react-semantic.ui-starter/webpack_config/server.js:55:22
at Object.ready (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/webpack-dev-middleware/lib/Shared.js:149:29)
at Function.Shared.share.waitUntilValid (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/webpack-dev-middleware/lib/Shared.js:196:10)
at /Users/Rafal/Projects/react-semantic.ui-starter/webpack_config/server.js:54:17
at Layer.handle [as handle_request] (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/layer.js:95:5)
at next (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/layer.js:95:5)
at /Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/index.js:281:22
at param (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/index.js:354:14)
at param (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/index.js:365:14)
at Function.process_params (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/index.js:410:3)
at next (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/index.js:275:10)
at middleware (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/webpack-hot-middleware/middleware.js:26:48)
at Layer.handle [as handle_request] (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/index.js:317:13)
at /Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/index.js:335:12)
at next (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/index.js:275:10)
at goNext (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/webpack-dev-middleware/middleware.js:28:49)
at processRequest (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/webpack-dev-middleware/middleware.js:58:12)
Error: no such file or directory
at MemoryFileSystem.readFileSync (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/memory-fs/lib/MemoryFileSystem.js:107:10)
at /Users/Rafal/Projects/react-semantic.ui-starter/webpack_config/server.js:55:22
at Object.ready (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/webpack-dev-middleware/lib/Shared.js:149:29)
at Function.Shared.share.waitUntilValid (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/webpack-dev-middleware/lib/Shared.js:196:10)
at /Users/Rafal/Projects/react-semantic.ui-starter/webpack_config/server.js:54:17
at Layer.handle [as handle_request] (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/layer.js:95:5)
at next (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/layer.js:95:5)
at /Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/index.js:281:22
at param (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/index.js:354:14)
at param (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/index.js:365:14)
at Function.process_params (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/index.js:410:3)
at next (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/index.js:275:10)
at middleware (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/webpack-hot-middleware/middleware.js:26:48)
at Layer.handle [as handle_request] (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/index.js:317:13)
at /Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/index.js:335:12)
at next (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/express/lib/router/index.js:275:10)
at goNext (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/webpack-dev-middleware/middleware.js:28:49)
at processRequest (/Users/Rafal/Projects/react-semantic.ui-starter/node_modules/webpack-dev-middleware/middleware.js:58:12)`
Add react-a11y and eslint plugin for a11y.
Go to https://metnew.github.io/react-semantic.ui-starter/users
Requested page
404
Just go to https://metnew.github.io/react-semantic.ui-starter/users
Not sure if it's actually app bug or hosting-related. I didn't test it locally.
run npm install
succeed with warning:
(node:9292) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added. Use emitter.setMaxListeners() to increase limit
I think webpack could not find module 'purify-css'...
we need to npm i -D purify-css for the project
Hi when I have successfully run your project in "npm run dev" I can go to localhost:3000/auth but when I have typed some username and password the button just keeps spinning without entering the dashboard. Can you tell me how to solve that?
[ x] bug report
If this feature is custom and interesting only for you (not useful for other users, has connection with your app logic, etc.) - email me [email protected].
My project fails build, is this a syntax error?
in src/commons/actions/auth/index.js on line 19 it appears result.data.token isn't wrapped properly.
setLocalToken(result.data.token])
after fixing that, the app compiles correctly.
Download from repo
npm install
npm run dev (to see syntax error)
(e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, useful links, eg. stackoverflow, gitter, etc)
Hi, thanks for your great work - this is one of the best boilerplates I've ever seen.
Currently I'm struggling with adding routes with params inside, e.g /user/:id.
I've seen that inside containers/App/index.jsx
there's a LOC referring to the fact that a refactoring is needed if we want to support these kind of routes.
Inside the same files, match
is declared as a Prop, however I always get undefined when trying to add components that make use of the match prop.
Do you know how to implement such feature? Thanks!
Hi, can you please explain how to deploy this to heroku?
Thanks in advance
I've cloned the master branch and I'm getting an error when doing npm install
or yarn install
.
61047 silly install [email protected]
61048 info lifecycle [email protected]~install: [email protected]
61049 verbose lifecycle [email protected]~install: unsafe-perm in lifecycle true
61050 verbose lifecycle [email protected]~install: PATH: C:\Users\Emiliano\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;D:\Desktop\react\react-semantic.ui-starter\node_modules\sharp\node_modules\.bin;D:\Desktop\react\react-semantic.ui-starter\node_modules\.bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Users\Emiliano\bin;C:\ProgramData\Oracle\Java\javapath;C:\Python27\Scripts;C:\Program Files (x86)\Intel\iCLS Client;C:\Program Files\Intel\iCLS Client;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\Microsoft SQL Server\120\Tools\Binn;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files\TortoiseGit\bin;C:\Program Files\Microsoft\Web Platform Installer;C:\Users\Emiliano\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Program Files\Microsoft DNX\Dnvm;C:\Windows\System32\WindowsPowerShell\v1.0;C:\ProgramData\chocolatey\bin;C:\Program Files\nodejs;C:\Program Files (x86)\Calibre2;C:\Program Files\dotnet;C:\Program Files\Git\cmd;C:\Program Files (x86)\Yarn\bin;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\Skype\Phone;C:\Users\Emiliano\.dnx\bin;C:\Program Files\Git\usr\bin;C:\Program Files (x86)\Microsoft VS Code\bin;C:\Program Files\dotnet;C:\Program Files (x86)\Android\android-sdk\platform-tools;C:\Users\Emiliano\AppData\Roaming\nvm;C:\Users\Emiliano\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Users\Emiliano\AppData\Roaming\npm;D:\Portables\nssm\win64;C:\Users\Emiliano\AppData\Local\now-cli;C:\Users\Emiliano\AppData\Local\Yarn\bin
61051 verbose lifecycle [email protected]~install: CWD: D:\Desktop\react\react-semantic.ui-starter\node_modules\sharp
61052 silly lifecycle [email protected]~install: Args: [ '/d /s /c', 'node-gyp rebuild' ]
61053 silly lifecycle [email protected]~install: Returned: code: 1 signal: null
61054 info lifecycle [email protected]~install: Failed to exec install script
61055 verbose unlock done using C:\Users\Emiliano\AppData\Roaming\npm-cache\_locks\staging-66c5646ac38cd63f.lock for D:\Desktop\react\react-semantic.ui-starter\node_modules\.staging
61056 warn optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
61057 warn notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
61058 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Valid OS: darwin
61058 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Valid Arch: any
61058 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Actual OS: win32
61058 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Actual Arch: x64
61059 verbose stack Error: [email protected] install: `node-gyp rebuild`
61059 verbose stack Exit status 1
61059 verbose stack at EventEmitter.<anonymous> (C:\Users\Emiliano\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:289:16)
61059 verbose stack at emitTwo (events.js:106:13)
61059 verbose stack at EventEmitter.emit (events.js:191:7)
61059 verbose stack at ChildProcess.<anonymous> (C:\Users\Emiliano\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:40:14)
61059 verbose stack at emitTwo (events.js:106:13)
61059 verbose stack at ChildProcess.emit (events.js:191:7)
61059 verbose stack at maybeClose (internal/child_process.js:885:16)
61059 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
61060 verbose pkgid [email protected]
61061 verbose cwd D:\Desktop\react\react-semantic.ui-starter
61062 verbose Windows_NT 6.1.7601
61063 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Emiliano\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install"
61064 verbose node v7.1.0
61065 verbose npm v5.3.0
61066 error code ELIFECYCLE
61067 error errno 1
61068 error [email protected] install: `node-gyp rebuild`
61068 error Exit status 1
61069 error Failed at the [email protected] install script.
61069 error This is probably not a problem with npm. There is likely additional logging output above.
61070 verbose exit [ 1, true ]
I assume this has something to do with node-gyp
(which is a dependency of node-sass
) which needs python to run.
It would be great if we didn't need python installed in a node.js project.
I understand that node-sass
is probably being used to parse the sass files in the server for SSR. But in my case I don't need SSR.
Is there an easy way to remove SSR and the packages it needs?
Edit: Seems some imported libraries will cause FOUC of auth components.
Similar boilerplates like https://github.com/krasevych/react-redux-styled-hot-universal have React Hot Loading.
This allows you to keep your redux state in between hot-module replacement of your React Components/ Smart Containers, and speeds up development when you have to build up state.
Is there any plan to implement similar functionality for this project?
bug report
feature request
yes. npm run frontend_dev
is failing in master. Bundle can't be compiled
Bundle built, HMR loaded, client bundle served
> [email protected] frontend_dev /Users/sam/temp-dev/react-semantic.ui-starter
> babel-node webpack_config/server.js
webpack: wait until bundle finished:
webpack: wait until bundle finished: /__webpack_hmr
ERROR Failed to compile with 1 errors 8:11:00 PM
error in ./static/images/daniel.jpg
Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib
Referenced from: /Users/sam/temp-dev/react-semantic.ui-starter/node_modules/mozjpeg/vendor/cjpeg
Reason: image not found
at Promise.all.then.arr (/Users/sam/temp-dev/react-semantic.ui-starter/node_modules/execa/index.js:231:11)
at process._tickDomainCallback (internal/process/next_tick.js:135:7)
@ ./src/common/containers/UserItem/components/index.jsx 48:86-114
@ ./src/common/containers lazy-once ^\.\/.*\/index\.jsx$
@ ./src/common/routing/index.jsx
@ ./src/common/index.jsx
@ ./src/client/index.jsx
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./src/client
> App is running at http://localhost:3000
webpack built b387d1fcd9a63579afaf in 16116ms
Hash: b387d1fcd9a63579afaf
Version: webpack 3.5.3
Time: 16116ms
Asset Size Chunks Chunk Names
assets/icons.674f50d2.eot 166 kB
assets/icons.b06871f2.ttf 166 kB
assets/icons.fee66e71.woff 98 kB
assets/icons.af7ae505.woff2 77.2 kB
images/flags.9c74e172.png 28.1 kB
lazy-containers.a8a3d8.js 20.6 kB 0 lazy-containers
client.js 12.9 MB 1 client
[./node_modules/promise-polyfill/promise.js] ./node_modules/promise-polyfill/promise.js 6.24 kB {1} [built]
[./node_modules/querystring-es3/index.js] ./node_modules/querystring-es3/index.js 127 bytes {1} [built]
[./node_modules/react-addons-perf/index.js] ./node_modules/react-addons-perf/index.js 52 bytes {1} [built]
[./node_modules/react-dom/index.js] ./node_modules/react-dom/index.js 59 bytes {1} [built]
[./node_modules/react-hot-loader/lib/patch.js] ./node_modules/react-hot-loader/lib/patch.js 209 bytes {1} [built]
[./node_modules/react-hot-loader/patch.js] ./node_modules/react-hot-loader/patch.js 41 bytes {1} [built]
[./node_modules/semantic-ui-css/semantic.css] ./node_modules/semantic-ui-css/semantic.css 1.2 kB {1} [built]
[./node_modules/strip-ansi/index.js] ./node_modules/strip-ansi/index.js 161 bytes {1} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 1.82 kB {1} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true] (webpack)-hot-middleware/client.js?reload=true 6.68 kB {1} [built]
[./node_modules/whatwg-fetch/fetch.js] ./node_modules/whatwg-fetch/fetch.js 12.7 kB {1} [built]
[0] multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./src/client 52 bytes {1} [built]
[./src/client/index.jsx] ./src/client/index.jsx 1.73 kB {1} [built]
[./src/common/index.jsx] ./src/common/index.jsx 2.5 kB {1} [built]
[./src/common/styles/global.jsx] ./src/common/styles/global.jsx 1.81 kB {1} [built]
+ 1057 hidden modules
ERROR in ./static/images/daniel.jpg
Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib
Referenced from: /Users/sam/temp-dev/react-semantic.ui-starter/node_modules/mozjpeg/vendor/cjpeg
Reason: image not found
at Promise.all.then.arr (/Users/sam/temp-dev/react-semantic.ui-starter/node_modules/execa/index.js:231:11)
at process._tickDomainCallback (internal/process/next_tick.js:135:7)
@ ./src/common/containers/UserItem/components/index.jsx 48:86-114
@ ./src/common/containers lazy-once ^\.\/.*\/index\.jsx$
@ ./src/common/routing/index.jsx
@ ./src/common/index.jsx
@ ./src/client/index.jsx
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./src/client
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 1.48 MB 0
[./node_modules/html-webpack-plugin/lib/loader.js!./webpack_config/assets/index.ejs] ./node_modules/html-webpack-plugin/lib/loader.js!./webpack_config/assets/index.ejs 1.62 kB {0} [built]
[./node_modules/lodash/lodash.js] ./node_modules/lodash/lodash.js 540 kB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Failed to compile.
Check out latest master
npm install
npm run frontend_dev
In my old project I had something like in package.json
"scripts": {
"db": "nodemon ./db",
"build": "webpack --config webpack_config/webpack.prod.js",
"build:demo": "BUILD_DEMO=true webpack --config webpack_config/webpack.prod.js",
"test": "jest --config=jest_config/jest.config.json --coverage --forceExit || true",
"dev": "node webpack_config/server.js",
"ssr": "nodemon --exec REACT_WEBPACK_ENV='dev' babel-node ./server",
"lint": "eslint common db jest_config server static webpack_config",
"lint:fix": "npm run lint -- --fix"
}
In this project how can I run eslint on my app to fix errors ?
Refreshing page on dashboard cycles through auth
git clone, npm install, npm run build, npm run start
This boilerplate is awesome! I want to use it with Feathers.js though. Can you please give me an advice on where I should start making changes? I want to not only use Feathers server but also the client, and connect them through web sockets, as that's the recommended approach by Feathers.
Any help is appreciated.
AutoDLL webpack-plugin can boost the speed of webpack compilation.
loadLazyComponent doesn't work with tag:Route
^^
Page shows a report.
Page shows an error.
Hi guys,
I freshly cloned your repo and successfully ran npm install, but couldn't run other scripts: build, dev, ssr.
Both threw the same two errors which pointing to semantic-ui-react:
ERROR in ./
/semantic-ui-css/themes/default/assets/images/flags.png/css-loader!./
Module build failed: TypeError: pPipe(...) is not a function
at Function.module.exports.buffer (/home/iqbal/Personal/react-semantic.ui-starter/node_modules/imagemin/index.js:64:60)
at Object.module.exports (/home/iqbal/Personal/react-semantic.ui-starter/node_modules/img-loader/index.js:43:6)
@ .//semantic-ui-css/semantic.css 6:118207-118258/semantic-ui-css/semantic.css
@ ./
@ multi react react-dom react-router redux react-router-redux redux-thunk semantic-ui-react whatwg-fetch semantic-ui-css/semantic.css offline-plugin/runtime prop-typesERROR in ./
/semantic-ui-css/themes/default/assets/fonts/icons.svg/css-loader!./
Module build failed: TypeError: pPipe(...) is not a function
at Function.module.exports.buffer (/home/iqbal/Personal/react-semantic.ui-starter/node_modules/imagemin/index.js:64:60)
at Object.module.exports (/home/iqbal/Personal/react-semantic.ui-starter/node_modules/img-loader/index.js:43:6)
@ .//semantic-ui-css/semantic.css 6:154395-154445/semantic-ui-css/semantic.css
@ ./
@ multi react react-dom react-router redux react-router-redux redux-thunk semantic-ui-react whatwg-fetch semantic-ui-css/semantic.css offline-plugin/runtime prop-typesERROR in ./~/semantic-ui-css/semantic.css
Module build failed: ModuleBuildError: Module build failed: TypeError: pPipe(...) is not a function
at Function.module.exports.buffer (/home/iqbal/Personal/react-semantic.ui-starter/node_modules/imagemin/index.js:64:60)
at Object.module.exports (/home/iqbal/Personal/react-semantic.ui-starter/node_modules/img-loader/index.js:43:6)
at runLoaders (/home/iqbal/Personal/react-semantic.ui-starter/node_modules/webpack/lib/NormalModule.js:192:19)
at /home/iqbal/Personal/react-semantic.ui-starter/node_modules/loader-runner/lib/LoaderRunner.js:364:11
at /home/iqbal/Personal/react-semantic.ui-starter/node_modules/loader-runner/lib/LoaderRunner.js:230:18
at runSyncOrAsync (/home/iqbal/Personal/react-semantic.ui-starter/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
at iterateNormalLoaders (/home/iqbal/Personal/react-semantic.ui-starter/node_modules/loader-runner/lib/LoaderRunner.js:229:2)
at /home/iqbal/Personal/react-semantic.ui-starter/node_modules/loader-runner/lib/LoaderRunner.js:202:4
at /home/iqbal/Personal/react-semantic.ui-starter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:62:14
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)
any direction?
Currently, SSR works in a very simple way, the server reads index.html
inside frontend dist folder. And use this file as a template to generate SSRed html. Using WebpackStats would be better, but I don't know how it works with FaviconsWebpackPlugin/PreloadWebpackPlugin and other plugins that inject data/tags/attributes in index.html
. What do you think about it?
@Metnew
Hi, Metnew!
I'm here asking a question instead of raising an issue:
Since I cannot see where the button for switching the language is, I kind of cannot get the sense of how to use the multilingual update of version 3. Now I build it without flags, it is supposed to be built with all available languages. But how to switch between the two languages currently available after building for production?
Thanks!
Bottom and right margin in built version vs demo version online.
Margins like the demo.
Git clone, npm install, npm run dev
Thank you :) I've been using this boilerplate extensively, just the perfect balance of not too much and just enough :)
Hi
I cloned your repo and successfully ran npm install, but couldn't run other scripts: build or dev.
On running 'npm run dev' I get the following:
`ERROR Failed to compile with 4 errors 1:42:18 PM
error in ./common/components/Sidebar/SidebarInnerComponent.jsx
/Users/riaanretief/Dev/react-semantic.ui-starter/common/components/Sidebar/SidebarInnerComponent.jsx
37:9 error Missing "key" prop for element in iterator react/jsx-key`
Thanks for the awesome boilerplate! Love how it's ready to connect to any API! Maybe implement yarn :)
In AuthSVC:
const JWT_TOKEN = 'JWT_TOKEN'
This const is not exported, so in reducers/auth, JWT_TOKEN is undefined.
JWT_TOKEN be exported :)
JWT_TOKEN is not exported.
Console.log(JWT_Token)
When running SSR, my mac is using Helvetica font and not Lato.
Lato and fonts be bundled in build.
<-- Remove this section if it isn't a bug -->
I run npm run frontend_dev
command. Then open dev tools in chrome.
In the past under Sources tab there was a Webpack folder with all of the source files available for debugging
No Webpack folder and no source files in Sources tab.
run npm run frontend_dev
open dev tools in chrome
go to Sources tab
yarn run dev doesn't work
path = ('^' + path + (strict ? '' : path[path.length - 1] === '/' ? '?' : '/?'))
[FRONTEND] ^
[FRONTEND]
[FRONTEND] TypeError: Cannot read property 'length' of undefined
Git clone, yarn, yarn run dev
(e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, useful links, eg. stackoverflow, gitter, etc)
Nice update, going over it now!
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.