85c13bb1f3
Summary: Pull Request resolved: https://github.com/facebook/flipper/pull/872 Move all the JS code related to desktop app to "desktop" subfolder. The structure of "desktop" folder: - `src` - JS code of Flipper desktop app executing in Electron Renderer (Chrome) process. This folder also contains all the Flipper plugins in subfolder "src/plugins". - `static` - JS code of Flipper desktop app bootstrapping executing in Electron Main (Node.js) process - `pkg` - Flipper packaging lib and CLI tool - `doctor` - Flipper diagnostics lib and CLI tool - `scripts` - Build scripts for Flipper desktop app - `headless` - Headless version of Flipper app - `headless-tests` - Integration tests running agains Flipper headless version Reviewed By: passy Differential Revision: D20249304 fbshipit-source-id: 9a51c63b51b92b758a02fc8ebf7d3d116770efe9
65 lines
1.9 KiB
Markdown
65 lines
1.9 KiB
Markdown
---
|
|
id: js-setup
|
|
title: Building a Flipper desktop plugin
|
|
sidebar_label: Building a desktop plugin
|
|
---
|
|
|
|
Now that we have the native side covered, let's display the data we're sending
|
|
on the desktop side.
|
|
|
|
|
|
|
|
## Dynamic Plugin loading
|
|
|
|
By default, Flipper will start with the plugins it was bundled with. You can
|
|
configure it to also look for plugins in custom directories. To do that,
|
|
modify the `~/.flipper/config.json` file that is created the first time
|
|
you start Flipper and add a newly created directory the `pluginPaths` attribute.
|
|
|
|
Your file will then look something like this:
|
|
|
|
```json
|
|
{
|
|
"pluginPaths": [
|
|
"~/Flipper/custom-plugins/"
|
|
],
|
|
...
|
|
}
|
|
```
|
|
|
|
## Creating the Plugin Package
|
|
|
|
With the loading part out of the way, we can create the new plugin. For that, first
|
|
create a new folder inside the custom plugins directory. Then use `yarn init` (`npm init` if that's more your style)
|
|
to initialise a new JavaScript package:
|
|
|
|
```bash
|
|
$ cd ~/Flipper/custom-plugins/
|
|
$ mkdir sea-mammals
|
|
$ cd sea-mammals
|
|
$ yarn init
|
|
```
|
|
|
|
When choosing the package name, remember to use the name we have specified on the native side as ID.
|
|
In our case, that is "sea-mammals". Once done, open the `package.json`. In addition to the name,
|
|
you can also specify a title to show in the Flipper sidebar and an icon to display here. For instance:
|
|
|
|
```json
|
|
{
|
|
"name": "sea-mammals",
|
|
"version": "1.0.0",
|
|
"main": "index.tsx",
|
|
"license": "MIT",
|
|
"keywords": ["flipper-plugin"],
|
|
"icon": "apps",
|
|
"title": "Sea Mammals",
|
|
"category": "Example Plugin",
|
|
"dependencies": {
|
|
"flipper": "latest"
|
|
}
|
|
}
|
|
```
|
|
*See [package.json](https://github.com/facebook/flipper/blob/master/desktop/src/plugins/seamammals/package.json)*
|
|
|
|
Now that our package has been set up, we are ready to build a UI for our plugin. Either by using a standardized table-based plugin, or by creating a custom UI.
|