Skip to content

Development tips: General

Jump to bottom
Ben Silverman edited this page Jul 1, 2021 · 1 revision

Here are some tips that may make development on DPdash easier.

Mount a dev directory

This is a requirement to do any development on DPdash, since everything is containerized in the Singularity container.

Make sure that in dpdash/singularity/.env, DPDASH_DEV_DIR is set to the dpdash root directory that you cloned from GitHub. Also, in order to mount this path, you will need to create a dist directory inside of the dpdash root directory. It may be empty; in the container, ${state}/dpdash/dist will be mounted atop it.

Then, run the following command from the dpdash/singularity directory:

./start.sh -sd

This will launch the Singularity shell with your development directory mounted.

Rebuilding code

Server-side

After making changes to anything inside server/, the backend must be recompiled with Babel and the app must be restarted for the changes to take effect.

To do this, launch the Singularity shell and mount your dev directory:

cd dpdash/singularity
./start.sh -sd

From within the container:

cd /sw/apps/dpdash/singularity
./quit.sh
./run.sh

Part of run.sh is running the script npm run transpile, which will recompile with Babel. Then the rest of run.sh will start the app.

Client-side

After making changes to anything inside views/ or stores/, the frontend (client-side code) will need to be rebuilt.

This will need to be re-bundled with Webpack. Because bundling can take a long time, it is recommended to edit webpack.config.js and only build the entrypoints that correspond to your changes. For example, if you only changed things in views/Report.react.js, you might want to comment out the other entrypoints like so:

  entry: {
    // study: './views/Study.render.react.js',
    // admin: './views/Admin.render.react.js',
    // main: './views/Main.render.react.js',
    // login: './views/Login.render.react.js',
    // register: './views/Register.render.react.js',
    // reset: './views/Resetpw.render.react.js',
    // account: './views/Account.render.react.js',
    // editConfig: './views/EditConfig.render.react.js',
    // config: './views/Config.render.react.js',
    // deepdive: './views/DeepDive.render.react.js',
    // graph: './views/Graph.render.react.js',
    // reportsList: './views/ReportsList.render.react.js',
    // editReport: './views/EditReport.render.react.js',
    report: './views/Report.render.react.js',
  },

However, the whole bundle (all lines uncommented) must be built at least once in your dev directory to run the app at all. So, this will only work for subsequent builds.

Also, make sure you uncomment them before committing with git!

Then, you will need to be in the Singularity shell with the mounted dev directory:

cd dpdash/singularity
./start.sh -sd

And you can rebuild the code with the following command:

cd /sw/apps/dpdash
npm run build

When the process completes, you will see some warnings that can be ignored (or you can try to fix them if you want).

Then, assuming you only changed things in the frontend (views/ or stores/), you don't even have to restart DPdash, the changes will be immediately visible.

Rebuilding image

When you have completed your changes, commit them to a new branch on GitHub.

Then, you may modify the Singularity recipe (dpdash/singularity/Singularity) like so:

    ## clone the DPdash digital phenotyping dashboard
    # git clone https://github.com/AMP-SCZ/dpdash.git 
    git clone --single-branch --branch branch-name https://github.com/AMP-SCZ/dpdash.git
    cd dpdash

Comment out the line git clone https://github.com/AMP-SCZ/dpdash.git and add the line with --single-branch after it. Replace branch-name with your branch name. And if your branch is not on the official AMP-SCZ repo, update the repository URL with your repo.

Then, you will need sudo privileges to run the following command and rebuild the image (replacing /path/to/new/dpdash.sif with wherever you want to store the new image):

cd dpdash/singularity
sudo singularity build /path/to/new/dpdash.sif Singularity

If you run into an error about reaching a maximum usage, you may need to create a Docker Hub account and add the following to the command:

sudo SINGULARITY_DOCKER_USERNAME=username SINGULARITY_DOCKER_PASSWORD=password singularity build /path/to/new/dpdash.sif Singularity

After that, make sure that you revert changes to the Singularity recipe (dpdash/singularity/Singularity) before making any more commits to git.

Then, you can test your new image by using the /path/to/new/dpdash.sif for the DPDASH_IMG property in your dpdash/singularity/.env and relaunching DPdash.

If it is ready, then you may upload the image to Dropbox with the dbxcli tool, assuming you have privileges to access that Dropbox directory:

dbxcli put /path/to/new/dpdash.sif /docker-singularity-containers/dpdash.sif

Clone this wiki locally