There are at least three ways to create SPA in SharePoint Online:
- Provider hosted app (Useful if you have server-side logic)
- SPA SPFX webpart (Not a very good option as of August 2019), but will iprove later on
- Custom SPA solution using HTML + CSS + JavaScript
Let's talk about Approach #3:
Custom SPA solution using HTML + CSS + JavaScript
Steps
- Create an HTML page. Call it
SPA.HTML
. Add some Hello world HTML to the page.
- Rename the page to have .ASPX extension. Example:
SPA.ASPX
- Upload your
SPA.ASPX
to /SiteAssets/
library in SharePoint
- Navigate to your page
https://tenant.sharepoint.com/siteAssets/spa.aspx
- You will see that your custom page takes up the entire screen and effectively, it's the real SPA.
- Done.
Your SPA.ASPX
page will need some CSS and JavaScript files. Go ahead and upload them to the same /SiteAssets/
library
Things to consider
- With this approach you are free to choose any freamework you want. React, Angular, Vue. Whether to choose TypeScript or not - your choice.
- This has nothing to do with SPFx. SharePoint will just act as a web server for hosting and serving your custom HTML files.
- make sure your main HTML file has .aspx extension instead of HTML
- It does not really matter where you upload your files. For example, you can use
/_catalogs/masterpage/
folder.
Sample SPA project
You can check out a sample SPA project. It used AngularJS, with zero typescript: https://github.com/Zerg00s/customSPA.
Just clone it and run DEPLOY_ARTIFACTS.bat
to deploy it.
