Home

How to deploy a React application into Sharepoint Online?

%3CLINGO-SUB%20id%3D%22lingo-sub-1230597%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20deploy%20a%20React%20application%20into%20Sharepoint%20Online%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1230597%22%20slang%3D%22en-US%22%3ECan%20you%20elaborate%20more%20on%20what%20you%20are%20trying%20to%20achieve%3F%20By%20the%20way%2C%20take%20a%20look%20at%20SharePoint%20Framework%2C%20the%20recommended%20development%20model%20for%20SharePoint%20Online%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1230617%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20deploy%20a%20React%20application%20into%20Sharepoint%20Online%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1230617%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%20It%20all%20depends%20on%20what%20development%20model%20did%20you%20take.%3CBR%20%2F%3EThe%202%20most%20common%20are%20Provider%20Hosted%20Application%20and%20SPFx.%3CBR%20%2F%3EProvider%20hosted%20is%20generally%20a%20web%20app%20with%20access%20to%20SharePoint%2C%20SPFx%20takes%20the%20form%20of%20webparts%20and%20customizations%20to%20modern%20SharePoint%20experience%20pages%2C%20and%20is%20usually%20entirely%20client-side%20based.%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fget-started%2Fbuild-a-hello-world-web-part%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fget-started%2Fbuild-a-hello-world-web-part%3C%2FA%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fsp-add-ins%2Fget-started-creating-provider-hosted-sharepoint-add-ins%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fsp-add-ins%2Fget-started-creating-provider-hosted-sharepoint-add-ins%3C%2FA%3E%3CBR%20%2F%3Eregards%3CBR%20%2F%3EKarol%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1230924%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20deploy%20a%20React%20application%20into%20Sharepoint%20Online%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1230924%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F60%22%20target%3D%22_blank%22%3E%40Juan%20Carlos%20Gonz%C3%A1lez%20Mart%C3%ADn%3C%2FA%3E%26nbsp%3BIn%20local%20folder(Pc%20or%20VisualStudio%20code)%20we%20created%20a%20sample(Search%20functionality)%20React%20JS%20Application.%20Its%20running%20in%20Localhost%20server.%20Now%20we%20need%20some%20data%20points%20on%20how%20we%20can%20host%20this%20External%20application%20within%20Sharepoint.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1230982%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20deploy%20a%20React%20application%20into%20Sharepoint%20Online%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1230982%22%20slang%3D%22en-US%22%3EYou%20cannot%20host%20a%20React%20App%20in%20SPO%20in%20the%20way%20it%20seems%20you%20want.%20You%20have%20two%20options%20here%3A%3CBR%20%2F%3E-%20Rebuild%20your%20App%20as%20a%20SPFx%20Solution%20(Recommended)%3CBR%20%2F%3E-%20Rebuild%20your%20App%20as%20a%20SPO%20Add-in%20(Not%20recommended)%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1231289%22%20slang%3D%22es-ES%22%3ERe%3A%20How%20to%20deploy%20a%20React%20application%20into%20Sharepoint%20Online%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1231289%22%20slang%3D%22es-ES%22%3EHi%3CBR%20%2F%3E%3CBR%20%2F%3EAkhil%2C%20You%20have%20to%20obtain%20the%20app%2C%20for%20example%20in%3CBR%20%2F%3Emy%20case%2C%20I%20have%20used%20this%20comands%3A%20gulp%20clean%3CBR%20%2F%3Egulp%20build%3CBR%20%2F%3Egulp%20bunde%20--ship%3CBR%20%2F%3Egulp%20package-solution%20--ship%3CBR%20%2F%3E%3CBR%20%2F%3EAfter%20this%2C%20you%20will%20have%20a%20.sppkg%20file.%20%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3EYou%20must%20leave%20this%20file%20in%20the%20catalog%20of%20your%20SharePoint%3A%20%3CA%20href%3D%22https%3A%2F%2Fxxxxxxxxxxxxxx-admin.sharepoint.com%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fxxxxxxxxxxxxxx-admin.sharepoint.com%2F%3C%2FA%3E%20%26gt%3B%20More%20features%20%26gt%3B%20Apps%20%26gt%3B%20App%20catalog%20Once%20the%20file%20is%20part%20of%20the%20catalog%2C%20set%20the%20app%20rights%20and%20after%20that%20go%20to%20the%20your%20sharepoint%20page%20%26gt%3B%20Settings%20an%20app%20%26gt%3B%20Select%20this%20app%20And%20thats%20all%2C%20following%20this%20steps%20a%20new%20component%20will%20appear%20with%20your%20app.%3CA%20href%3D%22https%3A%2F%2Fxxxxxxxxxxxxxx-admin.sharepoint.com%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fxxxxxxxxxxxxxx-admin.sharepoint.com%2F%3C%2FA%3E%20%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1231855%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20deploy%20a%20React%20application%20into%20Sharepoint%20Online%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1231855%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F535940%22%20target%3D%22_blank%22%3E%40vcima%3C%2FA%3E%26nbsp%3BThe%20React%20application%20we%20are%20running%20is%20NPM%20builded.%20will%20this%20support%20%22gulp%22.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1232023%22%20slang%3D%22es-ES%22%3ERe%3A%20How%20to%20deploy%20a%20React%20application%20into%20Sharepoint%20Online%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1232023%22%20slang%3D%22es-ES%22%3E%3CP%3E%3CBR%20%2F%3EThe%20most%20important%20is%20to%20create%20the%20file%3A%20.sppkg%2C%20obviously%20the%20way%20to%20create%20this%20file%20depends%20on%20your%20tools.%3C%2FP%3E%3CP%3EIn%20my%20case%20I%20have%20developed%20the%20component%20with%20yeoman%2C%20I%20have%20followed%20this%20steps%3A%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fes-es%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fget-started%2Fbuild-a-hello-world-web-part%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fes-es%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fget-started%2Fbuild-a-hello-world-web-part%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERegards!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1230436%22%20slang%3D%22en-US%22%3EHow%20to%20deploy%20a%20React%20application%20into%20Sharepoint%20Online%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1230436%22%20slang%3D%22en-US%22%3E%3CP%3EI%20created%20a%20sample%20React%20application%20running%20in%26nbsp%3B%3CA%20href%3D%22http%3A%2F%2Flocalhost%3A3000%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttp%3A%2F%2Flocalhost%3A3000%2F%3C%2FA%3E%26nbsp%3B.%20Now%20this%20application%20should%20run%20within%20sharepoint.%20what%20is%20the%20procedure%3F%20can%20any%20one%20suggest%20a%20solution.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1230436%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3Eto%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Highlighted
Occasional Contributor

I created a sample React application running in http://localhost:3000/ . Now this application should run within sharepoint. what is the procedure? can any one suggest a solution.

7 Replies
Highlighted
Can you elaborate more on what you are trying to achieve? By the way, take a look at SharePoint Framework, the recommended development model for SharePoint Online
Highlighted

Hi, It all depends on what development model did you take.
The 2 most common are Provider Hosted Application and SPFx.
Provider hosted is generally a web app with access to SharePoint, SPFx takes the form of webparts and customizations to modern SharePoint experience pages, and is usually entirely client-side based.
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-p...
https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/get-started-creating-provider-hosted-shar...
regards
Karol

Highlighted

@Juan Carlos González Martín In local folder(Pc or VisualStudio code) we created a sample(Search functionality) React JS Application. Its running in Localhost server. Now we need some data points on how we can host this External application within Sharepoint.

Highlighted
You cannot host a React App in SPO in the way it seems you want. You have two options here:
- Rebuild your App as a SPFx Solution (Recommended)
- Rebuild your App as a SPO Add-in (Not recommended)
Highlighted
Hi Akhil,

You have to obtain the app, for example in my case, I have used this comands:
gulp clean
gulp build
gulp bunde --ship
gulp package-solution --ship

After this, you will have a .sppkg file.

You must leave this file in the catalog of your SharePoint:
https://xxxxxxxxxxxxxx-admin.sharepoint.com/ > More features > Apps > App catalog

Once the file is part of the catalog, set the app rights and after that go to the your sharepoint page > Settings > Add an app > Select this app

And thats all, following this steps a new component will appear with your app.


Highlighted

@vcima The React application we are running is NPM builded. will this support "gulp".

Highlighted


The most important is to create the file: .sppkg, obviously the way to create this file depends on your tools.

In my case I have developed the component with yeoman, I have followed this steps:

https://docs.microsoft.com/es-es/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-p...

 

Regards!