Suicrux 😈

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

Previous release

Join the chat at https://gitter.im/suicrux/Lobby

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

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

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

Bad parts

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.

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

It's possible to split SUI styles into several smaller chunks that would be downloaded faster if you use HTTP2.

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

DevAnouar/suicrux