Developing your Desktop App

Development

TypeScript

Following the recent changes in the codebase, developing desktop apps takes into consideration the use of TypeScript 4. This is to address issues regarding maintainability.
Be sure to check out the TypeScript 4 release handbook and be updated.

The Build Pipeline

The build process is founded upon rollup bundler which compiles and brings every piece together. There are three entry files for your code:
    src/main.ts, the script running at the main Electron process, orchestrating the whole application;
    src/rootWindow.ts, the script that renders the UI of the root window, the app's main window;
    and src/preload.ts, which runs in a privileged mode to connect the app and the webviews rendering Rocket.Chat's web client.

Adding Node.js Modules

To extend the app's functionalities with modules, always remember to differentiate between modules needed as dependencies and devDependencies in package.json. Like any other package depending project, only modules listed in dependencies will be included in the distributable final app.

Servers

Default Servers

Using a servers.json file will help define what servers the client will connect to. When specified, it will automatically populate the server list in the sidebar.
This file contains a list of default servers that will be added the first time the user runs the app and also when all servers are removed from the list. The file syntax is as follows:
1
{
2
"Demo Rocket Chat": "https://demo.rocket.chat",
3
"Open Rocket Chat": "https://open.rocket.chat",
4
"Awesome Rocket Chat": "https://awesome.rocket.chat"
5
}
Copied!

Pre-Release Configuration

You can bundle a servers.json with the install package, the file should be located in the root of the project application (same level as the package.json).
If the file is found, the initial "Connect to server" screen will be skipped and it will attempt to connect to the first server defined in the array. When that is done, it will take the user straight to the login screen.
Note that the servers.json will only be checked if no other servers have already been added, even if you uninstall the app without removing older preferences, it will not be triggered again.

Post-Install Configuration

If you cannot (or don't want to) bundle the file inside the app, you can create a servers.json in the user preferences folder which will overwrite the packaged one. The file should be located in any of the directories listed below.
Windows
macOS
Linux
    ~\Users\<username>\AppData\Roaming\Rocket.Chat\
    ~\Program Files\Rocket.Chat\Resources\
    ~/Users/<username>/Library/Application Support/Rocket.Chat/
    ~/Applications/Rocket.Chat.app/Contents/Resources/
    /home/<username>/.config/Rocket.Chat/
    /opt/Rocket.Chat/resources/

Testing

Unit tests

We use Jest testing framework with the Jest electron runner. It searches for all files in src directory that match the glob pattern *.(spec|test).{js,ts,tsx} performs tests on them.
Run this command to execute tests on your changes.
1
yarn test
Copied!

Making a Release

To package your app into an installer use command:
1
yarn release
Copied!
This will start the packaging process for the operating system you are running this command on. When it is done, the output file ready for distribution can be found in the dist/ directory.
All packaging actions are handled by electron-builder. It has a lot of customization options not mentioned here.
Last modified 6d ago