With this post, I am starting a new series of articles on creating a Single Page App with Angular 2, performing CRUD Operation with SP PnP Core Js , packaging with webpack and hosting inside a SharePoint Online document library
As mentioned above , this is not a simple Hello World application, in-fact this can be used as Angular2 seed project for SharePoint based Single Page Apps. As the entire steps cannot be covered in a single article , its been logically split into multiple parts as shown below
2. SharePoint list data CRUD operation with PnP Core Js and Angular2 – SP Ng2 SPA Part 2
3. Angular2 routing inside SharePoint SitePages Document Library – SP Ng2 SPA Part 3
4. Configuring webpack for development and production build in SharePoint On-line Angular2 SPA – SP Ng2 SPA Part 4
5. Practical difficulties and lessons learnt on Single Page App for SharePoint Online with Angular2 and Typescript – SP Ng2 SPA Part 5
Final Output
In this first part we would be covering the environment setup and solution structure
Development Environment
As you might have expected, the development IDE is VS Code. You can also check out my list of favourite VS Code extensions which makes application development with Angular Js much easier. If you are completely new to Node Js , VS Code and Typescript please refer the blog posts “Installing and Configuring Node.Js and NPM” and “Installing Visual Studio Code and enabling IntelliSense for JavaScript ” by Sivarajan
The below is the list of node packages that are required for this application. In this list, in addition to Angular 2 , webpack and its dependent packages, I have also included “gulp-spsave” , to upload the webpack output files to SharePoint and “sp-pnp-js” to interact with SharePoint. As “spsave” relies on Gulp, you would require gulp in both local and global mode.
Solution Structure
The below is the folder structure of the application. This solution structure heavily relies on official Angular2 Style guide. The naming convention used for files and folders of this project is also in sync with current requirements of angular-cli (which helps to auto generate components , test files and injecting routing details within VS Code with third party Extensions for Angular 2). In addition to the project files, a static aspx file named “Employee.aspx” is also included in the project. This files is a standard SharePoint Online wiki page. A copy of this file would be moved to “dist” folder on every build after injecting the reference of newly built .js files. Having this file as the base file for Angular App provides an SharePointish look and feel like the above picture displayed in Final Output section. The “index.html” is converted to “index.aspx” by webpack at the time of build. This file provides provides the same functionality as “Employee.aspx” but without the branding and look and feel of SharePoint.
Some interesting aspects that are implemented in this app are
1. EmployeeAddComponent and EmployeeEditComponent shares the same html file (employee.component.html)
2. Both EmployeeAddComponent and EmployeeEditComponent implements a common custom interface named “IEmployee” which in turn implements Angular “OnInit”
3. CRUD Operation with SP PnP Js Core
4. Animation (loading) spinner for all http calls
5. App Notification with Office UI Fabric’s Message Bar
6. Bundling and build process with webpack
7. Deployment to SharePoint Online with Gulp Sp Save node module
SharePoint sync configuration
To perform upload to SharePoint, I tried node packages like gulp-spsync , gulp-spsync-creds and gulp-spsave. I settled down for gulp-spsave as this gives the flexibility to move content to any doc lib irrespective of the folder name maintained in the project. Only down side with gulp-spsave is , it requires username and password as an input for gulp task. As it provides an option to load that information from separate file, I have placed it in a separate module and ignored that folder from Git .
What’s next?
In the next article I’ll explain the CRUD operations with SP PnP Js core , and Entity Class to facilitate the data communication
Leave a comment