Demo: reatty.now.sh Temporarily unavailable:(
Fullstack isomorphic boilerplate with server-side rendering and lazy-loading for your new Progressive Web App.
TL;DR: You're always free to use your own UI framework. The starter is "UI-framework-agnostic".
UI framework comparison here.
- 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.
- 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.
- 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.
- ESDoc - docs generator.
- Jest - awesome testing framework.
- And more tools for building and testing...
# clone repo without full git history
git clone --depth=1 https://github.com/Metnew/react-semantic.ui-starter.git
cd 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
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
npm run build # build both frontend and server
npm run frontend_build # build frontend
npm run server_build # build server
# 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
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"
npm run test # run tests with Jest, BASE_API env var is required!
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
Powered by ESDoc.
npm run docs # generate docs and `serve`
ENV vars are very important for configuration.
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.
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.
Some guides are already finished, some aren't. I update branch very often, so improved docs and explanations will be very soon.
- SSR with HMR on client and server from one process. (next.js-like HMR)
- Better docs
- Semver
- CLI app
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.
Vladimir Metnew [email protected]
MIT