Help needed regarding contributing to bitwarden clients

Hi,

I have worked 8 months as a MERN stack developer but now for past 6 months I am working as appsec engineer that lacks coding stuff.

To keep my JS coding skills fresh I wanted to contribute to some project and thought why not check bitwarden as I use it in daily life as well.

I observed clients repo includes JS code and can be a good place for me to spend time solving issues.
I have cloned the repo and installed the deps using npm i then I checked the directories e.g desktop, browser etc. I am willing to work on desktop version as its based on electron and I want to work on electron too. It doesnt mean I am not willing to work on browser or CLI, Ill move to them too.

The problem I am facing is setting up the project, I observed the package.json file in desktop project, there I ran npm run start, npm run build, npm run electron but it just build the app successfully and does not launch the app. I am getting the following output on running npm run electron:

webpack 5.73.0 compiled successfully in 24993 ms
[Main] Debugger listening on ws://127.0.0.1:5858/ee322ddf-03f9-4e68-b262-651da351e752
[Main] For help, see: https://nodejs.org/en/docs/inspector
[Rend] 
[Rend] > @bitwarden/[email protected] build:renderer:watch
[Rend] > cross-env NODE_ENV=development webpack --config webpack.renderer.js --watch
[Rend] 
[Main] (node:3564) DeprecationWarning: file property is deprecated and will be removed in v5.
[Main] (Use `electron --trace-deprecation ...` to show where the warning was created)
[Main] /home/cybersoldier/Documents/clients/node_modules/electron/dist/electron exited with signal SIGTRAP
[Main] electron --inspect=5858 ./build --watch exited with code 1
--> Sending SIGTERM to other processes..
[Rend] npm run build:renderer:watch exited with code SIGTERM

Can someone help me setting this project up and giving me some nudges, once I get go with this project, I plan to contribute heavily to it.

Thanks

Hi @njmulsqb, please try the instructions here: Desktop - Bitwarden Contributing Documentation

In particular:

  • try cloning a fresh copy of the repo to start from scratch
  • make sure you run npm ci, not npm i

When you start the app, you may get a blank Electron window at first. If this happens, you have to refresh the page (View → Reload) after webpack has finished building (after about 30 secs).

Let us know how you go.

1 Like

Hi,

Thank you for your response. The link you shared helped me to build the desktop app successfully, don’t you think this should be included in repo’s contributing.md file so that its more approachable?

Secondly, I can only see 1 open issue of desktop labelled good first issue and that too I believe is taken. Let’s wait for some other good first issue to show up, meanwhile I want to understand the desktop codebase. Can you suggest me where should I start and how should I get familiar with the codebase?

Is there any other issue for beginner available in your hindsight?

Good to hear the instructions worked. That site is brand new, so we’re still in the process of adding it to the readme and contributing docs for all repos, so that users can find it.

I don’t have any specific recommendations for good first issues, as a team we’re trying to use that label more to help new contributors, but that’s still early days. I recommend you filter by desktop issues (Issues · bitwarden/clients · GitHub) and then just spend some time reviewing and sorting through what’s open, what you’re interested in, and what you feel is within your skill level to take on.

1 Like

Thank you.

I’ll try to keep updating this thread with issues/challenges I face so that later on this thread can become useful for any new comer in getting involved with Bitwarden codebase

Hi @eliykat ,

While development, is there any way to not use your main account on Bitwarden? Are there any test accounts?
I am not willing to add dummy data in my main bitwarden account for testing purpose.

@njmulsqb sorry for the late reply. You can just create a new Bitwarden account for testing purposes. (e.g. if you use gmail, just use plus aliasing, e.g. [email protected])