Skip to content
This repository has been archived by the owner on Jan 1, 2024. It is now read-only.

Metnew/suicrux

Repository files navigation

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 vladimirmetnew@gmail.com

LICENSE

Apache License 2.0