2d6ed25cb9
Update the start scripts to match the updated scripts in the `package.json`. Additionally, add instructions for forwarding the domains to localhost for the stage and prod since this is only mentioned in the `devel/` readme.
97 lines
3 KiB
Markdown
97 lines
3 KiB
Markdown
# image-builder-frontend
|
|
|
|
## Frontend Development
|
|
|
|
To develop the frontend you can use a proxy to run image-builder-frontend locally
|
|
against the chrome and backend at console.redhat.com.
|
|
|
|
Working against the production environment is preferred, as any work can be released without
|
|
worrying if a feature from stage has been released yet.
|
|
|
|
### Nodejs and npm version
|
|
|
|
Make sure you have npm@7 and node 15+ installed. If you need multiple versions of nodejs check out [nvm](https://github.com/nvm-sh/nvm).
|
|
|
|
### Webpack proxy
|
|
|
|
1. run `npm ci`
|
|
|
|
2. run `npm run prod-beta`. This command uses a prod-beta env by default. Configure your
|
|
environment by the `env` attribute in `dev.webpack.config.js`.
|
|
|
|
3. Secondly redirect a few `prod.foo.redhat.com` to localhost, if this has not been done already.
|
|
|
|
```bash
|
|
echo "127.0.0.1 prod.foo.redhat.com" >> /etc/hosts
|
|
```
|
|
|
|
4. open browser at `https://prod.foo.redhat.com:1337/beta/insights/image-builder`
|
|
|
|
### Webpack proxy (staging) -- *Runs with image-builder's stage deployment*
|
|
|
|
1. run `npm ci`
|
|
|
|
2. run `npm run stage-beta`. This command uses a stage-beta env by default. Configure your
|
|
environment by the `env` attribute in `dev.webpack.config.js`.
|
|
|
|
3. Secondly redirect a few `stage.foo.redhat.com` to localhost, if this has not been done already.
|
|
|
|
```bash
|
|
echo "127.0.0.1 stage.foo.redhat.com" >> /etc/hosts
|
|
```
|
|
|
|
4. open browser at `https://stage.foo.redhat.com:1337/beta/insights/image-builder`
|
|
|
|
### Insights proxy (deprecated)
|
|
|
|
1. Clone the insights proxy: https://github.com/RedHatInsights/insights-proxy
|
|
|
|
2. Setting up the proxy
|
|
|
|
Choose a runner (podman or docker), and point the SPANDX_CONFIG variable to
|
|
`profile/local-frontend.js` included in image-builder-frontend.
|
|
|
|
```
|
|
sudo insights-proxy/scripts/patch-etc-hosts.sh
|
|
export RUNNER="podman"
|
|
export SPANDX_CONFIG=$PATH_TO/image-builder-frontend/profiles/local-frontend.js
|
|
sudo -E insights-proxy/scripts/run.sh
|
|
```
|
|
|
|
3. Starting up image-builder-frontend
|
|
|
|
In the image-builder-frontend checkout directory
|
|
|
|
```
|
|
npm install
|
|
npm start
|
|
```
|
|
|
|
The UI should be running on
|
|
https://prod.foo.redhat.com:1337/beta/insights/image-builder/landing.
|
|
Note that this requires you to have access to either production or stage (plus VPN and proxy config) of insights.
|
|
|
|
## Backend Development
|
|
|
|
To develop both the frontend and the backend you can again use the proxy to run both the
|
|
frontend and backend locally against the chrome at cloud.redhat.com. For instructions
|
|
see [devel/README.md](devel/README.md).
|
|
|
|
|
|
## Style Guidelines
|
|
|
|
This project uses eslint's recommended styling guidelines. These rules can be found here:
|
|
https://eslint.org/docs/rules/
|
|
|
|
|
|
## Test Guidelines
|
|
|
|
Testing is done using [React Testing Library](https://testing-library.com/docs/react-testing-library/intro).
|
|
All UI contributions must also include a new test or update an existing test in order to maintain code coverage.
|
|
|
|
Tests can be run with
|
|
```
|
|
npm run test
|
|
```
|
|
|
|
These tests will also be run in our Travis CI when a PR is opened.
|