Preparar entorno de desarrollo para SharePoint Framework

Equivalencias de herramientas: 

Para poder trabajar con SPFx (SharePoint Framework) deberemos tener configurados una serie pre-requisitos antes de trabajar.

 NodeJS

Instalaremos NodeJS en la version Long Term Support (LTS).

OJO: Instalar la versión 8.X:

https://nodejs.org/dist/latest-v8.x/node-v8.16.1-x64.msi

Yeoman y Gulp

Abriremos una consola de comandos y escribiremos los siguientes comandos:

npm install -g yo gulp

windows-build-tools

Abriremos una consola de comandos y escribiremos los siguientes comandos:

npm install -g --production windows-build-tools

Install Yeoman SharePoint generator

Abriremos una consola de comandos y escribiremos los siguientes comandos:

npm install -g @microsoft/generator-sharepoint

Editor de código fuente Visual Studio Code

Desde la página oficial descargaremos el  Visual Studio Code

Versiones de UI Fabric según SPFx

SharePoint Framework v1.7.0 release uses Fabric React v5.131.0

SharePoint Framework v1.8.0 release uses Fabric React v6.156.0

SharePoint Framework v1.9.1 release uses Fabric React v6.189.2

SharePoint Framework v1.10.0 release uses Fabric React v7.3.5  --> Not tested

SPFx Releases: 

https://github.com/SharePoint/sp-dev-docs#sharepoint-framework-releases

Depurar SPFx

Para depurar tus desarrollos utiliza la extensión de Visual Studio Code Debugger for Chrome.

Referencias adicionales: Getting Started with the SharePoint Framework (SPFx)

Para probar que todo ha ido bien lanzaremos los siguientes comandos:

mkdir myFirstSolution

cd myFirstSolution

yo @microsoft/sharepoint

Next, we will install the Yeoman generator which is a part of Node.js, and will help you name your solution, tell it where to place your files, name your web part, describe your web part and select which JavaScript framework to use.

After Yeoman has finished installing which will take some time, using the information above, you should see this screen:
Finalmente le debe de aparecer la siguiente ventana:

You will need some type of lightweight text editor, most people are using Visual Studio Code, download it if you don’t already have it.

Now we will install TypeScript, which is basically a superset of JavaScript and just one more thing you get to learn (the fun never ends!). In your cmd prompt or VS Code terminal window type:

npm install -g typescript

We will start to use the Workbench which is a lot less of a pain than having to have your own SharePoint test server, a HTML page that allows you to add client-side web parts, can be run locally or within SharePoint Online, launches a local web server and can be accessed at:

• _layouts/workbench.aspx

One drawback is that we will have to install a local SSL certificate so we can use the program. Going to your cmd window of choice type:

El certificado de desarrollador SOLO tiene que instalarse una vez en el entorno de desarrollo, por lo que puede omitir este paso si ya lo ejecutó en su entorno.

gulp trust-dev-cert

The following pop-up should appear:

Herramientas opcionales                                                                                               

Aquí tiene algunas herramientas que también pueden ser útiles:

• Fiddler
• Complemento Postman para Chrome
• Cmder para Windows
• Oh My Zsh para Mac
• Herramientas de controles de origen de Git

Getting the version number

To find the version of your SPFx Yeoman generator, follow these steps:

1. Launch a Node.js command prompt command or whatever terminal you use
2. Type the following command:

   npm ls -g --depth=0 @microsoft/generator-sharepoint

3. Wait…
4. The response should look a little like this:
   

The command isn’t specific to the SPFx Yeoman generator. It can be used for any NPM package. Here is what it really does:

• npm indicates a Node Package Manager command.
• ls means to list packages
• -g means that you want to list the global packages. If you don’t use -g, you’ll only list the packages installed in the current solution (assuming that you’re currently in a folder that contains a solution)
• --depth=0 means that you only want the top-level modules. In other words, you don’t want to list all modules that includes the package you’re looking for.
• @microsoft/generator-sharepoint is the actual package you want to list. You can actually put whatever package you want here. For example, npm ls -g --depth=0 yo would tell you what version of the Yeoman generator is globally installed, and npm ls --depth=0 office-ui-fabric-react would tell you what version of Office UI Fabric React is currently installed in your current solution.

How to check if Yeoman has an update for you

As Stefan Bauer pointed out, if you don’t want to know which version of the SPFx Yeoman generator you have installed, but you want to see if there is an update, you can follow these steps:

1. Launch a Node.js command prompt command or whatever terminal you use
2. Type the following command:

   yo

3. Yeoman will greet you. If you have an update available, Yeoman should tell you right away (see how my Office generator has an update in the screen shot below)
   
4. Select Update your generators
5. Yeoman will prompt you to select the generators you want to upgrade. Use the spacebar to toggle which generators you want to update, then press Enter
   
6. Yeoman will do its thing, then will tell you I’ve just updated your generators. Remember, you can update a specific generator with npm by running npm install -g generator-______. Good to know Yeoman, good to know.
   

Conclusion

This article shows you how you can use a standard NPM command to query what version of the SPFx Yeoman generator is installed on a workstation.

You can use the same command for any NPM package, but in my particular case, I just wanted to remember how to diagnose the version of the SPFx Yeoman generator.

There may be an easier/faster way to do this. If you know a different way, please share with the rest of the class.