Viva Connections Toolkit for Visual Studio Code
Viva Connections Toolkit is a Visual Studio Code extension that aims to boost your productivity in developing and managing SharePoint Framework solutions helping at every stage of your development flow, from setting up your development workspace to deploying a solution straight to your tenant without the need to leave VS Code.
Viva Connections Toolkit for Visual Studio Code is an abstraction layer on top of the SPFx Yeoman generator and CLI for Microsoft 365. All operations and actions are performed on the command line level using these two tools with the environment settings on your computer.
This means that the features and capabilities provided through this tool are available for any solution which has been built with SPFx.
The extension provides the following capabilities:
1️⃣ Welcome experience
The extension automatically detects if you are in a SharePoint Framework project. If not, it will show helpful actions to allow you to create a new SPFx or ACE solution.
Directly from this view, you may create a new project from scratch or from an existing web part, extension or ACE sample, or ACE scenario.
It is also possible to open an already existing project using Open folder button.
Last but not least it is possible to check your local workspace for the needed global dependencies to develop the SPFx project, like the correct Node version, gulp, yeoman etc., and install them if needed with a single click.
2️⃣ Set up your development environment
To ensure that you can develop SPFx solutions, in Viva Connections Toolkit you may use the check dependencies functionality.
This action will check if you have the required dependencies to create a new Viva Connections app.
In case when you do not have all dependencies installed, you can use the install dependencies action to install them.
3️⃣ Don't Start from scratch. Reuse an SPFx (web part or extension) or ACE sample
From one of the samples gallery, you can kick-start your development with a new project. Create a new SPFx web part Extension or ACE solution with a click of a button. The samples are coming from PnP Samples repo.
Check out how easy it is to create a new project based on a web part sample 👇.
Or ACE sample 👇.
4️⃣ Start from an ACE scenario
Start your solution based on the provided set of ACE scenarios with ready-to-use code to showcase what's possible. Scenarios are provided with detailed guidance using the Code Tour to provide you with more details on the structure and options.
5️⃣ Create a new project
Creating a new project was never easier. Just use the create a new project action, and the extension will guide you through the process.
Check it out 👇.
It's possible to scaffolding any kind of SPFx project.
6️⃣ Login to your tenant & retrieve environment details
The extension also allows you to log in to your Microsoft 365 tenant using CLI for Microsoft 365.
Thanks to that the extension will retrieve helpful URLs from your tenant like the link to SharePoint main site and tenant level App Catalog as well as site level.
Login-in is also required for some actions to work properly like the deploy action which allows to upload of the .sppkg file to the tenant or site-level App Catalog.
Additionally, when an SPFx project is opened the extension will check serve.json file and suggest updating it to set the initialPage property based on the currently logged-in tenant.
7️⃣ Gulp tasks
One of the sections of the extension shows all possible Gulp tasks one may run on an SPFx project. The tasks allow you to clean, bundle, package, serve the project with a single click.
The actions section allows unique functionalities that may significantly boost productivity when working with SPFx projects.
Currently the extension allows you to:
9️⃣ Help and feedback section
The help and feedback section is a group of links that will redirect the user to documentation, learning paths, ACE designer, MS Graph Explorer, PnP Discord channel, Viva Connections Toolkit repo, and many more.
1️⃣0️⃣ Coding Snippets
It contains snippets for working in:
In order to start using it simply start typing from
Check out the extension details to find out more
Check it out in action 👇
For more information on how to use the extension, please refer to the wiki.
This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to grant us the right to use your contribution. For details, visit https://cla.microsoft.com.
When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.
This project is a community lead extension provided by the Microsoft 365 and Power Platform Community members. Microsoft employees are closely involved in this work, but the solution is provided under the community brand without direct supportability channels from Microsoft.
Are you building experiences for Microsoft 365? - Everyone is welcome to join our Microsoft 365 and Power Platform Community efforts with community calls, samples and guidance. Join our weekly community calls for Microsoft 365 and Power Platform topics or engage with us on Discord. Everyone is welcome 🧡
🧾 Code of Conduct
See the changelog for the latest changes.
😍 "Sharing is Caring"
🔍 Additional resources
THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.