Now let's see how can we bring TypeScript into the mix. I have been playing around with TypeScript for a while now and here is my basic development workflow:
1) Create a main app.ts file which will contain the primary code for my application or "WebPart". In addition, app.ts will also have import references to any custom or third party modules e.g. jQuery
3) Use tslint to check the quality of my TypeScript
5) Minify my app.js using gulp-uglify and rename it to app.min.js using gulp-rename
6) Upload the debug and minified files to the Style Library in SharePoint using gulp-spsave
Before we begin, if you are using Visual Studio 2015 like me, make sure you have the latest version of Node installed and Visual Studio is configured to use it. Here is an excellent tutorial on how to do this: How to configure Visual Studio 2015 with the latest version of Node.js and NPM
Now let us have a look at the important bits of my solution. I have uploaded the entire solution on GitHub here: https://github.com/vman/MyTypeScript
1) app.ts file:
Here is a list of all npm packages used in my solution. Notice the jQuery package, browserify and tsify use it to include jQuery in the final bundle as it is requested by my app.
5) Gulp tasks:
The watch-ts-upload-to-sp task looks for any changes in the .ts files (app.ts and User.ts). If any changes are noticed, it runs the upload-to-sp task.
The upload-to-sp task has dependencies chained up so that the tasks are run in the following order:
1) lint-ts to check the code quality of TypeScript
2) browserify to import all the required modules and create a single app.js bundle file
3) minify-js to create a minified file.
4) Finally, the upload-to-sp task runs to upload the app.js and app.min.js files to the Style Library.
(click to zoom)
A note on Typings:
I have included typings as an NPM package in my solution (have a look my package.json file) and then used the following commands to get the required typings in my project:
Thanks for reading!
From what I understand, the role of Node.js and NPM here is to just manage external packages for your JS based 'app' or 'webpart'. The node.js runtime is not being used since your app is going to be hosted on the SP online site ? (trying to get my head around these tools)
Also, the gulp task of upload to SharePoint here is only for DEV purpose I believe. So how do you translate all this in your deployment workflow. Say I have to deploy this to TEST,PROD environments, the build tasks for GULP will be different ?
Yes you are right that we are only using Node and Npm to manage packages here. The node web server cannot be used as we will be hosting everything in SharePoint Online.
About the deployment workflow, what we do is include the final js file (app.min.js) as part of the solution and deploy it to differrent environments as either a No code sandbox solution or through remote provisioning using the PnP provisioning engine.
Hope this helps.
Ah thought so..yup it helped..thanks !
Post a Comment