microsoft / azure-devops-extension-hot-reload-and-debug Goto Github PK

I am trying to run azure-devops-extension-hot-reload-and-debug hub extension but It seems all css files are not loaded properly.
Any configuration is missed in the "webpack.config.js" file?

Here is the screenshot of my extension. button not loaded with default css.

Hi!
I try to create new extension base on this repo.
My problem is during 'npm install'.
I have a problem with sass.
When I change version on: 7.0.1 I have another problems.
Has anybody tried to create azure-devops-extension (in the last few months) based on this repo?

As the title.

Hello!

I've just happened upon this repo (guided by this post) and I was wondering if there was any reason that the dependencies seem quite old?

TypeScript is up to version 4.2 - is there any reason we need to stick with an older version?

When I run yo @microsoft/azure-devops-extension it fails with the following error:

AssertionError [ERR_ASSERTION]: Trying to copy from a source that does not exist: C:\Users\johndoe\AppData\Roaming\npm\node_modules\@microsoft\generator-azure-devops-extension\app\templates\.gitignore

After creating manually a .gitignore file in the C:\Users\johndoe\AppData\Roaming\npm\node_modules@microsoft\generator-azure-devops-extension\app\templates folder I could create the scaffolding for the Extension.

Stefan [msft]

The default contribution has a target of ms.vss-web.project-hub-groups-collection and type ms.vss-web.hub-group.

I'm trying to figure out where this contribution is actually made.

In old UI, it looks like it should show up here:

But in the new UI, I don't see an equivalent hub:

Looking at the extensibility points, I don't see the type or target listed there. Since the UI has changed, has this hub group been removed? Should this template be using a different hub as an example? Or am I missing something?

I have noticed that after I released my extension, the icons are not appearing as demonstrated in the attached image. However, when I am debugging the application, everything appears to be functioning correctly.

Hi there,

After downloading this project and testing it in an environment of mine, I noticed that the icons are not loading properly. Does anyone have a tip?

The error code in the console:

1. Failed to decode downloaded font: https://{name}.gallery.vsassets.io/dist/acb0b44d710a15f95219.woff

2. OTS parsing error: invalid sfntVersion: 218762506

Fonts not loading after upgrading package versions:

package.json (updated dependencies

"dependencies": {
    "azure-devops-extension-api": "^1.158.0",
    "azure-devops-extension-sdk": "^2.0.11",
    "azure-devops-ui": "^2.167.46"
  },
  "devDependencies": {
    "@types/react": "~16.8.2",
    "@types/react-dom": "~16.8.0",
    "@typescript-eslint/eslint-plugin": "^5.18.0",
    "@typescript-eslint/parser": "^5.18.0",
    "base64-inline-loader": "^2.0.1",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.1",
    "eslint": "^8.12.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "file-loader": "^6.2.0",
    "node-sass": "^7.0.3",
    "prettier": "^2.6.2",
    "react": "~16.13.1",
    "react-dom": "~16.13.1",
    "rimraf": "^3.0.2",
    "sass-loader": "^13.0.2",
    "style-loader": "^3.3.1",
    "tfx-cli": "^0.12.0",
    "ts-loader": "^9.2.8",
    "typescript": "^4.6.3",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^3.11.2"
  }

webpack.config.json (only updated the breaking changes to CopyWebpackPlugin)

const path = require("path");
const fs = require("fs");
const CopyWebpackPlugin = require("copy-webpack-plugin");

const entries = {};
const srcDir = path.join(__dirname, "src");
fs.readdirSync(srcDir)
  .filter(dir => fs.statSync(path.join(srcDir, dir)).isDirectory())
  .forEach(dir => (entries[dir] = "./" + path.join("src", dir, dir)));

module.exports = {
  target: "web",
  entry: entries,
  output: {
    filename: "[name]/[name].js",
    publicPath: "/dist/",
  },
  devtool: "inline-source-map",
  devServer: {
    https: true,
    port: 3000,
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
    alias: {
      "azure-devops-extension-sdk": path.resolve(
        "node_modules/azure-devops-extension-sdk"
      )
    }
  },
  stats: {
    warnings: false
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader"
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          "css-loader",
          "azure-devops-ui/buildScripts/css-variables-loader",
          "sass-loader"
        ]
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.woff$/,
        use: [
          {
            loader: "base64-inline-loader"
          }
        ]
      },
      {
        test: /\.html$/,
        use: "file-loader"
      }
    ]
  },
  plugins: [
    new CopyWebpackPlugin({
      //[{ from: "**/*.html", context: "src" }])
      patterns: [
        {
          from: "**/*.html",
          context: "src",
        }
      ]
    }),
  ]
};

This repo/template should include the launch.json to avoid that extra step.

There are important files that Microsoft projects should all have that are not present in this repository. A pull request has been opened to add the missing file(s). When the pr is merged this issue will be closed automatically.

Microsoft teams can learn more about this effort and share feedback within the open source guidance available internally.

Merge this pull request

After I run the server and use F5 on my VS code, which launches Firefox, the page fails to load. It says error 404: cannot GET /
Tried https://localhost:3000/dist and http://localhost:3000/
Is there a solution to this?
My Firefox page looks like this:

Doesn't work with latest React v 18. Kindly update the packages

After updating package versions, the CopyWebpackPlugin fails.

Updating from the suggested:

plugins: [new CopyWebpackPlugin([{ from: "**/*.html", context: "src" }])]

To:

plugins: [new CopyWebpackPlugin({ patterns: [{ from: "**/*.html", context: "src" }] })]

seems to have fixed the problem.

Hi,

I got stuck here. Did the package restore already and everything was fine. I'm on changeset fe5a338

I'm not a node or JS guy so any guidance on this is much appreciated.

I am new to this, and have followed the steps. The debugging session starts fine, but if I try to add break points in my tsx file, it shows "Unverified Breakpoint" and the breakpoints are not hit.

The .vscode folder and launch.json are at the root, and I have a src folder inside it which had the code files.
Folder structure:

webpack.config.js:

launch.json is exactly as mentioned:
{ "version": "0.2.0", "configurations": [ { "name": "Launch Firefox", "type": "firefox", "request": "launch", "url": "https://localhost:3000/", "reAttach": true, "pathMappings": [ { "url": "webpack:///", "path": "${workspaceFolder}/" } ] } ] }

Any hep will be appreciated.

Hi,

I got this error when trying to debug:

Anyone knows any workaround?
thanks.

I tried going down the route of using yo for scaffolding the project, and it uses an old template with 2 yo dependencies in package.json.
Here is a glimpse of npm outdated

When deploying my extension to production, icons from the azure-devops-ui library are not displaying. This issue does not occur in my development environment. In the browser console, I'm greeted with a 404 error pointing to:

https://[user].gallerycdn.vsassets.io/dist/[fileName].woff

However, accessing the resource directly via:

https://[user].gallerycdn.vsassets.io/extensions/[user]/[extensionName]/[Version]/[SomeNumber]/dist/[fileNmae].woff

shows that the file does indeed exist.

I'm using:
azure-devops-ui version: 2.167.75
Webpack version: 5.88.1