{"id":2415,"date":"2016-08-30T10:00:50","date_gmt":"2016-08-30T08:00:50","guid":{"rendered":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/?p=2415"},"modified":"2018-07-18T09:57:13","modified_gmt":"2018-07-18T07:57:13","slug":"sharepoint-framework-entendiendo-la-solucion","status":"publish","type":"post","link":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/sharepoint-framework-entendiendo-la-solucion\/","title":{"rendered":"SharePoint FrameWork: Entendiendo la soluci\u00f3n"},"content":{"rendered":"

\"\"<\/p>\n

Una vez tenemos listo el entorno (leer el art\u00edculo anterior<\/a>) vamos a entender cada parte que tiene la soluci\u00f3n. Para ello, en primer lugar vamos a abrir la carpeta donde se ha descargado la soluci\u00f3n mediante Yeoman<\/strong>.<\/p>\n

Para estas demos utilizar\u00e9 Visual Studio Code, pero puedes elegir tu IDE \u00a0preferido (Visual Studio, Brackets, etc..)
\n\"SolucionNuevoFramework\"<\/p>\n

El primer fichero de los importantes es el fichero gulpfile.js. Por si no lo conoc\u00e9is, \u00e9ste es el fichero de configuraci\u00f3n para poder ejecutar Gulp.<\/p>\n

\u00bfQu\u00e9 es Gulp?<\/strong><\/h2>\n

\u00a0<\/strong>Es \u00abTask Runner\u00bb \u00a0de tareas Open Source\u00a0para Javascript. En Gulp podemos ejecutar casi cualquier tarea que puedas hacer de forma manual<\/strong>: compilar ficheros SASS, compilar typescript, ejecutar test, publicar ficheros, verificaci\u00f3n 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\u00eda a d\u00eda.<\/p>\n

Dentro de este Framework, el equipo de producto ha implementado unas tareas predeterminadas:<\/strong>\u00a0falta documentaci\u00f3n sobre todas las tareas que hay disponibles. A continuaci\u00f3n, comentaremos las imprescindibles para la utilizaci\u00f3n del framework.<\/p>\n

La primea de las tareas que hacemos uso es la de \u00a0unificar todos el JavaScript en un \u00fanico fichero<\/strong> y levantar un servidor en local para poder depurar. Para hacer esto debemos poner la siguiente instrucci\u00f3n:\u00a0 gulp serve<\/strong>.<\/p>\n

Otra de las tareas que tiene el FrameWork es la de generar la App. Para ello \u00a0hay que ejecutar la siguiente instrucci\u00f3n: gulp package-solution<\/strong>. Al ejecutar este comando dentro de nuestra soluci\u00f3n, se crea una carpeta \u00absharepoint\u00bb y dentro de la misma est\u00e9 el fichero con extensi\u00f3n .sapp. Este comando genera el paquete pero no \u00abcompila\u00bb la soluci\u00f3n, es decir, si previamente no hemos ejecutado gulp serve nuestra soluci\u00f3n estar\u00e1 vac\u00eda porque no hay ning\u00fan fichero javascript.<\/p>\n

Por \u00faltimo, otra de las tareas es c\u00f3mo subir los ficheros javascript a un CDN de Azure (en los siguientes art\u00edculos ya comentaremos cu\u00e1ndo y por qu\u00e9 utilizar estos CDN) . Para ello dentro de la carpeta config<\/em> disponemos de un fichero deploy-azure-storage.json. En dicho fichero ponemos la configuraci\u00f3n de nuestro blob storage de Azure. Una vez tenemos configurado \u00e9sto, ejecutamos las siguientes intrucciones: \u00a0gulp –ship (se encarga de compilar y minimizar la soluci\u00f3n) y gulp deploy-azure-storage.<\/p>\n

Carpeta SRC<\/strong><\/h2>\n

Dentro de la carpeta \u00absrc\u00bb 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\u00f3n.<\/p>\n

Cada Webpart esta formado por :<\/p>\n