Una vez tenemos listo el entorno (leer el artículo anterior) vamos a entender cada parte que tiene la solución. Para ello, en primer lugar vamos a abrir la carpeta donde se ha descargado la solución mediante Yeoman.
Para estas demos utilizaré Visual Studio Code, pero puedes elegir tu IDE preferido (Visual Studio, Brackets, etc..)
El primer fichero de los importantes es el fichero gulpfile.js. Por si no lo conocéis, éste es el fichero de configuración para poder ejecutar Gulp.
Es «Task Runner» de tareas Open Source para Javascript. En Gulp podemos ejecutar casi cualquier tarea que puedas hacer de forma manual: compilar ficheros SASS, compilar typescript, ejecutar test, publicar ficheros, verificación de la sintaxis del html, javascript, etc … De tal forma que tener una serie de procesos Gulp nos puede ahorrar mucho tiempo en nuestro desarrollo del día a día.
Dentro de este Framework, el equipo de producto ha implementado unas tareas predeterminadas: falta documentación sobre todas las tareas que hay disponibles. A continuación, comentaremos las imprescindibles para la utilización del framework.
La primea de las tareas que hacemos uso es la de unificar todos el JavaScript en un único fichero y levantar un servidor en local para poder depurar. Para hacer esto debemos poner la siguiente instrucción: gulp serve.
Otra de las tareas que tiene el FrameWork es la de generar la App. Para ello hay que ejecutar la siguiente instrucción: gulp package-solution. Al ejecutar este comando dentro de nuestra solución, se crea una carpeta «sharepoint» y dentro de la misma esté el fichero con extensión .sapp. Este comando genera el paquete pero no «compila» la solución, es decir, si previamente no hemos ejecutado gulp serve nuestra solución estará vacía porque no hay ningún fichero javascript.
Por último, otra de las tareas es cómo subir los ficheros javascript a un CDN de Azure (en los siguientes artículos ya comentaremos cuándo y por qué utilizar estos CDN) . Para ello dentro de la carpeta config disponemos de un fichero deploy-azure-storage.json. En dicho fichero ponemos la configuración de nuestro blob storage de Azure. Una vez tenemos configurado ésto, ejecutamos las siguientes intrucciones: gulp –ship (se encarga de compilar y minimizar la solución) y gulp deploy-azure-storage.
Dentro de la carpeta «src» ya disponemos de nuestro desarrollo. Anteriormente a esta carpeta hay otra carpeta WebParts, en la que a su vez hay apartados para cada WebPart de la solución.
Cada Webpart esta formado por :
En esta carpeta estás todas las configuraciones que tenemos en nuestro desarrollo. Por defecto, tenemos estas configuraciones en ficheros de extensión json:
Por último tenemos dos carpetas que no debemos de modificar bajo ningún concepto. Son las carpetas:
Como seguro que os habéis dado cuenta, el actual entorno de desarrollo es algo distinto al que conocía tradicionalmente cualquier desarrollador de SharePoint. Ahora debemos conocer herramientas como NodeJS, TypeScript, etc… Un archivo que también es muy importante en la configuración, es el archivo package.json. En el mismo se configuran las dependencias con los paquetes npm que son necesarios en esta solución y una vez los ejecutemos, automáticamente los instalará dentro de la carpeta node_modules.
Este sitio web utiliza cookies para que tengas la mejor experiencia de usuario. Si continuas navegando, estás dando tu consentimiento para aceptar las cookies y también nuestra política de cookies (esperemos que no te empaches con tanta cookie 😊)