5ad8106e3f
Summary: When using baseUrl in site config, it adds a prefix to all link paths. But for assets, it doesn't work if you refer to them as `docs/assets/...`, you have to use just `assets/...`. Source: https://github.com/facebook/Docusaurus/issues/861 Reviewed By: passy Differential Revision: D20796933 fbshipit-source-id: 2346e42b8b548f576a1e143f56ee5236eab55073
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/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.
|