Run Camellia in Development Mode - camellia-app/camellia GitHub Wiki

To start developing Camellia locally, you should build it manually from source code and install it as temporary extension in your browser.

To do so:

1. Create a fork of the repository if you wish to open PRs.

2. Clone the repository.

3. Install dependencies:

   npm ci

4. Now you need to compile an app. To compile it, you should decide which extension platform you want to build it for. Platform should be specified in TARGET_PLATFORM variable:

   • In most cases you will want to use web platform, because it supports debugging with external browser extensions. It will just start Camellia using webpack DevServer, it will be just like any other website, it won't be browser extension.
   • If you want to run Camellia as Mozilla Firefox extension, the value will be webext.
   • If you want to run Camellia as extension for any other browser e.g. Google Chrome, use chromium value.
   • Safari currently is not supported. See issue #497.

   To build an extension, you may start webpack in watch mode:

   TARGET_PLATFORM=web npm start

   The app will be compiled into ./dist/{target-platform} folder.

5. To learn how to install the extension into your browser, visit official docs:

   • Google Chrome
   • Mozilla Firefox

   In all cases you will be asked for path to the ./dist/{target-platform} directory or to the ./dist/{target-platform}/manifest.json file.

Currently, if you build Camellia as extension and running webpack watch mode, it won't refresh your extension, you should do it manually. For example, if you modify some .tsx or .css files, you will be required to press F5 key or something like that to refresh the page.

In some cases just refreshing the page may not be enough. For example, if ./dist/{target-platform}/manifest.json file will be modified, you won't see changes until you reload the extension manually in your browser's settings. Manual extension reloading is required in case of changing following files:

• ./dist/{target-platform}/manifest.json file.
• icons specified in manifest file.
• translation files.

Browser extension pages are treated specially in browsers, that's why other extensions may not work in their context. For example, if you try to debug Camellia with React Developer Tools extension, you will face such message:

This is a restricted browser page. React devtools cannot access this page.

The same problem exists with Redux DevTools and other extensions for development. It's sad because you can't run such extensions in the context of other extension pages.

You can use standalone version of react-devtools, which is basically Electron app running in separate window, but it lacks some features like highlighting rerenders.

It's recommended to develop Camellia using TARGET_PLATFORM=web and webpack DevServer. Then you will be able to use all your favourite extensions for debugging purposes.