Suicrux :smiling_imp:

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

Previous release

<!-- > Demo sometimes becomes frozen by `now`. Retry in a few minutes, if it doesn't work. -->

<!--  --> <div> <a href="https://travis-ci.org/Metnew/suicrux"> <img src="https://travis-ci.org/Metnew/suicrux.svg?branch=master" alt="Build Status"> </a> <a href="https://gitter.im/suicrux/Lobby?utm_source=badge&amp;utm_medium=badge&amp;utm_campaign=pr-badge&amp; utm_content=badge"> <img src="https://badges.gitter.im/suicrux/Lobby.svg" alt="Join the chat at https://gitter.im/suicrux/Lobby"> </a> <a href="https://www.bithound.io/github/Metnew/suicrux"> <img src="https://www.bithound.io/github/Metnew/suicrux/badges/code.svg" alt="bitHound Code"> </a> <a href="https://www.bithound.io/github/Metnew/suicrux"> <img src="https://www.bithound.io/github/Metnew/suicrux/badges/score.svg" alt="bitHound Overall Score"> </a> <a href="https://codecov.io/gh/Metnew/suicrux"> <img src="https://codecov.io/gh/Metnew/suicrux/branch/master/graph/badge.svg" alt="codecov"> </a> </div>

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
  • Static assets?
  • SSR?
  • Code-splitting?
  • Server-side data-fetching?
  • Theming?
  • Browser support
• 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

• Latest Webpack with HMR
• Babel: stage-0 and few known plugins.
• Eslint and Standard.js
• Offline-plugin
• webpack-bundle-analyzer
• compression-webpack-plugin
• optimize-css-assets-webpack-plugin
• autodll-webpack-plugin
• optimize-js-plugin
• wepback-assets-manifest
• circular-dependency-plugin
• extract-text-webpack-plugin
• copy-webpack-plugin

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

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.

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

Make sure you ask a right question. :smiling_imp:

PRs, issues, enhancements are always welcome.

Author

Vladimir Metnew vladimirmetnew@gmail.com

LICENSE

Apache License 2.0