Uploaded January 2024 | Updated September 2026, 2 weeks ago
In this tutorial, I'll guide you through setting up your own development environment using Node.js, Yeoman Generator, and Visual Studio Code to create Office Add-ins. We'll cover everything from downloading Node.js to creating your first Office Add-in in Microsoft PowerPoint.
🔍 Key Points:
1. Downloading Node.js:
- Open Edge browser and search for "download Node.js."
- Choose the suitable version (Windows Installer MSI 64-bit in this case).
- Install with default settings in Program Files/Nodejs folder, ensuring "Add to Path" is enabled.
2. Installing Yeoman Generator:
- Open the command prompt in administrator mode (Start + R, type CMD, press Control + Shift + Enter).
- Check Node.js and NPM installation with "node -v" and "npm -v."
- Install Yeoman Generator with "npm install -g yo."
3. Installing Office Generator:**
- Install the Office generator with "npm install -g generator-office."
4. Creating Your First Office Add-in:
- Move to a new drive (e.g., D drive) and create your add-in with "yo office."
- Choose the Office Add-in Task Pane project and select JavaScript.
- Enter a name (e.g., "yo-animator") and specify the application (PowerPoint in this case).
5. Running and Testing Your Add-in:
- Navigate to the add-in folder with "cd yo-animator."
- Start the development server with "npm start."
6. Editing Code in Visual Studio Code:
- Install Visual Studio Code.
- Open the add-in folder in Visual Studio Code to easily manage and edit code files.
- Modify the manifest file and task pane files (HTML, CSS, JS) for customizing your add-in.
7. Live Testing in PowerPoint:
- Launch PowerPoint with the development server running.
- Observe your task pane on the right side, and test your add-in by clicking the "Run" button.
8. Finalizing Your Add-in:
- Explore and modify key files like "manifest.xml" and files within the "src" subfolder.
- Save changes and witness live updates in PowerPoint.
9. Next Steps:
- Preview of the upcoming tutorial where we'll build custom functionality from scratch.
👉 I hope you found this tutorial helpful! Like, share, and comment if you enjoyed it. Don't forget to subscribe for more exciting Office Add-in development content. Stay tuned for our next tutorial where we dive deeper into creating custom functionality. Thank you for watching, and until next time – bye and take care!
🔗 **Useful Links:**
- [Download Visual Studio 2022 Developer Edition]
visualstudio.microsoft.com/downloads
- [Office Add-ins Platform Overview]
learn.microsoft.com/en-us/office/dev/add-ins/overview/office-add-ins
- [Microsoft Office Object Library]
learn.microsoft.com/en-us/office/vba/api/overview
👌 Recommended Videos
Introduction to Office Add-ins and Script Lab in PowerPoint Tutorial
youtube.com/watch?v=CO8irYCRaAQ
Create Animation in PowerPoint using VBA Macros
youtube.com/watch?v=Xbifc1ilx7E
✅ Check out our playlists for more helpful content:
🔸 More Microsoft PowerPoint tutorials:
youtube.com/playlist?list=PLwBNdcufIBPu_Q9nBW7KRvdk6cPmffsQP
👌 Follow us:
Twitter - twitter.com/TheTeacherPoint
Facebook - facebook.com/TheTeacherPoint
Instagram - instagram.com/TheTeacherPoint
Pinterest - in.pinterest.com/TheTeacherPoint
🌻 The Teacher presents a captivating Microsoft PowerPoint animated presentation.
#OfficeAddins #NodeJS #VisualStudioCode #YeomanGenerator #MicrosoftPowerPoint #CodeTutorial #theteacher
In this tutorial, I'll guide you through setting up your own development environment using Node.js, Yeoman Generator, and Visual Studio Code to create Office Add-ins. We'll cover everything from downloading Node.js to creating your first Office Add-in in Microsoft PowerPoint.
🔍 Key Points:
1. Downloading Node.js:
- Open Edge browser and search for "download Node.js."
- Choose the suitable version (Windows Installer MSI 64-bit in this case).
- Install with default settings in Program Files/Nodejs folder, ensuring "Add to Path" is enabled.
2. Installing Yeoman Generator:
- Open the command prompt in administrator mode (Start + R, type CMD, press Control + Shift + Enter).
- Check Node.js and NPM installation with "node -v" and "npm -v."
- Install Yeoman Generator with "npm install -g yo."
3. Installing Office Generator:**
- Install the Office generator with "npm install -g generator-office."
4. Creating Your First Office Add-in:
- Move to a new drive (e.g., D drive) and create your add-in with "yo office."
- Choose the Office Add-in Task Pane project and select JavaScript.
- Enter a name (e.g., "yo-animator") and specify the application (PowerPoint in this case).
5. Running and Testing Your Add-in:
- Navigate to the add-in folder with "cd yo-animator."
- Start the development server with "npm start."
6. Editing Code in Visual Studio Code:
- Install Visual Studio Code.
- Open the add-in folder in Visual Studio Code to easily manage and edit code files.
- Modify the manifest file and task pane files (HTML, CSS, JS) for customizing your add-in.
7. Live Testing in PowerPoint:
- Launch PowerPoint with the development server running.
- Observe your task pane on the right side, and test your add-in by clicking the "Run" button.
8. Finalizing Your Add-in:
- Explore and modify key files like "manifest.xml" and files within the "src" subfolder.
- Save changes and witness live updates in PowerPoint.
9. Next Steps:
- Preview of the upcoming tutorial where we'll build custom functionality from scratch.
👉 I hope you found this tutorial helpful! Like, share, and comment if you enjoyed it. Don't forget to subscribe for more exciting Office Add-in development content. Stay tuned for our next tutorial where we dive deeper into creating custom functionality. Thank you for watching, and until next time – bye and take care!
🔗 **Useful Links:**
- [Download Visual Studio 2022 Developer Edition]
visualstudio.microsoft.com/downloads
- [Office Add-ins Platform Overview]
learn.microsoft.com/en-us/office/dev/add-ins/overview/office-add-ins
- [Microsoft Office Object Library]
learn.microsoft.com/en-us/office/vba/api/overview
👌 Recommended Videos
Introduction to Office Add-ins and Script Lab in PowerPoint Tutorial
youtube.com/watch?v=CO8irYCRaAQ
Create Animation in PowerPoint using VBA Macros
youtube.com/watch?v=Xbifc1ilx7E
✅ Check out our playlists for more helpful content:
🔸 More Microsoft PowerPoint tutorials:
youtube.com/playlist?list=PLwBNdcufIBPu_Q9nBW7KRvdk6cPmffsQP
👌 Follow us:
Twitter - twitter.com/TheTeacherPoint
Facebook - facebook.com/TheTeacherPoint
Instagram - instagram.com/TheTeacherPoint
Pinterest - in.pinterest.com/TheTeacherPoint
🌻 The Teacher presents a captivating Microsoft PowerPoint animated presentation.
#OfficeAddins #NodeJS #VisualStudioCode #YeomanGenerator #MicrosoftPowerPoint #CodeTutorial #theteacher
