Just like any other typical Angular 2 project with webpack, package and build system in this project has two separate webpack configuration files apart from a common configuration file shared by both dev configuration and production configuration.
List of articles in this series
In addition to the regular webpack configuration for any Angular 2 application, I have made some changes to make SharePoint happy.
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 Angular 2 development and production build – SP Ng2 SPA Part 4 (This article)
5. Downloading source code and deployment steps – SP Ng2 SPA Part 5
6. Practical difficulties and lessons learnt on Single Page App for SharePoint Online with Angular2 and Typescript – SP Ng2 SPA Part 6
Key Webpack Configurations
Copy Static Assets
This application has a folder named “static” which contains images and a css files. Although these files can also be part of the regular webpack build system, I have explicitly made it as assets that has to be copied to build folder without any transformation. At this point, having the images and css inside the static folder may not be a right use case, but in the future if you require any files that need to be moved from dev environment to SharePoint, then placing the files into this folder will be moved to SharePoint as-is during the build process. Moving static assets require an additional webpack plugin named “copy-webpack-plugin”. The below is the extract from webpack.common.js
Inject reference to newly created Js files in SharePoint Wiki Page
In this project, I have also included a SharePoint wiki page named “Employee.aspx” with necessary place holders to inject the compiled Angular Code. During the build process, these place holders will be replaced by webpack with necessary reference to newly compiled js files and this file (“Employee.aspx”) will be included as a part of build output. Once deployed to SharePoint, accessing the file “Employee.aspx” will have the look and feel of SharePoint with the default header and quick launch bar.
Webpack Configuration
Placeholder in Employee.aspx
Switching file extension from html to aspx for index file
SharePoint Online has some restrictions in terms of allowed file types. By default, .html pages deployed to SitePages will be downloaded instead of rendering the content in browser while we try to access those files. To avoid this behaviour, the index.html page has to be renamed to index.aspx before it is being deployed to SharePoint. Although this approach works without any issues from a technical stand point, one main drawback is, this page won’t have the look and feel of SharePoint as this would be running as a standalone application. If the intention is to have a custom branded independent app, then this approach would provide the raw structure that is required for full blown customized branding. If your application has to behave like a regular SharePoint Page, then the index.aspx has to include all the necessary placeholders that are required by a typical SharePoint Page.
Webpack command Line arguments in pakage.json
"scripts": {
"start": "webpack-dev-server --inline --progress --port 5000",
"build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
}
What’s Next?
In the next article, I would cover the details on how to download the source code and make changes to perform build and deployment
Leave a comment