Add-in error Sorry. we can't load the add-in. Please make sure you have network and/or Internet connectivity. Click "Retry" once you're back online

user_5524234 0
Viewed 469

I am developing an Excel JS TypeScript React addin with VS code. I deployed my add-in to Azure and it worked fine. Now I wanted to start a localhost for development purposes but all of a sudden I got this message: enter image description here

I am posting this question, so clearly there is no issue with my internet connection. Furthermore I tried to surf to the https://localhost:3000 URL and it gave me a blank page with this text:

Cannot GET /

I tried to use the Yeoman Generator to create an empty project because I thought I maybe messed up the webpack.config.js file or the manifest but installing the boilerplate React TypeScript Excel add-in did not get me anywhere neither because even the npm install command did not succeed. I have no idea how to tackle this. many thanks in advance.

office-addins office-js typescript reactjs excel
2 Answers

Most likely something is preventing access to the URL. It can be local firewall software, VPN software, proxy configuration or Metered Connection setting.

Be aware, to run web add-ins you need to generate and install a valid certificate to use https. Office Add-ins should use HTTPS (not HTTP) even when you are developing, because Office clients require add-ins and webpages to come from a trusted and secure location. If your add-in fails to load within an Office client, it may be because you haven't installed (trusted) the certificate that the Yeoman generator for Office Add-ins provides. To make sure a valid certificate is used, try to navigate to the html file in any web browser.

Also you may try to switch to another network connection and try again.

user_16033510

Thanks to Eugenes feedback I dug back into the Yeoman generator and generated a new boilerplate react project and found that a package.json.lock file was blocking npm install. After I removed the package.json.lock file I was able to perform the npm install command and then I compared the manifest file from the newly created boilerplate project to the actual project and I saw that I accidentally replaced the https://localhost:3000 by http://localhost:3000. So if you do not attach the s in HTTPS, it does this strange error. the reason I replaced it is because for production I use another URL.

user_55242340
Related