metnew/suicrux

🚀 Ultimate universal starter with lazy-loading, SSR and i18n. [not maintained]

Suicrux 😈

Ultimate universal starter with lazy-loading, SSR and i18n.

Previous release

Quick start

  # Install
  git clone --depth=1 --single-branch https://github.com/Metnew/suicrux.git
  cd suicrux
  npm install
  # install flow typings for libraries (optional)
  flow-typed install
  # Development
  npm run dev
  # Build
  npm run build
  # Production
  npm run start

• Quick start
• What's inside?
  • Client
  • Server
  • Webpack
  • Other
• Suicrux FAQ
  • Static assets?
  • SSR?
  • Code-splitting?
  • Server-side data-fetching?
  • Theming?
  • Browser support
• Environment variables
• Semantic.UI + React = SUIR
  • Good parts
  • Bad parts
• Contributing
• Author
• LICENSE

What's inside?

Client:

• Flow - static typing rocks!
• React 16 and Redux
• SASS, PostCSS, and styled-components.
• React-Router v4 + React-Router-Redux v5
• Redux-thunk, Redux-Devtools-Extension and redux-promise-middleware
• isomorphic-fetch
• Semantic-ui-react - UI components.
• Lodash - SUIR dependency.
• Store2 and js-cookie - LocalStorage and cookies.
• react-async-component - library for lazy-loading
• react-ga - advanced Google Analytics for React
• react-intl - i18n.
• immutable, reselect and normalizr

Server:

• morgan - request logger middleware.
• helmet - secure your Express app.
• cookie-parser - cookie parsing middleware.
• body-parser - body parsing middleware
• compression - compression middleware (gzip).
• raven - Sentry for Node

Webpack

• Latest Webpack with HMR
• Babel: stage-0 and few known plugins.
• Eslint and Standard.js
• Offline-plugin
• webpack-bundle-analyzer
• compression-webpack-plugin
• optimize-css-assets-webpack-plugin
• autodll-webpack-plugin
• optimize-js-plugin
• wepback-assets-manifest
• circular-dependency-plugin
• extract-text-webpack-plugin
• copy-webpack-plugin

Other:

• Jest - testing framework.
• And more tools for building and testing...

Suicrux FAQ

Static assets?

/static folder + url-loader. Everything in /static/public/ is copied to /dist/client with copy-webpack-plugin.

Is it possible to change Webpack config?

Of course, config is intuitive! Webpack universality is inspired by Razzle.

SSR?

Check /src/server/ssr/.

Code-splitting?

react-async-component.

Server-side data-fetching?

Using react-async-bootstrapper - a wrapper around react-tree-walker.

Theming?

Yes, with styled-components' <ThemeProvider> it's possible to specify a color theme.

Browser support

Without react-intl:

• Safari 7+
• IE 10+

Environment variables

• process.env.HOST (default: 'localhost'): Application host. Browser and Server.
• process.env.PORT (default: 3000): Application port. Browser and Server.
• process.env.INSPECT_ENABLED (default: true): add --inspect arg to server in development. Webpack only.
• process.env.ANALYZE_BUNDLE (default: false): Run webpack-bundle-analyzer on production build. _Webpack _
• process.env.GA_ID (default: false): Google analytics ID. If set, react-ga initialize itself inside >container oncomponentDidMount()`. Browser only.
• process.env.SENTRY_PUBLIC_DSN (default: false): Similar to GA_ID, but for Sentry. Browser only.
• process.env.BROWSER: Your environment. true - browser, false - Node.

NOTE: Remember, you can't run code which uses browser global object in Node environment!

• process.env.SENTRY_DSN (default: false): Sentry full(private) DSN. Server only.

Semantic.UI + React = SUIR

SUI = Semantic.UI
SUIR = Semantic-UI-React TL;DR: SUIR is great, but it lacks inline-styles.

You're always free to use any other UI framework with suicrux. UI framework comparison.

Good parts

1. Big UI library
2. Based on SUI: SUIR uses SUI CSS under the hood.
3. Modular: Import only what you use required components.

Bad parts

1. Import of unused styles.

It's possible to import only required components' styles. Check src/client/index.jsx. PurifyCss cannot help. Only browser-based tools probably could.

2. SUI styles are costly(548kb) and block rendering.

It's possible to split SUI styles into several smaller chunks which could be downloaded faster.

Contributing

Have a question? Ask! 😉

Make sure you ask a right question. 😈

PRs, issues, enhancements are always welcome.

Author

Vladimir Metnew [email protected]

LICENSE

Apache License 2.0

suicrux's Issues

Compile fail. Missing 'key' prop error

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`

react deprecated api used ?

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

Help with Keystone Implementation

I'm submitting a ...

• bug report
• feature request

Feature Request:

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.

• Is feature important in common use cases?

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.

Optionally reset Semantic.UI -webkit-scrollbar styles

I'm submitting a ...

• bug report
• feature request

Bug Report:

Bottom and right margin in built version vs demo version online.

• What is the expected behavior?

Margins like the demo.

• What is the current behavior?

• Steps to reproduce:

Git clone, npm install, npm run dev

Useful Info:

• Your environment:

  • Node version: Node 6.11.1
  • Browser: Latest Chrome
  • OS: OSX
  • Language/Platform/etc:

• Other information

Thank you :) I've been using this boilerplate extensively, just the perfect balance of not too much and just enough :)

Server is running on ${PORT} port never reached SSR

I'm submitting a ...

• bug report
• feature request

Bug Report:

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.

• Steps to reproduce:

git clone, npm install, npm run build, npm run start

Useful Info:

• Your environment:

  • Node version: 6
  • Browser: Chrome
  • OS: OSX
  • Language/Platform/etc:

Missing Export

Thanks for the awesome boilerplate! Love how it's ready to connect to any API! Maybe implement yarn :)

I'm submitting a ...

• bug report
• feature request

Bug Report:

In AuthSVC:
const JWT_TOKEN = 'JWT_TOKEN'
This const is not exported, so in reducers/auth, JWT_TOKEN is undefined.

• What is the expected behavior?

JWT_TOKEN be exported :)

• What is the current behavior?

JWT_TOKEN is not exported.

• Steps to reproduce:

Console.log(JWT_Token)

Missing purify-css dependency in the package.json

I think webpack could not find module 'purify-css'...

we need to npm i -D purify-css for the project

FOUC on SSR

I'm submitting a ...

• bug report
• feature request

Feature Request:

Bug Report:

Edit: Seems some imported libraries will cause FOUC of auth components.

Leak Memory Warning on Install

run npm install succeed with warning:
(node:9292) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added. Use emitter.setMaxListeners() to increase limit

Fresh install doesn't compile

Hi, thanks for this project.
I tried to run it as the readme states, but after

• cloning
• running npm install
• running npm run dev

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]
[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] .//querystring-es3/index.js 127 bytes {0} [built]
[765] .//react-addons-perf/index.js 52 bytes {0} [built]
[838] .//react-hot-loader/lib/patch.js 209 bytes {0} [built]
[972] .//strip-ansi/index.js 161 bytes {0} [built]
[973] .//semantic-ui-css/semantic.css 1.2 kB {0} [built]
[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]
[1] .//html-webpack-plugin/lib/loader.js!./src/common/index.html 2.12 kB {0} [built]
[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)`

Stuck at the sign in screen

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?

Add AutoDLL webpack-plugin

AutoDLL webpack-plugin can boost the speed of webpack compilation.

SSR doesn't include semantic fonts

I'm submitting a ...

• bug report
• feature request

Bug Report:

When running SSR, my mac is using Helvetica font and not Lato.

• What is the expected behavior?

Lato and fonts be bundled in build.

• Your environment:

  • Node version: Latest Stable.
  • Browser: Chrome
  • OS: OSX
  • Language/Platform/etc:

Integrate React Hot Loader

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?

Element type is invalid after prod build

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

running eslint

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 ?

Move from custom <LazyLoad> to react-universal-component

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-components hard-dependency with webpack-flush-chunks. You can find more info about these libraries in their repos + blog of the creator of these plugins.

Header (and all fixed elements) only stays fixed on mobile

I'm submitting a ...

• bug report
• feature request

Bug Report:

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.

IE11 Support SSR

I'm submitting a ...

• bug report
• feature request

Bug Report:

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.).

• Other information

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 :(

SWs redirect user to /auth on refresh in production

I'm submitting a ...

• bug report
• feature request

Bug Report:

Refreshing page on dashboard cycles through auth

• Steps to reproduce:

git clone, npm install, npm run build, npm run start

Error when running npm run build - Windows cmd prompt

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;
^

Bug Report

in ./src/common/actions/auth/index.js
Syntax Error: Unexpected token, expected , (19:33)

setLocalToken(result.data.token])

Build failed

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
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)
@ .//css-loader!.//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-types

ERROR in .//semantic-ui-css/themes/default/assets/fonts/icons.svg
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)
@ .//css-loader!.//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-types

ERROR 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?

Lighthouse report link fails

**I'm submitting a bug

• bug report
• feature request

Bug Report:

• What is the expected behavior?

  Page shows a report.

• What is the current behavior?

  Page shows an error.

• Steps to reproduce:

  1. Click https://googlechrome.github.io/lighthouse/viewer/?gist=cd19fc335d4dc2abfbba10ee550bd0c8

How does this work with semantic's custom fonts and icons

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!

NPM start

I'm submitting a ...

• bug report
• feature request

Feature Request:

Use npm start to proxy npm run dev

Trouble with deploying to heroku.

Hi, can you please explain how to deploy this to heroku?

Thanks in advance

Can't install npm packages on Windows

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?

Add routes with params

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!

Blurring page dimmer

I'm submitting a ...

• bug report
• feature request

Bug Report:

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

Useful Info:

• Your environment:

  • Node version: Latest Stable
  • Browser: Chrome
  • OS: OSX
  • Language/Platform/etc:

• Other information

  (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.

Bundle analyzer pauses build of server

I'm submitting a ...

• bug report
• feature request

Bug Report:

Bundle analyzer pauses build of server.

Using
base.plugins.push(new BundleAnalyzerPlugin({analyzerMode: 'static'})) instead.

Flash of unstyled content

I'm submitting a ...

• bug report
• feature request

Bug Report:

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.

• What is the expected behavior?

CSS loaded first.

• What is the current behavior?

.25 seconds of skeletons.

• Steps to reproduce:

yarn run dev

Useful Info:

• Your environment:

  • Node version:
  • Browser:
  • OS:
  • Language/Platform/etc:

• Other information

  (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!

No webpack source maps in dev tools

I'm submitting a ...

• bug report
• feature request

Bug Report:

<-- Remove this section if it isn't a bug -->
I run npm run frontend_dev command. Then open dev tools in chrome.

• What is the expected behavior?

In the past under Sources tab there was a Webpack folder with all of the source files available for debugging

• What is the current behavior?

No Webpack folder and no source files in Sources tab.

• Steps to reproduce:

  1. run npm run frontend_dev

  2. open dev tools in chrome

  3. go to Sources tab

Useful Info:

• Your environment:

  • Node version: 8.2.1
  • Browser: Chrome 59.0.3071.115
  • OS: MacOS

loadLazyComponent doesn't work with tag:Route

I'm submitting a ...

• bug report
• feature request

Bug Report:

loadLazyComponent doesn't work with tag:Route

• What is the expected behavior?

• What is the current behavior?

• Steps to reproduce:

^^

Useful Info:

• Your environment:

  • Node version: 6.11.1
  • Browser: Chrome
  • OS: OSX
  • Language/Platform/etc:

is the multilingual part done?

@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!

yarn run dev doesn't work

I'm submitting a ...

• bug report
• feature request

Bug Report:

yarn run dev doesn't work

path = ('^' + path + (strict ? '' : path[path.length - 1] === '/' ? '?' : '/?'))
[FRONTEND] ^
[FRONTEND]
[FRONTEND] TypeError: Cannot read property 'length' of undefined

• Steps to reproduce:

Git clone, yarn, yarn run dev

Useful Info:

• Your environment:

  • Node version: Latest LTS
  • Browser:
  • OS: OSX
  • Language/Platform/etc:

• Other information

  (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, useful links, eg. stackoverflow, gitter, etc)

Nice update, going over it now!

Provide better OfflinePlugin config

Current config was developed as a patch for #49. App needs more smart/optimized SWs configuration.

Manifest: Line: 1, column: 1, Unexpected token.

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?

common-actions-auth

I'm submitting a ...

• [ x] bug report

• Is feature important in common use cases?

  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].

• Describe requested feature:

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])

• What is the expected behavior?

after fixing that, the app compiles correctly.

• What is the current behavior?

• Steps to reproduce:

  1. Download from repo

  2. npm install

  3. npm run dev (to see syntax error)

Useful Info:

• Your environment:

  • Node version: 8.1.4
  • Browser:
  • OS: ubuntu 14 trusty tahr
  • Language/Platform/etc:

• Other information

  (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, useful links, eg. stackoverflow, gitter, etc)

Move from styled-components to Emotion

Styled-components currently is not the best solution when it comes to performance. What do you think about using Emotion instead of styled-components? It has similar API, works with SSR and has better performance. More info
Example with emotion: here

Yarn build client size 1.2 MB

I'm submitting a ...

• bug report
• feature request

Feature Request:

Any idea how to bring this down? Is it just semantics and iconsapple-touch-startup-image-1536x2008.png?

Integration with Feathers.js

I'm submitting a ...

• bug report
• feature request
• question

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.

Demo - 404 if target is not the site root

Bug Report:

Go to https://metnew.github.io/react-semantic.ui-starter/users

• What is the expected behavior?

Requested page

• What is the current behavior?

404

• Steps to reproduce:

Just go to https://metnew.github.io/react-semantic.ui-starter/users

Useful Info:

• Environment:

  • Browser: Chrome Version 59.0.3071.115 (Official Build) (64-bit)
  • OS: Ubuntu 16.04

• PS

Not sure if it's actually app bug or hosting-related. I didn't test it locally.

`npm run frontend_dev` broken in master?

I'm submitting a ...

• bug report

• feature request

• Is feature important in common use cases?

yes. npm run frontend_dev is failing in master. Bundle can't be compiled

Bug Report:

• What is the expected behavior?

Bundle built, HMR loaded, client bundle served

• What is the current behavior?

> [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.

• Steps to reproduce:

  1. Check out latest master

  2. npm install

  3. npm run frontend_dev

Useful Info:

• Your environment:

  • Node version: 6.11.1
  • Browser: Chrome latest
  • OS: Mac OSX
  • Language/Platform/etc:

Is there a reason why this doesn't use the Webpack DLL plugin in dev envs?

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

router not working after build

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?

Add react-a11y

Add react-a11y and eslint plugin for a11y.

OfflinePlugin configuration

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?

SSR: generate index.html using WebpackStats

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?

Boilerplate isn't working

So I recently pulled the boilerplate but nothing actually renders. Here are the errors I receive in terminal