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 :smile:
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! :wink:

Any help is highly appreciated because the project still has only one maintainer (ha-ha, yeah it's me :smiling_imp:). PRs and issues are always welcome.

Author

Vladimir Metnew [email protected]

LICENSE

MIT