Suicrux Save

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

Project README

Suicrux :smiling_imp:

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! :wink:

Make sure you ask a right question. :smiling_imp:

PRs, issues, enhancements are always welcome.


Vladimir Metnew [email protected]


Apache License 2.0

Open Source Agenda is not affiliated with "Suicrux" Project. README Source: Metnew/suicrux

Open Source Agenda Badge

Open Source Agenda Rating