Sp-dev-docs: Using my SPA in SPFx

[aslanovsergey]

Category

• [x] Question
• [ ] Typo
• [ ] Bug
• [ ] Additional article idea

Hello, I'm building SPA in React which is going to work in different environments (SPFx, Teams, O365 Web App, Mobile app). The question is about how I should import my SPA? I use typescript and scss modules in my SPA.

Currently I have following concerns:

• Should I import transpiled app or can import source (tsx)?
• What I need for scss modules to be generated?

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[andrewconnell]

SPFx isn't an environment, it's a framework. SharePoint [Online] is an environment. You can use SPFx to build a web part that's hosted in SharePoint. These can also be deployed as custom Microsoft Teams tabs.

If you build it as an SPFx web part, it can be surfaced as a custom tab in Microsoft Teams. That knocks out two of your use cases. In this case, all source (TypeScript & SCSS) is in the SharePoint Framework component source. The build & packaging process only deploys the resulting JS bundle that includes the transpiled app code & CSS. See this in the docs. The Getting Started section has a page that shows how the web part can be used in Teams as well.

What's an "Office 365 web app"? There's no such thing... or are you talking about a custom web app? You don't deploy custom web apps to Office 365.

If you're trying to create one single source that's used everywhere, you're going to have to figure out:

1. where to store the built SPA
2. how to dynamically load it within a SPFx web part

Your question says what you're building vs. what you're trying to achieve. I personally find it easier if the question starts the other way around. Building your SPA as a custom SPFx web part, you can deploy it as a Full Page App in SharePoint Online, custom tab in MSFT Teams & it can be used from the SharePoint mobile app. Your "O365 web app" to me is a full page app page as the app is hosted & surfaced from SPO.

[aslanovsergey]

@andrewconnell Thanks. But I'm rather about how to import my SPA so that it works. Since I use it in different places (SharePoint, Office 365, Mobile, and list can go on) I'm building a base app as a dedicated project without concrete implementations of some parts. For example it's going to be an import in SPFx as any other node_module.

O365 Web App, I don't know how this thing is called exactly but it's something you see as Outlook, Excel, Word tiles in O365. Yes, hosting is on you here.

Since I don't have access to build process in SPFx I'm raising this question.

[andrewconnell]

@aslanovsergey said:

O365 Web App, I don't know how this thing is called exactly but it something you see as Outlook, Excel, Word tiles in O365. Yes, hosting is on you here.

Ah... you're referring an _Office Add-in_. At the moment, MSFT has talked about adding the capability to allow SPFx web parts to be used as Office Add-ins, but there's no developer preview/beta/time frame around that ATM.

I understand what you're trying to do... there's nothing special with any of these technologies/environments (SPFx / Teams / Office Add-ins / mobile) that's going to help/prohibit you It's just standard web tech at that point where you have different options. My comment above focuses on the approach of picking SPFx as the core. If you build it as an SPFx web part, using React, you can leverage 75% of the environments (SPO/Teams/Mobile) you're targetting with one single codebase. The only exception is Office Add-in, but that has been discussed as coming in the future. Personally, this would be your best approach - it's how I'm building an app internally to help me manage my biz. The only downside: doesn't work in Outlook today since Office Add-ins are separate.

Another option would be to build the SPA completely independent of each of these environments, host the built JS bundle somewhere (ie: your own CDN), then have a shim in each of those environments that dynamically loads the bundle.

_I've tagged this as a discussion as that's more what this is about now... it's more of a design decision you need to decide on at this point._

[SinghGurd]

@andrewconnell I note the point '_you can deploy it as a Full Page App in SharePoint Online_'. Is there any built-in support for this in SPFX to run the app deployed to a SharePoint page via SPFX web part in Full Screen mode? Or dom-manipulation is the only option.

[aslanovsergey]

@andrewconnell Let's say I want to develop components library which is used in different projects including my SPFx webpart. This library is separate node package. And the components library is using scss and css modules. As far I know css modules are generated at the moment of building of final app (SPFx web part in our case). And the question is will it work and if not what actions must be undertaken?

[andrewconnell]

@SinghGurd said:

Is there any built-in support for this in SPFX to run the app deployed to a SharePoint page via SPFX web part in Full Screen mode? Or dom-manipulation is the only option.

If by "full screen mode" you mean also taking over the page header and left navigation, then no... there's no option for this. You'd lose all context of the site you're in. If that's your goal, why build it as a SPFx web part in the first place? Just deploy your SPA anywhere with its own HTML page & point to the page from a custom navigation element. As for DOM manipulation, that's not recommended nor is it supported. If you go that route, you're risking MSFT updating something in the future that breaks your solution as you are no longer following the customization contract they provide.

[andrewconnell]

@aslanovsergey said:

As far I know css modules are generated at the moment of building of final app (SPFx web part in our case). And the question is will it work and if not what actions must be undertaken?

Correct, in SPFx the CSS modules are generated at build time, not runtime. You can do this in your own component, implementing CSS modules so the SCSS in your custom NPM package generates CSS modules prior to publishing your NPM package.

If you're asking "will the SPFx build pipeline generate the CSS modules from the SCSS in my NPM package", I think the answer is no. The SPFx build process is only looking at SCSS files with a specific naming convention in the project's src folder, not in the node_modules folder. Thus, you'll need to build the CSS modules yourself first.

[msft-github-bot]

Closing issue as "answered". If you encounter similar issue(s), please open up a NEW issue. Thank you.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues