npm run start:web not working

[lukchen]

OS: Windows 10 Browser: Chrome Platform: Excel

Hi, I followed this instruction https://docs.microsoft.com/en-us/office/dev/add-ins/testing/sideload-office-add-ins-for-testing#sideload-an-office-add-in-in-office-on-the-web to sideload my Excel Add-in in Office on the web.

I use latest Yeoman generated my TaskPane addin project, add I added my Excel document sharing URL to package.json:

"scripts": { "document": "https://xxxxxxxxxNtjhjC7qWxxxxxxxp6r5XyKcpvQ?e=knEiVs", "build": "webpack -p --mode production --https false", "build:dev": "webpack --mode development --https false", "build:test": "webpack --mode development --https false --config ./test/webpack.config.js", "build-dev": "webpack --mode development --https false && echo . && echo . && echo . && echo Please use 'build:dev' instead of 'build-dev'.", "convert-to-single-host": "node convertToSingleHost.js", "dev-server": "webpack-dev-server --mode development", "lint": "office-addin-lint check", "lint:fix": "office-addin-lint fix", "prettier": "office-addin-lint prettier", "start": "office-addin-debugging start manifest.xml", "start:desktop": "office-addin-debugging start manifest.xml desktop", "start:web": "office-addin-debugging start manifest.xml web", "stop": "office-addin-debugging stop manifest.xml", "test": "mocha -r ts-node/register test/*.ts", "validate": "office-addin-manifest validate manifest.xml", "watch": "webpack --mode development --watch" },

But when I run 'npm run start:web', the Addin does not sideloaded in my Excel document on web

[nrueckmann]

Same here. Dev server seems to run fine, but side loading fails with no useful information.

Output:

MYPATH>npm run start:web

> office-addin-taskpane-js@0.0.1 start:web MYPATH
> office-addin-debugging start manifest.xml web

Debugging is being started...
App type: web
Starting the dev server... (webpack-dev-server --mode development)
The dev server is running on port 3000. Process id: 4216
Sideloading the Office Add-in...
Error: Unable to start debugging.
Error: Unable to sideload the Office Add-in.
Error: For sideload to web, you need to specify a document url.

[TCourtneyOwen]

I just tried this scenario out and it works fine for me. My config section of package.json looks like the following:

"config": { "app_to_debug": "excel", "app_type_to_debug": "web", "dev_server_port": 3000, "document": "https://" }

I suspect this may be related to the version of the "office-addin-debugging" package installed for your project. I am running v.4.1.5. If you aren't running that version, please try updating package.json to to this version, run npm install and then try npm run start:web again.

Thanks,

Courtney

[akrantz]

The last line explains the problem. You need to specify a document url when sideloading to the web

npm run start:web --document https://...

[TCourtneyOwen]

Or you can just add the "document" property to the config section for package.json. At least that works for me without making any change to the start:web script

[nrueckmann]

Created a PR to fix the documentation about document: https://github.com/OfficeDev/office-js-docs-pr/pull/2621

[lukchen]

So I have updated my "office-addin-debugging" package to v4.1.5 and changed "app-type-to-debug" to 'web' (Thanks to Courtney's comment), and also moved document property to config. Now if I run npm run start:web, it will automatically open the Excel file in browser, but the addin still not get sideloaded

[lukchen]

This is my package.json file:

{ "name": "office-addin-taskpane-js", "version": "0.0.1", "repository": { "type": "git", "url": "https://github.com/OfficeDev/Office-Addin-TaskPane-JS.git" }, "license": "MIT", "config": { "app-to-debug": "excel", "app-type-to-debug": "web", "dev-server-port": 3000, "document": "https://xxxxxxp2UCuRGrxxruuCxxL2ik_xxx?e=MsXAL5" }, "scripts": { "build": "webpack -p --mode production --https false", "build:dev": "webpack --mode development --https false", "build:test": "webpack --mode development --https false --config ./test/webpack.config.js", "build-dev": "webpack --mode development --https false && echo . && echo . && echo . && echo Please use 'build:dev' instead of 'build-dev'.", "convert-to-single-host": "node convertToSingleHost.js", "dev-server": "webpack-dev-server --mode development", "lint": "office-addin-lint check", "lint:fix": "office-addin-lint fix", "prettier": "office-addin-lint prettier", "start": "office-addin-debugging start manifest.xml", "start:desktop": "office-addin-debugging start manifest.xml desktop", "start:web": "office-addin-debugging start manifest.xml web", "stop": "office-addin-debugging stop manifest.xml", "test": "mocha -r ts-node/register test/*.ts", "validate": "office-addin-manifest validate manifest.xml", "watch": "webpack --mode development --watch" }, "dependencies": {}, "devDependencies": { "@babel/core": "^7.11.6", "@babel/polyfill": "^7.11.5", "@babel/preset-env": "^7.11.5", "@types/find-process": "1.2.0", "@types/mocha": "^7.0.2", "@types/node": "^14.0.13", "@types/office-js": "^1.0.108", "@types/office-runtime": "^1.0.14", "babel-loader": "^8.1.0", "clean-webpack-plugin": "^3.0.0", "copy-webpack-plugin": "^6.1.1", "eslint-config-office-addins": "^1.0.19", "find-process": "^1.4.3", "file-loader": "^4.2.0", "html-loader": "^0.5.5", "html-webpack-plugin": "^4.5.0", "mocha": "^8.1.3", "office-addin-cli": "^1.1.1", "office-addin-debugging": "^4.1.5", "office-addin-dev-certs": "^1.5.5", "office-addin-lint": "^1.0.26", "office-addin-manifest": "1.5.7", "office-addin-prettier-config": "^1.0.12", "office-addin-test-helpers": "^1.0.27", "office-addin-test-server": "^1.0.30", "source-map-loader": "^0.2.4", "ts-loader": "^6.2.2", "ts-node": "^8.10.2", "typescript": "^4.0.3", "webpack": "^4.43.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.0" }, "prettier": "office-addin-prettier-config" }

[lukchen]

And command output: PS D:\sideloadtest> npm run start:web

office-addin-taskpane-js@0.0.1 start:web D:\sideloadtest office-addin-debugging start manifest.xml web

Debugging is being started... App type: web Starting the dev server... (webpack-dev-server --mode development) The dev server is running on port 3000. Process id: 5448 Sideloading the Office Add-in... Debugging started.

[LouMM]

We will attempt to use your json file to sideload and report back.

[lukchen]

We will attempt to use your json file to sideload and report back.

Hi, any updates on this issue?

[igor-ribeiiro]

@lukchen sorry for the delay, I kind got distracted with some other work. I will attempt to test this and assist you on Monday morning.

[igor-ribeiiro]

I tried following the tutorial in the URL you send to me and it sideload the add-in and worked as expected. I also tried using your package.json that you've sent and the project doesn't even build for me, with the error:

ERROR in multi core-js/stable regenerator-runtime/runtime
My Office Add-in'
 @ multi core-js/stable regenerator-runtime/runtime polyfill[0]

Could you please try again to sideload the add-in with the tutorial you've sent? There are a few packages versions differences between you package.json and the one download with yo office and I think these could be creating the issue you're facing.

[lukchen]

I tried following the tutorial in the URL you send to me and it sideload the add-in and worked as expected. I also tried using your package.json that you've sent and the project doesn't even build for me, with the error:

ERROR in multi core-js/stable regenerator-runtime/runtime
My Office Add-in'
 @ multi core-js/stable regenerator-runtime/runtime polyfill[0]

Could you please try again to sideload the add-in with the tutorial you've sent? There are a few packages versions differences between you package.json and the one download with yo office and I think these could be creating the issue you're facing.

Ok, I can try again and get back

[lukchen]

Hi @igor-ribeiiro I have created a new fresh Excel Taskpane project using yo office, but still cannot sideload it on Excel on web, I attached a video to show it: https://user-images.githubusercontent.com/26646767/116947793-a4107a00-ac4b-11eb-8d20-a87255c9611f.mp4

My yo version is @3.1.1 and generator-office is @1.7.9.

This is my package.json, I didnt modify anything after project creation except document url: { "name": "office-addin-taskpane-js", "version": "0.0.1", "repository": { "type": "git", "url": "https://github.com/OfficeDev/Office-Addin-TaskPane-JS.git" }, "license": "MIT", "config": { "document": "https://mathworks-my.sharepoint.com/:x:/p/elichen/Ed3bfIo6GgxOqYypNAx6fFEB-BPboCULecAQJPIHrOTFKw?e=OSnvjd", "app_to_debug": "excel", "app_type_to_debug": "desktop", "dev_server_port": 3000, "app-to-debug": "excel" }, "scripts": { "build": "webpack -p --mode production --https false", "build:dev": "webpack --mode development --https false", "build-dev": "webpack --mode development --https false && echo . && echo . && echo . && echo Please use 'build:dev' instead of 'build-dev'.", "dev-server": "webpack-dev-server --mode development", "lint": "office-addin-lint check", "lint:fix": "office-addin-lint fix", "prettier": "office-addin-lint prettier", "start": "office-addin-debugging start manifest.xml", "start:desktop": "office-addin-debugging start manifest.xml desktop", "start:web": "office-addin-debugging start manifest.xml web", "stop": "office-addin-debugging stop manifest.xml", "validate": "office-addin-manifest validate manifest.xml", "watch": "webpack --mode development --watch" }, "dependencies": { "core-js": "^3.9.1", "regenerator-runtime": "^0.13.7" }, "devDependencies": { "@babel/core": "^7.13.10", "@babel/preset-env": "^7.12.11", "@babel/preset-typescript": "^7.13.0", "@types/find-process": "1.2.0", "@types/office-js": "^1.0.160", "@types/office-runtime": "^1.0.17", "babel-loader": "^8.2.2", "clean-webpack-plugin": "^3.0.0", "copy-webpack-plugin": "^6.4.1", "eslint-config-office-addins": "^1.0.22", "file-loader": "^4.2.0", "find-process": "^1.4.4", "html-loader": "^0.5.5", "html-webpack-plugin": "^4.5.1", "office-addin-cli": "^1.0.17", "office-addin-debugging": "^4.0.3", "office-addin-dev-certs": "^1.5.12", "office-addin-lint": "^1.1.4", "office-addin-manifest": "^1.5.16", "office-addin-prettier-config": "^1.0.14", "source-map-loader": "^0.2.4", "ts-loader": "^6.2.2", "typescript": "^4.1.3", "webpack": "^4.46.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.2" }, "prettier": "office-addin-prettier-config" }

[lukchen]

This is my Office version:

[igor-ribeiiro]

Hi @lukchen, I still cannot reproduce your error while using an Office 365 account.

Given that the URL you are using has a my.sharepoint part, I know you created the file using your O365 account (which is correct), could you please check on your profile in the excel page that opened that you are in the correct account?

I will be still investigating this issue in this meantime.

[igor-ribeiiro]

@lukchen I think I found the problem and I think is that we do not support Chrome right now: https://docs.microsoft.com/en-us/office/dev/add-ins/concepts/browsers-used-by-office-web-add-ins.

I was testing using Edge until now. Could you test sideloading you add-in in Edge to see if that's the problem? Thanks for you patience while we are trying to solve this issue.

[akrantz]

To be clear, Office Online is supported in Chrome.

It would be good to know if it makes a difference which browser is being used.

[lukchen]

@lukchen I think I found the problem and I think is that we do not support Chrome right now: https://docs.microsoft.com/en-us/office/dev/add-ins/concepts/browsers-used-by-office-web-add-ins.

I was testing using Edge until now. Could you test sideloading you add-in in Edge to see if that's the problem? Thanks for you patience while we are trying to solve this issue.

Thanks, I tried setting Edge as my default browser and and it worked in Edge: the TaskPane AddIn get registered. But one question remain: the TaskPane is not automatically opened at first time, I have to manually click the Ribbon button to open it. Is this expected behaviour? If so the term 'sideload' might be little bit confusing here since the 'npm start' or 'npm run start:web' doesn't really automatically 'sideload' the TaskPane automatically

[lukchen]

And accroding to that page above, it should be working in Chrome:

[igor-ribeiiro]

@lukchen I think I found the problem and I think is that we do not support Chrome right now: https://docs.microsoft.com/en-us/office/dev/add-ins/concepts/browsers-used-by-office-web-add-ins. I was testing using Edge until now. Could you test sideloading you add-in in Edge to see if that's the problem? Thanks for you patience while we are trying to solve this issue.

Thanks, I tried setting Edge as my default browser and and it worked in Edge: the TaskPane AddIn get registered. But one question remain: the TaskPane is not automatically opened at first time, I have to manually click the Ribbon button to open it. Is this expected behaviour? If so the term 'sideload' might be little bit confusing here since the 'npm start' or 'npm run start:web' doesn't really automatically 'sideload' the TaskPane automatically

It is the expect behavior, it does automatically sideload the add-in (you can see the button to open it), it just does not automatically load it

[igor-ribeiiro]

And accroding to that page above, it should be working in Chrome:

I thinks this is just a misunderstanding here. What you are using is the Office 365, not Office online. I found the following page with more information about the differences between both: https://www.pcworld.com/article/2872072/office-online-vs-office-365-what-s-free-what-s-not-and-what-you-really-need.html. So, unfortunately we are not supporting Chrome.

I will be closing this issue for now, but feel free to reopen if any problem may arrise.

[millerds]

As far as what "sideloading" means . . . getting the button that opens the taskpane is the sideloading. If we weren't sideloading it for you, then you would have to open the add-in dialog and use it to go find the manifest file and load it into the host (Excel in this case) and then the button would show up that would allow you to open the task pane. It's the adding of the manifest file that is the loading we are referring to.

[akrantz]

@igor-ribeiiro start:web is to use the web browser, not Office desktop apps.

I was able to do this successfully with Chrome as my default browser.

I ran: npm run start:web -- --document <document-url>. I got the document url by using the share button on the document and then copying the link/

It launched Chrome, and after getting the dialogs asking for permission, it installed the add-in. I can see the button for it in the ribbon.

Please note that it does not mean the task pane will be opened automatically. That logic depends on how the add-in is configured. If the add-in manifest specifies a button, it won't open the task pane automatically.