cbioportal-frontend
This repo contains the frontend code for cBioPortal which uses React, MobX and TypeScript. Read more about the architecture of cBioPortal here.
Branch Information
Note: you can check the frontend version of the live instance by checking window.FRONTEND_COMMIT in the console.
Run
Make sure you have installed the node version specified in
package.json.
This project uses pnpm as its package manager. Enable it via corepack:
corepack enable
Tip: For node, we recommend that you use nvm: Node Version Manager to switch between versions easily.
Windows Tip: If you are developing on Windows, we recommend that you use Ubuntu / Windows Subsystem for Linux.
Remove old compiled node_modules directory if it exists
rm -rf node_modules
To install all app and dev dependencies
pnpm install --frozen-lockfile
To build all packages the main project depends on (must be done prior to start of dev server):
pnpm run buildModules
To start the dev server with hot reload enabled
# set the environment variables you want based on what branch you're branching
# from
export BRANCH_ENV=master # or rc if branching from rc
# export any custom external API URLs by editing env/custom.sh
pnpm run start
Tip: BRANCH_ENV should be set to master or rc, and not to your local branch name. You can set this in your ~/.bashrc if you don't intend to change it often.
Example pages:
Tip: If you see dependency errors, especially the error that the script cannot identify the packages managed by lerna (monorepo), you could do a pnpm run buildModules first before starting the project.
To run unit/integration tests
// run tests for main project
pnpm run testMain
// run tests for all packages
pnpm run testPackages
// run the above with grep on particular spec file
GREP=example.spec.js pnpm run testMain
GREP=example.spec.js pnpm run testModules
To run unit/integration tests in watch mode
pnpm run test:watch
// see above for GREP
To run unit/integration tests in watch mode (where specName is a fragment of the name of the spec file (before .spec.))
pnpm run test:watch
// see above for GREP
Formatting Code with PrettierJS
When you make a git commit, PrettierJS will automatically run in write mode on all the files you changed, and make
formatting adjustments to those entire files as necessary, before passing them through to the commit (i.e. this is a
"pre-commit git hook"). No action from you is necessary for this. You may observe that your changes don't look exactly
the same as you wrote them due to formatting adjustments.
When you make a pull request, CircleCI will run PrettierJS in check mode on all of the files that have changed between
your pull request and the base branch of your pull request. If all of the files are formatted correctly, then the
CircleCI prettier job will pass and you'll see a green check on Github. But if, for whatever reason, this check fails,
you must run the following command in your cbioportal home directory:
pnpm run prettierFixLocal
This will make PrettierJS run through the same files that CircleCI checks (i.e. all files changed since the base branch)
but in write mode and thus adjust those files to have correct formatting. When you make this update, the CircleCI
prettier job should pass. To check if it will pass, you can also run the same command that CircleCI will run:
pnpm run prettierCheckCircleCI
Changing the URL of API
If the version of the desired API URL is the same as the one used to generate
the typescipt client, one can change the API_ROOT variable for development in
my-index.ejs. If the version is different, make sure the API
endpoint works with the checked in client by changing the API URL in
package.json and running:
# set the environment variables you want based on what branch you're branching
# from
export BRANCH_ENV=master # or rc if branching from rc
# export any custom external API URLs by editing env/custom.sh
pnpm run updateAPI
pnpm run test
This is the beginning of the README. Read the rest at the original. Read the full README ↗
