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

What's inside?

bitHound Dependencies bitHound Dev Dependencies

Client:

Server:

Webpack

Other:

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.

  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.

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,419
react (5,475
redux (1,174
webpack (1,158
boilerplate (639
template (532
pwa (343
ssr (320
example (247
starter (147
universal (111
fullstack (60
semantic-ui (39