Office-js-docs-pr: vanilla project: Error: The dev server is not running on port 3000.

[12s]

Hello,

I am following the 'Any Editor' version of the tutorial. I "yo office" with the appropriate settings, cd into dir and 'npm start' but the local webserver does not start with console message:

Starting the dev server... (webpack-dev-server --mode development)
Unable to start the dev server. Error: The dev server is not running on port 3000.

Powerpoint will open with an
'Add-in Error':
This add-in is no longer available. If this add-in's manifest was removed, please restore it to its previous location and try again.

Any suggestions?

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 50a89144-ac19-b28e-2842-5e2cbdb1cb00
• Version Independent ID: cb59df19-9c22-de2c-0c46-7a1403312987
• Content: Build your first PowerPoint task pane add-in - Office Add-ins
• Content Source: docs/quickstarts/powerpoint-quickstart.md
• Product: powerpoint
• Technology: add-ins
• GitHub Login: @o365devx
• Microsoft Alias: o365devx

[mscharlock]

Hi @12s - Thanks for trying out Powerpoint add-ins submitting an issue about this! Our docs team will take a look and get back to you. As the Microsoft //build conference happens this week, we may take a few days to respond as our team is busier than normal.

[ElizabethSamuel-MSFT]

@12s I tried this on a Windows 10 machine but it's working. Can you share more details about your setup (e.g. OS, Office version)?

@akrantz @TCourtneyOwen: Any suggestions that may help here?

Thanks.

[12s]

I am running macOS Mojave 10.14.4
I installed the current version of generator-office

[12s]

Microsoft PowerPoint for Mac
Version 16.16.9

[12s]

So, in the mean time I have been developing on my windows machine where everything has been working as expected.
I do have a more pressing issue now. Basically this stack post:

https://stackoverflow.com/questions/35744466/javascript-interaction-with-powerpoint-documents/35784313#

The post is from 3 years ago so I'm hoping there is a solution, but I too can't get any additional slide information from getSelectedDataAsync other than Id, title and index.

Is this still the case?

[ElizabethSamuel-MSFT]

@12s:

• Regarding your initial issue: on the yo office readme, there's a note for Mac developers to use Node Version Manager. There may be other tips for Mac in that repo so please take a look.
• Per current docs for getSelectedDataAsync, it hasn't moved much further since then. I invite you to use UserVoice to suggest/upvote this feature as we consider UserVoice when we plan upcoming work.

Thanks again for raising the issues.

[ElizabethSamuel-MSFT]

I'll go ahead and close this now but let us know to reopen it if you're still facing an issue.

[JanZelenka]

Hi!
I'm having the same issue on the same system as 12s. I tried to use Node Version Manager, which on its own went smooth but didn't help regarding this.
I would be grateful for any ideas of how to make this error go away.

[JanZelenka]

Well, I seem to have found the solution right now. sudo npm start was a success.

[ElizabethSamuel-MSFT]

@JanZelenka: It's good that you're unblocked but we don't recommend using sudo as a long-term solution since that would seem to indicate there are still some permission/config issues.

@12s: Did you get a chance to try NVM? If so, can you share your results?

Thanks.

[akrantz]

I know what the problem is. We've updated the Yo Office templates to make it easier to generate and install certificates for https://localhost. When "npm run dev-server" or "npm build" is done, the webpack config has a plugin which will generate the certificates and then prompt for permission to install them. The "npm start" command wll start the dev server as a detached process if it has not already been started, but the command output is not shown. Therefore, when "npm start" is used and the dev server is not already running, if dev certs need to be installed, the prompt cannot be seen, and after 30 seconds, the start command will stop waiting for the dev server to be started and show the error "Unable to start the dev server. Error: The dev server is not running on port 3000."

The workaround is to do one of the following:

1. Run npx office-addin-dev-certs install. Enter the password when prompted.
2. Run npm run dev-server before running npm start. Enter the password when prompted.
3. Open the project in VS Code. Use Terminal, Run Task, Dev Server to run the dev server inside VS Code. Enter the password when prompted.

There is a difference on Windows where the need to accept installing the dev certs is a dialog that appears rather than simply asking for the password to be entered from the command line. Therefore, this is not a problem on Windows.

I usually do #3 above, and in fact the task is set up to automatically start the Dev Server task when the folder is opened in VS Code, if you enable automatic tasks for the folder.

[ElizabethSamuel-MSFT]

@akrantz: Thanks for your response. We'll see how we can incorporate this info with the various quick starts and tutorials.

@12s, @JanZelenka: Can you try this and let us know the outcome? Thanks.

[akrantz]

@ElizabethSamuel-MSFT It would help to update the docs with information about this problem on Mac.

It is probably best to have them do npm run dev-server first, so there is a visible window showing the dev-server output, then Command+T to open a new tab (since the dev server keeps running), and then npm start.

Alternatively, if the instructions are focused on using VS Code, I would recommend doing everthing in VS Code. I find this a better approach because when I close VS Code, it automatically closes the associated dev server.

Glad to discuss more or review doc changes. Thanks.

[JanZelenka]

Thanks for the quick response!
I have tried npm run dev-server and afterwards npm start in a new tab, got no errors and the web server is happily running.
Grateful your help!

[akrantz]

@JanZelenka I'm glad to hear it!

[12s]

Yes, running npm dev-server before npm start shows
"the dev server is already running on port 3000" correctly, followed by "Debugging started".

When powerpoint opens I see the same "Add-in Error" thinking the manifest is missing.

I'll keep trying to debug the issue, but without an API endpoint to get and set text (beyond the slide title from getSlideMetadata) my project won't go far :(

[ElizabethSamuel-MSFT]

@12s Glad that the server is up and running now.

Regarding the "Add-in error", can you try sideloading the add-in? Let us know if that helps.

Thanks.

[ElizabethSamuel-MSFT]

We've updated the tutorials and quick start with Mac guidance. Those updates should be go live this week.

[12s]

Hey Elizabeth,
Looking forward to the Mac guide. I'll follow along when its up.

[ElizabethSamuel-MSFT]

@12s We look forward to hearing your feedback on that. However, were you able to try sideloading the add-in? Thanks.

[esbanarango]

Waiting for the Mac guides as well here 🙏 ! In the mean time I followed @akrantz suggestion https://github.com/OfficeDev/office-js-docs-pr/issues/978#issuecomment-493118079

[ElizabethSamuel-MSFT]

Closing this as the changes are live. We appreciate all the input on this. If you're still facing issues, let us know. Thanks.

[Wolfthorne]

I have the same issue and it is because I have a space in my username :(