React-Semantic.UI-Starter

Demo: reatty.now.sh Temporarily unavailable:(

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 win for 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.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

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