How to deploy a React application into Sharepoint Online?

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.

  • to
7 Replies
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

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

@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.

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)
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.


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


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!