Minimal setup - code editor only (no navigator and other features)

Hi,
How do I set up the most minimal theia browser app?
I followed the instructions here and they work great, however, I am looking for something even more minimal as a start, to get a sense of the building blocks and how they fit together. For instance, I don’t want the theia navigator at all as a start, only the code editor. Is that even possible?
I tried with the following package.json:

{
    "private": true,
    "dependencies": {
        "@theia/core": "latest",
        "@theia/monaco": "latest"
    },
    "devDependencies": {
        "@theia/cli": "latest"
    },
    "scripts": {
        "prepare": "yarn run clean && yarn build",
        "clean": "theia clean",
        "build": "theia build --mode development",
        "start": "theia start"
    }
}

But this fails, and it seems that when I look at src-gen/frontend/index.js it still has these lines:

module.exports = Promise.resolve()
    .then(function () { return import('@theia/core/lib/browser/menu/browser-menu-module').then(load) })
    .then(function () { return import('@theia/core/lib/browser/window/browser-window-module').then(load) })
    .then(function () { return import('@theia/core/lib/browser/keyboard/browser-keyboard-module').then(load) })
    .then(function () { return import('@theia/variable-resolver/lib/browser/variable-resolver-frontend-module').then(load) })
    .then(function () { return import('@theia/editor/lib/browser/editor-frontend-module').then(load) })
    .then(function () { return import('@theia/filesystem/lib/browser/filesystem-frontend-module').then(load) })
    .then(function () { return import('@theia/filesystem/lib/browser/download/file-download-frontend-module').then(load) })
    .then(function () { return import('@theia/filesystem/lib/browser/file-dialog/file-dialog-module').then(load) })
    .then(function () { return import('@theia/workspace/lib/browser/workspace-frontend-module').then(load) })
    .then(function () { return import('@theia/navigator/lib/browser/navigator-frontend-module').then(load) })
    .then(function () { return import('@theia/markers/lib/browser/problem/problem-frontend-module').then(load) })
    .then(function () { return import('@theia/outline-view/lib/browser/outline-view-frontend-module').then(load) })
    .then(function () { return import('@theia/monaco/lib/browser/monaco-browser-module').then(load) })
    .then(start).catch(reason => {
        console.error('Failed to start the frontend application.');
        if (reason) {
            console.error(reason);
        }
    });

Any help or a more in-depth getting started tutorial will be very appreciated.

Thanks!

@tomenden thank you for the discussion, it is sometimes difficult to have such minimal applications since there may be contributes which are pulled due to coupling, for example:

{
  "private": true,
  "theia": {
    "frontend": {
      "config": {
        "applicationName": "Theia Minimal Example",
        "preferences": {
          "files.enableTrash": false
        }
      }
    }
  },
  "dependencies": {
    "@theia/core": "latest",
    "@theia/editor": "latest",
    "@theia/file-search": "latest",
    "@theia/messages": "latest",
    "@theia/monaco": "latest",
    "@theia/preferences": "latest",
    "@theia/terminal": "latest"
  },
  "devDependencies": {
    "@theia/cli": "latest"
  }
}

The @theia/monaco extension actually pulls the @theia/navigator:

$ yarn why @theia/navigator
yarn why v1.22.4
[1/4] Why do we have the module "@theia/navigator"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "@theia/navigator@1.14.0"
info Reasons this module exists
   - "@theia#monaco#@theia#markers" depends on it
   - Hoisted from "@theia#monaco#@theia#markers#@theia#navigator"
info Disk size without dependencies: "624KB"
info Disk size with unique dependencies: "16.65MB"
info Disk size with transitive dependencies: "68.16MB"
info Number of shared dependencies: 125
Done in 0.93s.

For such use-cases, you can implement a custom extension which will control which contributions you’d like to remove as part of your application.

I have an example below which removes the navigator and outline-view contributions:

In the end we get a minimal application (you can follow the same idea to remove other contributions for your use-case). Please note new APIs are planned to be added which may make removing unwanted contributions easier.

@vince-fugnitto Thank you very much for your reply!
I will look into your suggestion and your theia-minimal repo, it sounds like what I was looking for :slight_smile:

In general, the current setup of using @theia/cli feels like a bit too much “magic” to me. For instance, I will also be interested in customizing the backend, and it wasn’t completely clear to me how I achieve that.
Ideally, I would love to be able to write my own frontend application JS file (as opposed to it being generated) and my own backend files as well.
Will resume my experimentation with theia this week and write further questions here as they come along.

Thanks again :heart: