1

Our team has created a React SPA that is js based as opposed to ts. From what I've seen, creating and utilizing a webpart requires typescript. This project is fairly large so I guess I'm just wondering what our best option would be to get this SPA into Sharepoint. Is converting the project to typescript the best option? Are there other options to deploy a SPA into Sharepoint without creating a webpart?

The other thing with this is we would like to have a test site where this runs on its own, outside of Sharepoint. Would we essentially need 2 different code bases to do that?

Improve this question
3
  • Is it SharePoint Online? Or on-prem?
    – Denis Molodtsov
    Aug 16, 2019 at 17:30
  • @DenisMolodtsov online
    – jrichmond4
    Aug 16, 2019 at 17:50
  • In order to answer your second question about separate code bases we need to know more about your code. Does your SPA call some APIs? How does it authenticate with these APIs? Does your SPA have a back-end? What is this back-end, etc. You minght need to create a separate question so that we can answer it fully.
    – Denis Molodtsov
    Aug 16, 2019 at 19:55

1 Answer 1

Reset to default
0

There are at least three ways to create SPA in SharePoint Online:

  1. Provider hosted app (Useful if you have server-side logic)
  2. SPA SPFX webpart (Not a very good option as of August 2019), but will iprove later on
  3. 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.

enter image description here

Improve this answer
2
  • 1
    Thanks Denis. The code does have a backend REST API that it calls for data. Initial authentication into the SPA is done with Azure AD and the react-aad-msal plugin, although I was thinking this may have been able to be replaced with the user context from SPFX. If we went with the solution you described above I'm assuming that would not be possible, and the user would have to reauthenticate, correct? What is the provider hosted app you mentioned?
    – jrichmond4
    Aug 19, 2019 at 14:34
  • Provider hosted app is basically an external website that can be hosted, for example, in IIS. This site is surfaced in SharePoint via an iFrame. In your case it might be a good choice because you can reuse almost all of your code.
    – Denis Molodtsov
    Aug 21, 2019 at 3:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.