npm install -g yarn
yarn
yarn start|
Note
|
On some platforms, yarn start may fail with an error like Error: ENOSPC: System limit for number of file watchers reached. To fix this, you need to increase the limit of file watchers on your system. The command may vary depending on the platform, please refer to these instructions.
|
A new browser window should automatically open.
But, if it doesn’t then use:
http://localhost:3000
This launches a development environment that instantly reloads any changes to the browser for rapid development.
-
build: Production build output -
public: Home of index.html -
src: Source and test code -
src/actions: Redux actions -
src/app: React top level component -
src/assets: Images and other assets -
src/config: Configuration -
src/containers: Redux connected containers Deprecated -
src/components: React Components -
src/fonts: Fonts -
src/images: Patternfly Images -
src/pages: Top level pages and nested components -
src/reducers: Redux reducers -
src/services: Api services -
src/store: Redux store definitions -
src/types: Typescript definitions for all kinds of types -
src/utils: Various Utilities
We use yarn as the package manager, if adding dependencies to package.json
make sure you install them with yarn and commit the yarn.lock file.
When developing, it is usual to run this application outside of kiali.
It is possible to proxy the API requests without having to push the changes to kiali.
Add the proxy
property to package.json with the url of kiali.
{
"name": "kiali-ui",
"version": "0.2.1",
"proxy": "http://kiali-istio-system.127.0.0.1.nip.io",
"bugs": {
...For a video on getting a Kiali-ui development environment running please see (complete with tips/tricks):
If Kiali is configured with a specific web root, make sure to append it to the URL. On many setups with Kubernetes, the web root will be /kiali by default.
Run yarn start and try it!
$ curl -u admin:admin http://localhost:3000/api
Namespaces: [default istio-system kube-public kube-system myproject openshift openshift-infra openshift-node]
Namespace: default Services [docker-registry kubernetes router]
Service Name: docker-registry
Service Labels:
docker-registry = default
Type: ClusterIP
...PatternFly is the main UI components framework. It defines style based on SASS preprocessor.
All Patternfly build assets are copied to src.
Any React component may have its related SCSS file (such as App.scss - this one includes all PatternFly Sass along with
PatternFly React Sass extensions).
Once Sass compiles, the resulting CSS can be found next to its SCSS counterpart (ex: src/app/App.css).
To compile CSS, run:
yarn build-cssNote:
Only static assets which are import 'ed into your application will be included in your resulting build output.
To use the RCUE styled css instead of normal Patternfly
For development run:
env REACT_APP_RCUE=true yarn startFor production build run:
env REACT_APP_RCUE=true yarn buildSee the STYLE CODE GUIDE file.
To run the tests, the standard command yarn test is valid,
but since some tests are using snapshots the preferred command is to update them in the same time:
yarn test -uThen hit a to run all tests.
After running the tests, if any snapshot has been modified (check git status), the diff should be reviewed to make sure it’s an intentional or trivial change. Modified snapshots must be part of the commit so that they’re reviewed collectively and won’t make CI build fail.
Note: for OS/X users testing requires watchman to be installed
brew install watchmanWe use Snyk for JS vulnerability testing. Snyke will run automatically on every commit pushed to kiali-ui.
If you wish to run Snyk manually to test before you push, then the following command can be used:
yarn run snykUse yarn build which will bundle the build artifacts using webpack into the build directory.
To produce a graphical representation of the all the libraries in the project (showing what % of total each one is).
yarn build
yarn run analyzeWhich will then launch a browser with your graphical source map displayed.
See the LICENSE file.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent