Ultimate universal starter with lazy-loading, SSR and i18n.
# 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
- 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
- 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
- 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
- Jest - testing framework.
- And more tools for building and testing...
/static
folder + url-loader
.
Everything in /static/public/
is copied to /dist/client
with copy-webpack-plugin.
Of course, config is intuitive! Webpack universality is inspired by Razzle.
Check /src/server/ssr/
.
Using react-async-bootstrapper - a wrapper around react-tree-walker
.
Yes, with styled-components'
<ThemeProvider>
it's possible to specify a color theme.
Without react-intl
:
- Safari 7+
- IE 10+
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)
: Runwebpack-bundle-analyzer
on production build. _Webpack _process.env.GA_ID (default: false)
: Google analytics ID. If set,react-ga
initialize itself inside >container on
componentDidMount()`. 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.
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.
- Big UI library
- Based on SUI: SUIR uses SUI CSS under the hood.
- Modular: Import only what you use required components.
- 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.
Have a question? Ask! π
Make sure you ask a right question. π
PRs, issues, enhancements are always welcome.
Vladimir Metnew vladimirmetnew@gmail.com
Apache License 2.0