Suicrux :smiling_imp:
Ultimate universal starter with lazy-loading, SSR and i18n.
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?
- Suicrux FAQ
- Environment variables
- Semantic.UI + React = SUIR
- 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-0and 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?
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--inspectarg to server in development. Webpack only.process.env.ANALYZE_BUNDLE (default: false): Runwebpack-bundle-analyzeron production build. _Webpack _process.env.GA_ID (default: false): Google analytics ID. If set,react-gainitialize itself inside >container oncomponentDidMount()`. Browser only.process.env.SENTRY_PUBLIC_DSN (default: false): Similar toGA_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 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