Electron-based File Manager
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Support debug of main process in VS Code Jul 31, 2018
main Big perf improvement by avoiding IPC traffic Jun 13, 2018
renderer
resources
.eslintrc.json
.gitignore
README.md
angular.json
elf-in-action.gif
elf-overview.png Updated README and screenshots Jun 14, 2018
installer.json
package-lock.json
package.json
tsconfig.json
tsconfig.main.json Support debug of main process in VS Code Jul 31, 2018
tslint.json

README.md

Elf

I've been building a small suite (see El terminador for instance) of Electron-based apps. The Elf file manager is the latest. My motivation throughout has partly been that few Linux tools have the kind of rich UI you can build today with tools like Angular and Material Design. But they have also been adventures in immutable state management made joyous by the incredible ngxs state management tooling. More on that later.

Secondarily, I tried about a dozen Ubuntu file managers and all left me frustrated. Even the simple capability of starting exactly where you left off last time was difficult to find. I sorely missed Cocoatech's excellent Path Finder on my Mac.

Highlights

Highlights

  • Single-pane, or dual pane split either horizontally or vertically
  • Any number of tabs per pane
  • All customizations (splits, tabs and so on) are automatically persisted
  • Effectively unlimited undo/redo stack
  • Log of all actions performed

Elf in Action

In Action

Technology Stack

Elf was essentially made possible by ngxs. It is an amazing state management pattern and no Angular project should be started IMHO without at least considering it. The entire state of Elf -- from the clipboard through selection to the tab and view configuration -- is managed by ngxs.

Best of all, so is the state of the file system. Elf sets file watchers for each open folder. Only the watchers mutate Elf's file system state. Actions like copy or move are not operations on a tree. Rather, they are operations on the underlying file system itself. The tree redraws itself in response to changes in its state.

As always, in addition to ngxs, I have relied heavily on one of the best tech stacks currently available:

How to Run in Development Mode

One time only, you'll need to grab the code.

git clone https://github.com/mflorence99/el-file.git
cd el-file
npm install

Next, start the dev server for the Angular client. This way, hot reload of the client is supported.

npm run serve

Finally, in another session, start the Electron app itself.

npm run test

How to Run in Production Mode (Linux)

NOTE: this currently only works for Ubuntu / Debian.

I need to host the installation files.

One time only, you'll need to grab the code.

git clone https://github.com/mflorence99/el-file.git
cd el-file
npm install

Then package and install Elf.

npm run package
npm run deb64
npm run deb64-install

How to Run in Production Mode (Windows and Mac)

Although there are currently no installation files except for Linux, you can still start ELf in production mode.

npm run live

Tips

  • Ctrl+click on a folder's arrow attempts to open all the folders in the sub-tree
  • Right click on a tab's icon to customize the tab or remove it