gitbutler/DEVELOPMENT.md

How to Hack on GitButler

Alrighty, you want to get compiling. We love you already. Your parents raised you right. Let's get started.

---

Table of Contents

• Overview
• The Basics
  • Prerequisites
  • Install dependencies
  • Run the app
  • Lint & format
• Debugging
  • Logs
  • Tokio
• Building
  • Building on Windows
  • File permissions
  • Perl
• Design
• Contributing
• Some Other Random Notes
  • Icon generation
  • Release
  • Versioning
  • Publishing
• Development mode OAuth login

---

Overview

So how does this whole thing work?

It's a Tauri app, which is basically like an Electron app, in that we can develop a desktop app from one source with multiple OS targets and write the UI in HTML and Javascript. Except instead of Node for the filesystem access part, Tauri uses Rust.

So everything that hits disk is in Rust, everything that the user sees is in HTML/JS. Specifically we use Svelte in Typescript for that layer.

---

The Basics

OK, let's get it running.

Prerequisites

First of all, this is a Tauri app, which is a Rust app. So go install Rust. The Tauri site has a good primer for the various platforms here.

The next major thing is pnpm (because we're a little cooler than people who use npm), so check out how to install that here.

Install dependencies

Next, install the app dependencies.

I hope you have some disk space for 300M of node_modules, because this bad boy will fill er up:

$ pnpm install

You'll have to re-run this occasionally when our deps change.

Run the app

Now you should be able to run the app in development mode:

$ pnpm tauri dev

By default it will not print debug logs to console. If you want debug logs, set LOG_LEVEL environment variable:

$ LOG_LEVEL=debug pnpm tauri dev

Lint & format

In order to have a PR accepted, you need to make sure everything passes our Linters, so make sure to run these before submitting. Our CI will shame you if you don't.

Javascript:

$ pnpm lint
$ pnpm format

Rust:

$ cargo clippy   # see linting errors
$ cargo fmt      # format code

---

Debugging

Now that you have the app running, here are some hints for debugging whatever it is that you're working on.

Logs

The app writes logs into:

1. stdout in development mode
2. The Tauri logs directory

Tokio

We are also collecting tokio's runtime tracing information that could be viewed using tokio-console:

• development:

  $ tokio-console
  

• nightly:

  $ tokio-console http://127.0.0.1:6668
  

• production:

  $ tokio-console http://127.0.0.1:6667
  

---

Building

To build the app in production mode, run:

$ pnpm tauri build --features devtools --config gitbutler-app/tauri.conf.nightly.json

This will make an asset similar to our nightly build.

Building on Windows

Building on Windows is a bit of a tricky process. Here are some helpful tips.

File permissions

We use pnpm, which requires a relatively recent version of Node.js. Make sure that the latest stable version of Node.js is installed and on the PATH, and then npm i -g pnpm.

This often causes file permissions. First, the AppData folder may not be present. Be sure to create it if it isn't.

mkdir %APPDATA%\npm

Secondly, typically folders within Program Files are not writable. You'll need to fix the security permissions for the nodejs folder.

NOTE: Under specific circumstances, depending on your usage of Node.js, this may pose a security concern. Be sure to understand the implications of this before proceeding.

1. Right-click on the nodejs folder in Program Files.
2. Click on Properties.
3. Click on the Security tab.
4. Click on Edit next to "change permissions".
5. Click on Add.
6. Type in the name of your user account, or type Everyone (case-sensitive). Click Check Names to verify (they will be underlined if correct).
7. Make sure that Full Control is checked under Allow.
8. Apply / click OK as needed to close the dialogs.

Perl

A Perl interpreter is required to be installed in order to configure the openssl-sys crate. We've used Strawberry Perl without issue. Make sure it's installed and perl is available on the PATH (it is by default after installation, just make sure to restart the terminal after installing).

Note that it might appear that the build has hung or frozen on the openssl-sys crate. It's not, it's just that Cargo can't report the status of a C/C++ build happening under the hood, and openssl is large. It'll take a while to compile.

---

Design

We use Figma for our design work. If you're a designer (and even if you're not), you want to contribute to the design of GitButler, or your work involves UI, you could duplicate our design file.

GitButler design: Figma file 🎨

---

Contributing

Now that you're up and running, if you want to change something and open a PR for us, make sure to read CONTRIBUTING.md to make sure you're not wasting your time.

---

Some Other Random Notes

Most of this is for internal GitButler use, but maybe everyone else will find it interesting too.

---

Icon generation

I always forget how to do this, but when we update our app icon, run this to import it.

$ pnpm tauri icon path/to/icon.png

Release

Building is done via GitHub Action. Go to the link and select Run workflow from the desired branch.

Versioning

When running the release action, you will have to choose one of major, minor, or patch release type. Action will generate a new version based on your input and current version found at https://app.gitbutler.com/releases.

Publishing

To publish a version that you've just build, use Release Manager.

---

Development mode OAuth login

By default, you will not be able to log into GitButler using Github/Google because the base url does not match. To be able to do this add ( or update ) the following line to your .env.development file. You will need to create the file if it does not exist.

PUBLIC_API_BASE_URL=https://app.gitbutler.com/