Skip to content
This repository has been archived by the owner on May 7, 2021. It is now read-only.

How to...

Jump to bottom
ckrych edited this page Apr 11, 2018 · 19 revisions

Here is a list on recipes on how to do simple task when developing on fabric8-ui. I strongly recommend you read the README first.

How to run local UI with PROD forge

Forge backend only work with PROD. don't try it on prod-preview

  • For the UI:
git clone git@github.com:fabric8-ui/fabric8-ui.git
npm install
source environments/openshift-prod-cluster.sh

How to run local UI with local forge

DEPRECATED New launcher need a different setup

  • For the UI:
git clone git@github.com:fabric8-ui/fabric8-ui.git
npm install
source environments/openshift-prod-cluster.sh
export FABRIC8_FORGE_API_URL=http://localhost:8080
npm start
  • Forge backend
git clone git@github.com:fabric8io/generator-backend.git
cd generator-backend
export OPENSHIFT_API_URL=https://api.starter-us-east-2.openshift.com:443
export KEYCLOAK_SAAS_URL=https://sso.openshift.io/
export AUTH_URL=https://auth.openshift.io
export WIT_URL=https://api.openshift.io/
mvn install
./run.sh

then go to: http://localhost:3000/

NOTE: Those env variables target PROD.

To target prod-preview:

export WIT_URL=https://api.prod-preview.openshift.io
export AUTH_URL=https://auth.prod-preview.openshift.io
export KEYCLOAK_SAAS_URL=https://sso.prod-preview.openshift.io/
export OPENSHIFT_API_URL=https://console.free-int.openshift.com:443

NOTE:

  • If you want to build the fabric8-generator add-on from snapshot use mvn install -Pgenerator-snapshot
  • If you want to debug replace ./run.sh by ./debug.sh and use remote debug on your IDE.

How to work on dependent module from fabric8-ui

Method1: Dist-watch in library + npm lin in fabric8-ui

Most libraries like ngx-login-client, ngx-forge, ngx-widgets uses similar gulps tasks combine with npm script. The build is quite homogenous across the different UI libraries.

If you want to test the changes done in one module/lib into fabric8-ui:

  • in library (ngx-login-client for example):
> npm run watch:library
...
[15:27:11] Now run
[15:27:11] 
[15:27:11]     npm link /Users/corinne/workspace/ngx-login-client/dist-watch

This command should display the link command to use.

  • in fabric8-ui:
> npm link /your-path-to-ngx-login-client/dist-watch
> npm start

Everytime a change is detected in ngx-login-client src folder, dist-watch folder is build, therefore a change in fabric8-ui which is in turn rebuilt.

  • Debug As usual with Chrome devtools, search the fabric8-ui sources in webpack://./src/ folder. For ngx-widget you'll find them in webpack://../ngx-forge/dist-watch

  • To check linking:

> find node_modules -maxdepth 1 -type l -ls
node_modules/ngx-forge -> ../../../../.nvm/versions/node/v8.3.0/lib/node_modules/ngx-forge
  • To unlink:
> npm unlink /your-path-to-ngx-login-client/dist-watch

then, delete you node_modules and reinstall.

Method2: plain old npm link

You can also use plain old symlink. Be cautious of TS transpilation

  • use npm link
cd ~/projects/dependency 
npm link                 
cd ~/projects/myproject
npm link dependency             # links to your local dependency
  • to unlink
npm unlink dependency
npm install
  • find if still some linked module
find node_modules -maxdepth 1 -type l -ls

How to work around net::ERR_CONTENT_LENGTH_MISMATCH

Fabric8-ui adds an alternative dev server which increases the keepAliveTimeout to prevent errors with serving very large dev JS files that take longer than 5 seconds resulting in the following error:

http://localhost:3000/vendor.bundle.js net::ERR_CONTENT_LENGTH_MISMATCH

Use the following command to run the dev server:

npm run server:dev2

The timeout is increased by default from 5 seconds to 10 seconds and can further controlled via argument in package.json script or in devserver.js.

How to run local fabric8-ui with local wit

If you want to develop locally on wit backend and run a local fabric8-ui. you can still target pre-prod for auth service.

  • in fabric8-services/fabric8-wit:
make dev

Note: For now make dev uses docker-compose. WIP to replace with minikube see PR

Note: macOS user, make dev uses a different docker-compose yml, using make dev should be transparent for you. Watch out for troubleshooting connection issue between with and auth db.

  • in fabric8-ui/fabric8-ui directory:
source environments/openshift-free-int-cluster.sh 
export FABRIC8_SSO_API_URL=https://sso.prod-preview.openshift.io/
export FABRIC8_AUTH_API_URL=http://localhost:8089/api/
export FABRIC8_WIT_API_URL=http://localhost:8080/api/
export FABRIC8_REALM=fabric8-test

npm start

How to reinit DB on fabric8-wit

docker rm -f fabric8wit_db_1 && docker-compose up -d db
make dev

How to access Almighty DB

  • Method1: if you have psql locally installed:
psql -h 127.0.0.1 -d postgres -U postgres -W
  • Method2: running psql within docker
docker exec -it fabric8wit_db_1 bash -c psql

How to run one unit test

ALMIGHTY_RESOURCE_DATABASE=1 ALMIGHTY_DEVELOPER_MODE_ENABLED=true  go test github.com/almighty/almighty-core/controller -v -run TestSuiteWorkItemLink -testify.m TestCreateAndDeleteWorkItemLinkOK

will run all test suite starting with TestSuiteWorkItemLink and within those, all the tests starting with TestCreateAndDeleteWorkItemLinkOK

How to re-generate design

make clean-generated && make generate
Clone this wiki locally