This repo contains the ClusterIQ Console as the Web User Interface for the ClusterIQ project.
This section explains how to deploy ClusterIQ Console.
Follow this steps for deploying a local instance of the console.
git clone [email protected]:RHEcosystemAppEng/cluster-iq-console.git
cd cluster-iq-console
npm install && npm run start:dev# Install development/build dependencies
npm install
# Start the development server
npm run start
# Run a production build (outputs to "dist" dir)
npm run build
# Run the test suite
npm run test
# Run the test suite with coverage
npm run test:coverage
# Run the linter
npm run lint
# Run the code formatter
npm run format
# Launch a tool to inspect the bundle size
npm run bundle-profile:analyze
# Start the express server (run a production build first)
npm run start
# Start storybook component explorer
npm run storybook
# Build storybook component explorer as standalone app (outputs to "storybook-static" dir)
npm run build:storybookTo use an image asset that's shipped with PatternFly core, you'll prefix the paths with "@assets". @assets is an alias for the PatternFly assets directory in node_modules.
For example:
import imgSrc from '@assets/images/g_sizing.png';
<img src={imgSrc} alt="Some image" />You can use a similar technique to import assets from your local app, just prefix the paths with "@app". @app is an alias for the main src/app directory.
import loader from '@app/assets/images/loader.gif';
<img src={loader} alt="Content loading />Inlining SVG in the app's markup is also possible.
import logo from '@app/assets/images/logo.svg';
<span dangerouslySetInnerHTML={{__html: logo}} />You can also use SVG when applying background images with CSS. To do this, your SVG's must live under a bgimages directory (this directory name is configurable in webpack.common.js). This is necessary because you may need to use SVG's in several other context (inline images, fonts, icons, etc.) and so we need to be able to differentiate between these usages so the appropriate loader is invoked.
body {
background: url(./assets/bgimages/img_avatar.svg);
}When importing CSS from a third-party package for the first time, you may encounter the error Module parse failed: Unexpected token... You may need an appropriate loader to handle this file typ.... You need to register the path to the stylesheet directory in stylePaths.js. We specify these explicity for performance reasons to avoid webpack needing to crawl through the entire node_modules directory when parsing CSS modules.
- For accessibility compliance, we use react-axe
- To keep our bundle size in check, we use webpack-bundle-analyzer
- To keep our code formatting in check, we use prettier
- To keep our code logic and test coverage in check, we use jest
- To ensure code styles remain consistent, we use eslint
- To provide a place to showcase custom components, we integrate with storybook
This project uses dotenv-webpack for exposing environment variables to your code. Either export them at the system level like export MY_ENV_VAR=http://dev.myendpoint.com && npm run start:dev or simply drop a .env file in the root that contains your key-value pairs like below:
ENV_1=http://1.myendpoint.com
ENV_2=http://2.myendpoint.comWith that in place, you can use the values in your code like console.log(process.env.ENV_1);
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.