React-Semantic.UI-Starter
reatty.now.sh Temporarily unavailable:(
Demo:
What is this?
Fullstack isomorphic boilerplate with server-side rendering and lazy-loading for your new Progressive Web App.
Quick intro
Why this starter uses react-semantic-ui
?
TL;DR: You're always free to use your own UI framework. The starter is "UI-framework-agnostic".
UI framework comparison here.
What's inside?
Frontend:
- React and Redux
- SASS, PostCSS, and styled-components support.
- React-Router v4 + React-Router-Redux v5
- Redux-thunk, Redux-Devtools-Extension
- Fetch polyfill, Promise polyfill and normalizr (api response normalization)
- Semantic-ui-react - UI components.
- Store2 and js-cookie - LocalStorage and cookies.
- why-did-you-update and React-Addons-Perf for better performance optimization.
- Lodash - is a dependency of Semantic-ui-react.
Build (Webpack):
- Webpack 3:
- Babel (stage-0),
- HMR, devServer, hotMiddleware,
- i18n support with i18n-webpack-plugin
- Check your code with Eslint and Stylelint (that you can uncomment inside
postcss.config.js
)
- Offline-plugin, favicons-webpack-plugin, webpack-manifest-plugin, preload-webpack-plugin, webpack-bundle-analyzer, compression-webpack-plugin, webpack-common-shake.
Server:
- rapscallion - async server-side rendering.
- morgan - request logger middleware.
- helmet - secure your Express app.
- cookie-parser - cookie parsing middleware.
- body-parser - body parsing middleware
- compression - compression middleware (gzip).
- jsonwebtoken - JWT
for the winfor Auth.
Other:
- ESDoc - docs generator.
- Jest - awesome testing framework.
- And more tools for building and testing...
Usage
Install:
# clone repo without full git history git clone --depth=1 https://github.com/Metnew/react-semantic.ui-starter.gitcd react-semantic.ui-starter# You can remove .git folder if you don't want to pull new features or need your own repo # to remove folder run: rm -rf .git # install dependencies npm install
Development:
npm run dev # run both frontend and server in dev mode(using `concurrently`) npm run frontend_dev # run frontend in dev mode. npm run server_dev # run server in dev mode
Build:
npm run build # build both frontend and server npm run frontend_build # build frontend npm run server_build # build server
Run:
# npm run build - at first build app. npm run start # run app. You need already built app for this! # then visit localhost:4000 in your browser, if you didn't specify PORT env var
Deploy:
If you use now on OSS(free) plan - you will run out of memory on npm run build
. I recommend you to disable some non-critical plugins (ModuleConcatenationPlugin, SriPlugin, FaviconsWebpackPlugin). Demo that was deployed to "now"
Test:
npm run test # run tests with Jest, BASE_API env var is required!
Lint:
eslint-loader
is already included in webpack, but if you want to lint code without webpack:
npm run lint:styles # lint styles with Stylelint npm run lint:scripts # lint scripts with ESlint
Docs:
Powered by ESDoc.
npm run docs # generate docs and `serve`
ENV vars:
ENV vars are very important for configuration.
Client ENV vars:
GA_ID
: Your Google analytics ID.
BASE_API
: /api/v1
by default. App uses this path for requests with relative urls
SENTRY_PUBLIC_DSN
: Your Sentry public DSN.
APP_LANGUAGE
: en
by default. Build app with this language. Check /i18n
folder and i18n-webpack-plugin.
ANALYZE_BUNDLE
: Run webpack-bundle-analyzer after build.
Server ENV vars:
PORT
: Port on which your app run.
JWT_SECRET
: JWT_SECRET 😄
BASE_API
: App uses this path for requests with relative urls.
SENTRY_PUBLIC_DSN
: Your Sentry public DSN.
SENTRY_DSN
: Your Sentry full(private) DSN for server-side error handling.
APP_LANGUAGE
: Language of your app.
DIST_PATH
: (by default: /dist/client/<APP_LANGUAGE>
). Path where server search for the index.html of your built app.
How it works?
Most commonly asked questions are here.
Some guides are already finished, some aren't. I update branch very often, so improved docs and explanations will be very soon.
Webpack configuration (not finished)
What's the magic behind npm run dev
?
How i18n works?
Testing.
Why this starter uses react-semantic-ui
?
How does SSR work? (not finished)
Environment variables and configuration. (not finished)
Starter architecture and design. (not finished)
Nearest future:
- SSR with HMR on client and server from one process. (next.js-like HMR)
- Better docs
- Semver
- CLI app
Something very important:
Have a question? Ask! 😉
Any help is highly appreciated because the project still has only one maintainer (ha-ha, yeah it's me 😈). PRs and issues are always welcome.
Author
Vladimir Metnew vladimirmetnew@gmail.com
LICENSE
MIT