How to deploy a React application into Sharepoint Online?

Copper 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
10 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:



OMG I am so sorry to bother after 2 years but this is exactly what I'm trying to do right now. Do you mind share how it goes? Are you able to run react app within sharepoint? Thank you!


By any chance, if guys reach to any solution??

@ntnbnsl -- I found a workaround. Just 'npm run build' and take the contents of that build folder and drop into a folder on Sharepoint. That folder should include any static files and your root html page. Note: in your package.json file, your homepage (i think) matters. try ".", or try the url path of the SHarepoint folder the files live in. I fumbled through this workaround, but works okay for me. 

Now, everytime you want to make changes to the site, you will need to rebuld the site and drag/drop/replace those files in the Sharepoint folder.