I would like create a custom page in the SPO using SPA with HTML,CSS and JS. I was not able to find a way to start with I want complete page or Full Page. I want create like webpage with responsive to all devices.
4
-
Do you mean sections within a modern SharePoint Online page? e.g. web parts etc– Callum CrowleyJan 23 at 16:17
-
The true SPA where you take over the whole HTML and it's hosted in SharePoint Online is not officially supported and not recommended, but it's possible. The recommended approach is to create Webparts that are not SPA, but instead take up a specific area on a screen.– Denis MolodtsovJan 23 at 17:13
-
Ahhh I see, sounds like a hack. Surely a full page web part is more advisable? Is it really "customising SharePoint" if you're ripping everything out?– Callum CrowleyJan 23 at 18:05
-
I meant like .aspx page @CallumCrowley– striker92Jan 24 at 8:04
Add a comment
|
2 Answers
According to my research and testing, I recommend that you use SPFx to create web parts and put custom web parts on SharePoint Oline pages as needed to implement custom pages.
You can refer to this document to build the Web Part using SPFx: Build your first SharePoint client-side web part (Hello World part 1)
You have to use a regular SharePoint .aspx page with a Webpart, and then have your SPA loaded by this webpart. By using CSS, you can hide the extra SP stuff you don't want to show. I have an application that works this way. It's not optimal because all the SharePoint crap is loaded… but it's better than nothing.
In my case, I couldn't use SPFx with a "modern" page (because the app catalog was not available to me), so I used a Content Editor Webpart within a "classic" SharePoint webPart page. With this webpart you can load an .html page (built using NodeJS and webpack).
-
How about uploading .html .js. css file to style library and render into the page, Is it possible ? Jan 24 at 15:49
-
This isn't supported and can break whenever Microsoft push styling/markup changes to SharePoint: learn.microsoft.com/en-us/sharepoint/dev/solution-guidance/… Jan 24 at 17:05
-
@striker92: it's what I'm doing, I upload .html .css .js files to a document library, and then I call my index.html in my Content Editor webpart, and it loads my async components. As noted by Callum, it's not ideal and if you can use SPFx, it would be the preferable solution (in my case I couldn't use it).– AymKdnJan 24 at 20:01