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.

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