🧩 Plasmo Developers•10mo ago

Plasmo setup with NX console

Hello everyone, I'm trying to create an extension app inside my nx monorepo and really would love to use plasmo. I've managed to figure out how to define custom src and build paths, but I still have to create the assets folder and the tsconfig in the root. Is there a way to define their paths as well?

13 Replies

batman12340OP•10mo ago

batman12340OP•10mo ago

Amix•3mo ago

Hello @batman12340 I am trying to do the same thing have you had any success? can you tell me how you defined custom src and build paths?

batman12340OP•3mo ago

Hello @Amix You can use the --build-path= & --src-path= & --env= to define custom paths for the following. You'll still need to create a seperate tsconfig where you specify the exact path of your files. Also assests folder will also have to remain in the root of your project where the tsconfig is specified. Hope this helps, it was pretty tedious to make this work in NX and especially setting up a proper project structure. Here is an a snipt of my project.json as well. Hope it helps and if you have any improvement suggesstions, please do share with me as well.

{
  "name": "spark-extension",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/spark-extension/src",
  "projectType": "application",
  "targets": {
    "build": {
      "cache": false,
      "defaultConfiguration": "production",
      "command": "plasmo build",
      "configurations": {
        "local": {
          "command": "node scripts/delete-files.js chrome-mv3-prod && plasmo build --build-path=dist/apps/spark-extension --src-path=apps/spark-extension/src --env=apps/spark-extension/.env.development"
        },
        "market-place": {
          "command": "node scripts/delete-files.js chrome-mv3-prod && plasmo build --build-path=dist/apps/spark-extension --src-path=apps/spark-extension/src --env=apps/spark-extension/.env.production && node scripts/extension-marketplace-build.js"
        }
      }
    },
    "serve": {
      "command": "plasmo dev",
      "defaultConfiguration": "local",
      "configurations": {
        "local-verbose": {
          "command": "plasmo dev --verbose --build-path=dist/apps/spark-extension --src-path=apps/spark-extension/src --env=apps/spark-extension/.env.local"
        }
      }
    }
  },
  "tags": []
}

{
  "name": "spark-extension",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/spark-extension/src",
  "projectType": "application",
  "targets": {
    "build": {
      "cache": false,
      "defaultConfiguration": "production",
      "command": "plasmo build",
      "configurations": {
        "local": {
          "command": "node scripts/delete-files.js chrome-mv3-prod && plasmo build --build-path=dist/apps/spark-extension --src-path=apps/spark-extension/src --env=apps/spark-extension/.env.development"
        },
        "market-place": {
          "command": "node scripts/delete-files.js chrome-mv3-prod && plasmo build --build-path=dist/apps/spark-extension --src-path=apps/spark-extension/src --env=apps/spark-extension/.env.production && node scripts/extension-marketplace-build.js"
        }
      }
    },
    "serve": {
      "command": "plasmo dev",
      "defaultConfiguration": "local",
      "configurations": {
        "local-verbose": {
          "command": "plasmo dev --verbose --build-path=dist/apps/spark-extension --src-path=apps/spark-extension/src --env=apps/spark-extension/.env.local"
        }
      }
    }
  },
  "tags": []
}

Amix•3mo ago

Thanks mate

JoeLeo•3mo ago

Hey @batman12340 could you please share a bit more detail on how you configure your tsconfigs on both spark-extension and root folder as well as package.json in spark-extension specifically how you get nx to build the manifest overwrite in the file? Thanks

YAGPDB.xyz•3mo ago

Gave +1 Rep to @batman12340 (current: #32 - 1)

batman12340OP•2mo ago

Hey @JoeLeo sure So basically let's start with the root. - tsconfig So basically t make this work we need a seperate toconfig for plasmo. This one needs to disculde everything expect the files relate to plasmo. So as you can see below, you can configure it to inlcude your nx libs as well which is pretty neat. tsconfig.json - the one used to build plasmo

{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": [
    "tmp",
    "node_modules",
    "dist",
    "migrations",
    ".dockerignore",
    "tsconfig.base.json",
    ... // all apps except plasmo one
  ],
  "include": [
    ".plasmo/index.d.ts",
    "./apps/spark-extension/**/*.ts",
    "./apps/spark-extension/**/*.tsx",
    "./libs/**/*.ts",
    "./libs/**/*.tsx",
  ],
  "compileOnSave": false,
  "compilerOptions": {
    "paths": {
     },
    "baseUrl": "./",
    "rootDir": "./",
    "verbatimModuleSyntax": false,
  },
}

{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": [
    "tmp",
    "node_modules",
    "dist",
    "migrations",
    ".dockerignore",
    "tsconfig.base.json",
    ... // all apps except plasmo one
  ],
  "include": [
    ".plasmo/index.d.ts",
    "./apps/spark-extension/**/*.ts",
    "./apps/spark-extension/**/*.tsx",
    "./libs/**/*.ts",
    "./libs/**/*.tsx",
  ],
  "compileOnSave": false,
  "compilerOptions": {
    "paths": {
     },
    "baseUrl": "./",
    "rootDir": "./",
    "verbatimModuleSyntax": false,
  },
}

With this you're all set, no need to make changes in the base config. - paackage.json Inside here is where you put all you're stuff related to the extnsion -- displayName Required, and is from here where the extension name is set for the extension -- manifest Everything you need to add/override in the manifest can be found here. --- key So first is the key, now this is only used for development. For Iframes, you need to know the extension ID to be able to connect to the extension. And the only way to keep the ID persistent when installing extensions is to have the KEY inside the manifest. For market place production, google automatically adds the key so no need for it. Just save the ID in the production env. --- host_permissions I believe this was requied to tell which API endpoints were accessable to the extension backkground service. --- externally_connectable: [matches] used to tell which websites could use the url to connect to the extension

batman12340OP•2mo ago

no inside the spark-extension folder, you don't need to specify any tsconfig. This was my project structure for reference if it helps. Now the last thing is the project.json. Now I had the nx console extension which was a life saver, i couldn't remeber the commands for the life of me. The project.json file, I've already shared in the thread above, you can have a look at it, and it should show up like in the pic shared. That's all i think feel free to ask any qustions or critique my process/structure. Hope this helps.

Arcane•2mo ago

@batman12340 has reached level 2. GG!

JoeLeo•2mo ago

@batman12340 , thanks a lot! First of all, since I didn't see a package.json in your extension app folder, I moved it to the root, and everything seems to be working very nicely. However, I don't get the same hot reloading effect as when developing in a standalone Plasmo dev environment. Do you have any insights on whether this could be due to my tsconfig setup?

YAGPDB.xyz•2mo ago

Gave +1 Rep to @batman12340 (current: #17 - 2)

JoeLeo•2mo ago

Gaming

Programming

Plasmo setup with NX console