File manager written in TypeScript & React

Features

• Split-view window
• Tabs support
• Fully keyboard controlled
• Fully localized (French & English available)
• Dark Mode with automatic detection (macOS Mojave)
• Open a terminal from any folder
• Plugin-based: local supported for now, ftp in the works
• WSL detection on Windows

Feature tour

Dark theme automatic detection (macOS Mojave)

React-Explorer will automatically switch to dark-theme when it's detected:

Create and read folder

By pressing ctrl (Linux/Win) or cmd the folder you create will be automatically read:

Create nested folders

You can create several folders at once by separating them with a forward-slash:

Quick access to parent folders

By right-clicking on a tab's icon you can quickly get access to the parents of the currend folder:

WSL support

React-Explorer will automatically detect and show the list of Linux distributions installed using WSL on Windows:

Requirements

React-Explorer works on any modern Windows, Mac or Linux computer.

Building for local development

In order to build React-Explorer you need to have installed nodejs.

Once installed, building React-Explorer is as easy as typing:

npm install && npm run build

This will build a development package.

In order to run in locally without having to create a native executable, you can then type:

npx electron ./build/main.js

Building binary packages

In order to build binary packages, simply type the following:

npm run dist

This will build packaged binaries of React Explorer into the dist folder for every supported platform.

React-Explorer can also be built for a single patform. For example, to build only the Windows binaries, type:

npm run dist-win

Localization

React-Explorer is fully localized using .json files. Right now, English and French are available.

Adding a new language to React-Explorer is easy: simply duplicate one of the file found in src/locale/lang directory.

The new file should have the name code.json where code is a valid language code, for example: ja.json to add support for Japanese.

Tests

Unit testing

React-Explorer has both unit tests (using Jest) and end to end tests (using Cypress).

To run unit tests simply type:

npm test

This will start Jest and run every spec files found in src. Every test file can be found next to the component it is testing.

End to End testing

End to end tests are using Cypress and are in the separate e2e directory. You must install & configure Cypress before running E2E tests. This needs to be done one once using the following commands:

cd e2e && npm install && cd ..

The first time you run the tests, you also need to install cypress dependencies:

npm install

Since end to end tests need to run Electron-Explorer outside of Electron, a special build needs to be created that stubs some Electron APIs. To create this build, simply type:

npm run build

This will create a new Electron-Explorer in the build-e2e directory.

You may also type npm run watch if you want to rebuild automatically the e2e build after a change has been detected inside the sources.

For React-Explorer to run without Electron, a local webserver needs to be started before running the tests:

npm run server

Now, simply type: npm run cypress:run or npm run cypress:open.

How to develop a new Plugin

React-Explorer has been written so that it can easily be extended using plugins.

As a starting point you may use the FsGeneric skeleton.

Acknowledgments

React-Explorer makes use of the following tools/components:

• React
• Electron
• TypeScript
• MobX
• Blueprintjs
• basic-ftp
• i18next & react-i18n

Licence

React-Explorer is licenced under the MIT licence.