Awesome Open Source
Awesome Open Source

Suicrux 😈

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

Previous release

Greenkeeper badge Codacy Badge

Quick start

  # Install
  git clone --depth=1 --single-branch
  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

What's inside?

bitHound Dependencies bitHound Dev Dependencies





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.


Check /src/server/ssr/.



Server-side data-fetching?

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


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.

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

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


Have a question? Ask! 😉

Make sure you ask a right question. 😈

PRs, issues, enhancements are always welcome.


Vladimir Metnew [email protected]


Apache License 2.0

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,537,249
Reactjs (75,823
Redux (13,331
Webpack (9,749
Template (8,107
Boilerplate (5,608
Example (4,719
Pwa (3,347
Ssr (1,658
Full Stack (1,461
Starter (1,276
Semantic Ui (625
Universal (495
Semantic Ui React (204
Universal React (62
Related Projects