pnp / sp-dev-fx-vs-extension

Visual Studio extension work around SPFx together with community

Visual Studio extension for SharePoint Framework projects

The SharePoint Framework introduces a new set of tools for client-side web development that may be unfamiliar for many enterprise developers and which may not fit well with existing ALM processes, especially those tightly integrated with Team Foundation Server and IDE extensions. This repository contains the source code and releases of a Visual Studio extension for SharePoint Framework that integrates the traditional solution, build, debug and project management tools of Visual Studio with open-source tools like Node.js, Gulp and Yeoman generators. Creating new Framework projects is now as easy as selecting File > New > Project, just like any standard MVC, Web API or ASP.NET application.

The Visual Studio Extension for SharePoint Framework wraps the command-line UI of the Microsoft Yeoman Generator (yo @microsoft/sharepoint) into a familiar Windows Forms experience, executes the generator project scaffolding behind the scenes and creates a Visual Studio project that includes all the necessary files for a complete web part project. Also included is a web part item template for adding new web parts to an existing Framework project. Developers can launch the Workbench local sandbox environment to test their web parts by pressing F5 or by binding to the Gulp Serve event in the Task Runner Explorer. For developers who wish to dive deeper and learn more about the new web development toolchain used by the Framework, the Advanced mode provides full access to the Yeoman generator command parameters and an optional cmd.exe window to view the generator tasks in real time.

Additional resources

• Overview of the SharePoint Framework
• SharePoint Framework development tools and libraries
• SharePoint Framework Reference

Installation

Pre-requisites

• Set up your Office 365 tenant
• Set up your development environment
• Install the extension in Visual Studio:
  • Download the .vsix file from the repo Releases page or from the Visual Studio Extension Gallery
  • Ensure Visual Studio is closed
  • Double-click on the downloaded .vsix file
  • Follow the installation prompts
  • Restart Visual Studio when the installer has completed

Getting Started

A template named 'SPFx Web Part Project' is added to the template list in Visual Studio. Select this template to invoke a wizard that runs the Yeoman generator and creates the project. Additional web parts can be added to an existing solution using the "Add New Item" menu options.

Additional details are in the Getting Started guide.

NOTE: An issue exists in the SPFx Yeoman Generator that prevents specific values from being set as command-line arguments. The issue has been raised to the product team and remains open. Until it is fixed, we cannot resolve the problem within the extension so we have added instructions to the UI when the affected options are selected on how to supply the correct values in the generated project files.

Contributions

We welcome your input on issues and suggestions for new features. We are also interested in community contributions to enhance and expand the capabilities of the extension. Let us know if you have any questions or comments.

Please have a look on our Contribution Guidance before submitting your pull requests, so that we can get your contribution processed as fast as possible. Thanks!

Sharing is caring!

sp-dev-fx-vs-extension's Issues

Question: How to debug SPFx Projects created using this extension in Visual Studio 2017?

Hi

Question: How to debug SPFx Projects created using this extension in Visual Studio 2017?

Best Regards,
Swati

Double files within explorer

Category

[ ] Question
[X] Bug
[ ] Enhancement

Observed Behavior

I create a new project in Visual Studio 2015 and a new web part within, the form shows and I fill in all the required fields. I leave the "Do not automatically install dependencies" is unchecked.
I close visual studio, reopen visual studio, load the project I just created and I see all the files double within the solution gallery.

Expected or Desired Behavior

I would expect that all my files are listed once, the project file (open in notepad) only shows a reference to the files once.

Steps to Reproduce

See observed behavior

Does not install on Visual Studio 2019

Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

[ ] Question
[X] Bug
[ ] Enhancement

Versions

[16.0.0] Visual Studio version (Help > About)
[-- (empty)] SPFx Generator version (npm list -g @microsoft/generator-sharepoint)

Expected or Desired Behavior

If you are reporting a bug, please describe the expected behavior. If you are suggesting an enhancement please describe thoroughly the enhancement, how it can be achieved, and expected benefit.

I expected to be allowed to install it.

Observed Behavior

If you are reporting a bug, please describe the behavior you expected to occur when performing the action. If you are making a suggestion, you can delete this section.

I could not install it.

Steps to Reproduce

If you are reporting a bug please describe the steps to reproduce the bug in sufficient detail to allow testing. Only way to fix things properly, is to have sufficient details to reproduce it. If you are making a suggestion, you can delete this section.

Run the latest version (1.7.0) Framework.VSIX.vsix with Visual Studio 2019 installed.

SharePoint framework template not showing while creating new project from VS 2015

Hi,
I have VS 2015 Enterprise version just now installed. I got the framework project template from below url and installed successfully. When i try to create new SPFX project I do not see the installed framework template there on project creation wizard in visual studio.
https://github.com/SharePoint/sp-dev-fx-vs-extension/releases/tag/1.4.0

Category

[ ] Question

Versions

[ 14.0.25431.01 Update 3 ] Visual Studio version (Help > About)
[ ] SPFx Generator version (npm list -g @microsoft/generator-sharepoint)

Expected or Desired Behavior

Visual studio should display the SPFX framework project template while creating new project.

Observed Behavior

VS not showing SPFX framework project template in VS 2015.

Steps to Reproduce

Try to install the SPFX framework vsix from above url in your vs 2015 update 3 and post installation try to create a SPFX prject.

Thanks,
Kailash

Project were not creating in visual studio 2017

When iam trying to to create a new mvc or asp.net core projects, The project is not creating. I dont know the wat is the problem with visual studio

package-solution.json incorrect data types

Category

[ ] Question
[x] Bug
[ ] Enhancement

Versions

[2019 v16.4.5] Visual Studio version (Help > About)
[ @microsoft/[email protected] ] SPFx Generator version (npm list -g @microsoft/generator-sharepoint)

Expected or Desired Behavior

Expect that the "skipFeatureDeployment" and "isDomainIsolated" properties values are generated as boolean in \config\package-solution.json.

Observed Behavior

Property values are generated as strings.

Steps to Reproduce

Create a new spfx proj with defaults and F5.

Love this extension and as a 20 year SP dev am really starting to take a liking to SPFx and PnP.
Thanks!

How to enable additional Debugging-Features (not just F5)

Category

[x ] Question
[ ] Bug
[x] Enhancement

Desired Behavior

Is it possible to enable all known debugging features from Visual Studio?

Observed Behavior

After creating a new project using this extension, pressing F5 only starts 'gulp serve' and the local workbench starts inside the default browser. But no possible breakpoints will be reached.

In comparison: Using VS Code with 'Debugger for Chrome' Extension you can use client side debugging, at least.

Thanks
Michael

Problem build project

Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

[X] Question
[ ] Bug
[ ] Enhancement

Versions

[ 15.7.0 ] Visual Studio version (Help > About)
[ 1.4.1 ] SPFx Generator version (npm list -g @microsoft/generator-sharepoint)

Expected or Desired Behavior

If you are reporting a bug, please describe the expected behavior. If you are suggesting an enhancement please describe thoroughly the enhancement, how it can be achieved, and expected benefit.

When I build a project, it just sits there and runs and never completes. I then found an article to open the command window to see what is going on. I did that and it completes just like you would through npm. It ends with if you want to run the code you have to do gulp serve. I tried and it errored and found out that I wasn't in the right directory to run it and then go into a folder deeper and run it and gulp serve runs. I then add the webpart to the workbench and then close the window and Visual Studio completes. Is there another way to fix this?

Observed Behavior

If you are reporting a bug, please describe the behavior you expected to occur when performing the action. If you are making a suggestion, you can delete this section.

Steps to Reproduce

If you are reporting a bug please describe the steps to reproduce the bug in sufficient detail to allow testing. Only way to fix things properly, is to have sufficient details to reproduce it. If you are making a suggestion, you can delete this section.

Submission Guidelines

Delete this section after reading

• All suggestions or bugs are welcome, please let us know what's on your mind.
• If you are reporting an issue around any of the samples, please ensure that you have clear reference on the sample and possibly code file, which should be fixed.
• If you have technical questions about the framework, we’ll be monitoring #spfx, #spfx-webparts, and #spfx-tooling on (SharePoint StackExchange)[http://sharepoint.stackexchange.com/]. You can also alternatively submit your question to (SharePoint Developer group)[https://network.office.com/t5/SharePoint-Developer/bd-p/SharePointDev] at Microsoft Technical Network.
• Remember to include sufficient details and context.
• If you have multiple suggestions or bugs please submit them in separate bugs so we can track resolution.

Thanks for your contribution! Sharing is caring.

SPFx Extension does not generate scaffolding for project? What pre-reqs needed to set up first?

Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

[ x ] Question
[ x ] Bug
[ x ] Enhancement

Expected or Desired Behavior

If you are reporting a bug, please describe the expected behavior. If you are suggesting an enhancement please describe thoroughly the enhancement, how it can be achieved, and expected benefit.

When creating a new SPFx project Visual Studio 2017 with the SPFx extension, we get this error:

'yo' is not recognized as an internal or external command,
operable program or batch file.

Observed Behavior

If you are reporting a bug, please describe the behavior you expected to occur when performing the action. If you are making a suggestion, you can delete this section.

'yo' is not recognized as an internal or external command,
operable program or batch file.

Steps to Reproduce

If you are reporting a bug please describe the steps to reproduce the bug in sufficient detail to allow testing. Only way to fix things properly, is to have sufficient details to reproduce it. If you are making a suggestion, you can delete this section.

New Install of Visual Studio 2017 enterprise with the SPFx extension.
Create SPFx Project for Web part but get error above

1. What are the path prerequisites yeoman, npm, gulp, etc on Windows 10 prior to using Visual Studio to
   create SPFx WebParts and Extensions?
2. Can they be installed globally rather than on every project?
3. Is there a SETUP script/PowerShell that can set up all the prerequisites first or is this documented?

SPFX.zip

Thank you

Nick

Need to install npm everytime new project is created & run for the first time (per project)

Versions

[ ] Visual Studio version : Visual Studio 2017 Community/Enterprise 2017
[ ] SPFx Generator version latest version

Expected or Desired Behavior

SPFx Visual Studio Project should launch Workbench without the need to install npm everytime new project is created & when we try to run the project for the first time.

Observed Behavior

Hi Vesa,

We have installed latest SPFx Visual Studio Template for visual studio 2017 (as described above 1.4.0 latest)
but when we run the project to launch the workbench..

We need to install gulp everytime the new project is created.. like npm install gulp

after it is done we need to fix
Error: Cannot find module '@ microsoft/sp-build-web'

after this is fixed we get the error
Error: listen EADDRINUSE

so after all command prompt instances are closed above error goes away..

How to avoid these errors

Error Log as follow
C:\Users\jaiswati\Documents\Visual Studio 2017\Projects\MyWebPart5\MyWebPart5>gulp package-solution
[10:11:40] Local gulp not found in ~\Documents\Visual Studio 2017\Projects\MyWebPart5\MyWebPart5
[10:11:40] Try running: npm install gulp

C:\Users\jaiswati\Documents\Visual Studio 2017\Projects\MyWebPart5\MyWebPart5>install gulp
'install' is not recognized as an internal or external command,
operable program or batch file.

C:\Users\jaiswati\Documents\Visual Studio 2017\Projects\MyWebPart5\MyWebPart5>npm install gulp
npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm notice created a lockfile as package-lock.json. You should commit this file.

[email protected]
added 270 packages in 35.049s
C:\Users\jaiswati\Documents\Visual Studio 2017\Projects\MyWebPart5\MyWebPart5>gulp package-solution
module.js:549
throw err;
^

Error: Cannot find module '@ microsoft/sp-build-web'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object. (C:\Users\jaiswati\Documents\Visual Studio 2017\Projects\MyWebPart5\MyWebPart5\gulpfile.js:4:15)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)

C:\Users\jaiswati\Documents\Visual Studio 2017\Projects\MyWebPart5\MyWebPart5>npm install --save-dev

Can't install extensions because of "prerequisites that cannot be resolved"

Category

[x ] Question
[ ] Bug
[ ] Enhancement

Versions

Visual Studio version: Enterprise 2017, 15.4.1
SPFx Generator version: 1.3.2

Expected or Desired Behavior

I'd like to install the package. ;-)

Observed Behavior

The VSIX Installer fails for me, saying that "The extension cannot be installed to this product due to prerequisites that cannot be resolved"

Steps to Reproduce

(hopefully I'm the only one)

Please let me know what's missing - the previous version worked like a charm.

Thanks for your help!
Dirk

Yeoman generator not found issue while creating the Project.

Create a SPx WebPart using VS 2015 Extension

[Yeoman generator not found issue while creating the Project. ] Bug

Versions

[ Visual Studio 2015 ] Visual Studio version (Help > About)
[ ] SPFx Generator version (`1.3.x)

Expected or Desired Behavior

Create the SharePoint Framework Project

Observed Behavior

Error while creating the Project

Steps to Reproduce

1. Install Visual Studio Extension
2. Open Visual Studio 2015, select SharePoint Framework Project Template.

Visual Studio Crash in cancel

Category

[ ] Question
[X] Bug
[ ] Enhancement

Expected or Desired Behavior

I would expect that when I click on cancel the wizard closes and no files are created

Observed Behavior

Visual studio crashes and the project folder is created, but no files

Steps to Reproduce

• Open visual studio 2015
• Create a SPF webpart within a new project.
• Click on cancel the wizard displays

Update wiki Home page

Error running project when connected to vsts

Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

[ ] Question
[x ] Bug
[ ] Enhancement

Versions

[ x ] Visual Studio version (Help > About)
[ ] SPFx Generator version (npm list -g @microsoft/generator-sharepoint)

Expected or Desired Behavior

When press F5, run the project

Observed Behavior

Steps to Reproduce

1. Create Project
2. Add To Source Control (VSTS + TFS)
3. Check-in all files
4. With this defined in workspace "Location: Server"
   
5. Run F5
   got the error
   

Submission Guidelines

Thanks for your contribution! Sharing is caring.

Error while installing the project template

Category

[] Question
[X] Bug
[ ] Enhancement

Versions

Visual Studio Professional 2017
[ ] SPFx Generator version (npm list -g @microsoft/generator-sharepoint)

Expected or Desired Behavior

Successful installation

Observed Behavior

Error due to pre-requisites that can not be resolved

Yeoman Generator not found (create new project error)

Hi there,

I am just starting with this tool. The .VSIX is installed from the latest version in GitHub. When I try to create a new SharePoint Foundation Web-Part. I receive the error "Yeoman Generator Not Found". I have set the "PATH$" in the VS options to be the first search path. And Yeoman commands can be run fine from a command prompt.

Category

[ x] Question
[x ] Bug
[ ] Enhancement

Versions

[15.6.0 ] Visual Studio version (Help > About)
[ 1.3.2 ] SPFx Generator version (npm list -g @microsoft/generator-sharepoint)

Expected or Desired Behavior

This should create a new project, but it does not display the Windows Form for parameters.

Steps to Reproduce

I try to create a new project and it fails with the "Yeoman generator..." issue.

Add support for Extensions

Add support for SPFx Extensions, targetting @microsoft/generator-sharepoint v1.3.2

How to open existing project created using cmd and configure the F5 Action?

Category

[ ] Question
[ ] Bug
[X ] Enhancement

Expected or Desired Behavior

f5 shall run the workbench on project created outside of Visual studio

Observed Behavior

The extension do not do the necessary operation for the F5 to run the workbench on SPFX project created from CMD, not from VS. Is there additional configuration to do ?

Steps to Reproduce

Create a SPFX project using CMD.exe
Open this folder with visual studio
Press F5

Thank you in advance for the great work

cant install extension for vs2017

I'm getting:

my vs2017 is:

thank you for any help.

Incorrect Value type in package-solution.json file

Category

[ ] Question
[x] Bug
[ ] Enhancement

Versions

[ 15.7.5 ] Visual Studio version (Help > About)
[ 1.5.1.2 ] SPFx Generator version (npm list -g @microsoft/generator-sharepoint)

Expected or Desired Behavior

When running the generated project with F5 there should be no error.

Observed Behavior

When running the generated project with F5 there was an error

[14:52:33] Working directory changed to d:\Dev\MySPFxProject2\MySPFxProject2
Build target: DEBUG
d:\Dev\MySPFxProject2\MySPFxProject2\node_modules@microsoft\node-core-library\lib\JsonSchema.js:178
throw new Error(prefix + os.EOL +
^

Error: JSON validation failed:
d:\Dev\MySPFxProject2\MySPFxProject2\config\package-solution.json

Error: #/solution/skipFeatureDeployment (If true, allow the tenant admin the c...)
Expected type boolean but found type string

Turn around:
Changing "false" to false for the "skipFeatureDeployment" in the package-solution.json file correct the problem.

Steps to Reproduce

Just launch the debugging session

Any update for SPFx v1.6

Category

[ .] Question

Versions

[.] Visual Studio version (Help > About)

VS Extension to launch in SharePoint Online

Category

[ ] Question
[ ] Bug
[x] Enhancement

Hi, would it be possible to launch the WorkBench (F5) in the context of SharePoint Online, like you can do at the moment with the command line so what you could use this extension to develop Web Parts consuming SharePoint data.
Cheers

Si

Sharing is caring.

Error - 'yo' is not recognized as an internal or external command

While creating project I am facing an error "'yo' is not recognized as an internal or external command,
operable program or batch file.". But when i use the yo command in command prompt, it generates solution.

I am using Visual Studio 2017

Visual Studio not responding when creating new SPFx project

Observed Behavior

Only a few files and folders are created (bin, obj and the project file), and the process never completes. Visual studio 2017 are not responding. Using .NET framework 4.6.1 in VS 2017 pro. VS just hanging on creating the project and never get finished, you have to just kill the process, close VS.

Steps to Reproduce

Create new SPFx web part project, select name and location, select component name and start generating.....

Ref issue: https://github.com/SharePoint/sp-dev-fx-vs-extension/issues/10

I did as @Ahmad-Gad described but still not working.
I uninstalled VS and installed again, dident help, i even installed vs on my second computer, still same issue....

On Premise webpart creation - hang forever visual studio 2017

Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

[ ] Question
[* ] Bug
[ ] Enhancement

Versions

[ 2017 Enterprise 15.5.7 ] Visual Studio version (Help > About)
[ 1.4.1 ] SPFx Generator version (npm list -g @microsoft/generator-sharepoint)
[ 8.10] Node js

Expected or Desired Behavior

Create the new SPFX project (webpart) on premise

Observed Behavior

create new project by selecting spfx project
on the SPFX popup I selected "onprem"
specified the name and description of my webpart.
Click generate.... and visual studio hang on (Creating project popup) forever.

The project has been generated...

• no dll reference.
• the project is not attached to the solution file.
• npm has not run

Steps to Reproduce

create new project by selecting spfx project
on the SPFX popup I selected "onprem"
specified the name and description of my webpart.
Click generate.... and visual studio hang on (Creating project popup) forever.

Support generator version 1.2

The generator is showing a prompt for tenant deployment. Visual Studio appears hung, waiting for the response to this prompt.

Visual Studio not responding when creating new project

Category

[ ] Question
[X] Bug
[ ] Enhancement

Expected or Desired Behavior

A new project should be created.

Observed Behavior

Only a few files and folders are created (bin, obj and the project file), and the process never completes. Visual studio 2017 are not responding. Using .NET framework 4.6.1 in VS 2017 preview

Steps to Reproduce

Create new SPFx web part project, select name and location, select component name and start generating.

Update SPFx Visual studio extension to support latest framework by default

Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

[ ] Question
[ ] Bug
[X ] Enhancement

Versions

[ X ] Visual Studio version (Help > About)
[ ] SPFx Generator version (npm list -g @microsoft/generator-sharepoint)

Expected or Desired Behavior

Can we update the extension to support the latest version of the framework as default in project template?

Observed Behavior

The extension seems to be updated a few months ago and uses Sharepoint Framework version 1.3.2.

Steps to Reproduce

Install version 1.3.3 of the framework with Visual Studio 2017 15.6 version.

I could also contribute to the development of the extension further.

SPFx Project creation hangs on Visual Studio 2017 Enterprise

Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

[ ] Question
[ x] Bug
[ ] Enhancement

Versions

[ 15.7.4 ] Visual Studio version (Help > About)
[ 1.5.1 ] SPFx Generator version (npm list -g @microsoft/generator-sharepoint)

Expected or Desired Behavior

Creates project

Observed Behavior

Visual studio becomes unresponsive, but creates the folders of the all project, but i cannot open it with the .csproj

Steps to Reproduce

Submission Guidelines

Thanks for your contribution! Sharing is caring.