Ring UI — JetBrains Web UI components
This collection of UI components aims to provide all of the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.
- Install Yeoman and Ring UI generator:
npm install -g yo @jetbrains/generator-ring-ui
- Go to the root directory of your project (create one if necessary) and run
yo @jetbrains/ring-ui. After you enter the name of the project all the necessary npm dependencies will be installed.
- Your project is ready to be developed. The following commands are available:
npm startto run a local development server
npm testto launch karma tests
npm run lintto lint your code
npm run buildto build a production bundle
npm run create-componentto create a new component template with styles and tests
In case boilerplate generators are not your thing and you prefer to understand the inner workings a bit better.
Install Ring UI with
npm install @jetbrains/ring-ui --save-exact
If you are building your app with webpack, make sure to
importring-ui components where needed. Otherwise, create an entry point (for example,
importthe components there.;;;ReactDOM;
webpack.config.jswith the following contents (example):const ringConfig = config;const webpackConfig =entry: 'src/entry.js' // your entry point for webpackoutput:path: 'path/to/dist'filename: '[name].js'module:rules:...ringConfigmodulerules<Your rules here>;moduleexports = webpackConfig;