SharePoint Hosted App with React

What is SharePoint Hosted Add In ?
Click here to know about SharePoint Hosted Add In

As we know that SharePoint hosted add in supports the java script. I was thinking Can we implement any java script framework like React, Angular, Vue with SharePoint Hosted Add In ? So, i have created a demo to implement SharePoint Hosted Add In with React framework.
We need to configure certain things to take the benefits of the react in SharePoint Hosted Add In.

1. Visual Studio Code
2. Visual Studio 2017
3. Node Js
Download Visual Studio Code , Visual Studio, Node
Let’s start do some configuration

Step 1 : Open visual Studio -> File -> New-> project->Select Add-ins under office/SharePoint->Enter Project and Solution name->OK
Step 2 : Select SharePoint Hosted App -> Next
Step 3 : Select SharePoint Online (you can select SharePoint 2013,2016,2019)
Step 4 : Select or enter the URL of SharePoint Site
Step 5 : Finish
You can see project structure in solution explorer as below.

Step 6 : Install Node.js
Open node js command prompt
Go to SharePoint project which we have created.
Check Node version using node -v
Check NPM version using node -v

D:\Project\SampleSPHostedApp\SampleSPHostedApp>node -v
v10.15.3 (or Newer)

D:\Project\SampleSPHostedApp\SampleSPHostedApp>npm -v
6.9.0 (or newer)

Step 7 : Create package.json file using below command
Enter below command in node js Command prompt
npm init

\D:\Project\SampleSPHostedApp\SampleSPHostedApp>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (samplesphostedapp)
version: (1.0.0)
git repository:
license: (ISC)
About to write to D:\Project\SampleSPHostedApp\SampleSPHostedApp\package
  "name": "samplesphostedapp",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  "author": "",
  "license": "ISC"
Is this OK? (yes)

Step 8 : Install npm packages using node command prompt
npm install –save-dev @babel/preset-react
npm install –save-dev @babel/preset-es2015
npm install –save-dev babelify @babel/core
npm install –save-dev browserify
npm install –save-dev gulp
npm install –global gulp

npm install del
npm i gulp-uglify
npm install react react-dom

npm install –save-dev run-sequence
npm i vinyl-source-stream

You can install all packages in one shot as below
npm install –save-dev @babel/preset-react @babel/preset-es2015 babelify @babel/core browserify gulp

package.json file will look like as below.

  "name": "samplesphostedapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
    "gulp": "^3.9.0",
    "vinyl-source-stream": "^1.1.0"
  "dependencies": {
    "del": "^5.0.0",
    "gulp-uglify": "^3.0.2",
    "react": "15.0.2",
    "react-dom": "15.0.2",
    "run-sequence": "^2.2.1"

Step 9 : Create a new file Hello-World.jsx under Scripts folder.
Copy below code in newly created file.

import React from "react";
import helloWorld2 from "./hello-world2";
class HelloWorld extends React.Component {
  render() {
    // return <h1>Hello from helloworld 1 !</h1>
    return (
        <h1>Hello from Test123!</h1>
export default HelloWorld;

Step 10 : Create a new file app.jsx under Scripts folder
Copy below code in app.jsx file.

import HelloWorld from "./hello-world";
import helloWorld2 from "./hello-world2";
//import HelloWorld from './hello-world-es5';
import React from "react";
import ReactDOM from "react-dom";

<HelloWorld />, 

Step 11: Create a gulpfile.js
Copy below code in gulpfile.js

var gulp = require("gulp");
var browserify = require("browserify");
var babelify = require("babelify");
var source = require("vinyl-source-stream");
var uglify = require("gulp-uglify");
var pipeline = require("readable-stream").pipeline;
var del = require("del");
var runSequence = require("run-sequence");

gulp.task("build", function() {
  return browserify({
    entries: "./Scripts/app.jsx",
    extensions: [".jsx"],
    debug: true
    .transform("babelify", { presets: ["es2015", "react"] })
    .on("error", function(err) {

gulp.task("watch", ["build"], function() {"*.jsx", ["default"]);

gulp.task("compress", function() {
  gulp.src("dist/bundle.js"), uglify(), gulp.dest("dist");

// gulp.task("default", ["watch"]);
// Clean output directory
gulp.task("clean", () => del(["./Scripts/build"]));
// Gulp task to minify all files
gulp.task("default", ["clean"], function() {
  runSequence("watch", "build", "scripts");

// Gulp task to minify JavaScript files
gulp.task("scripts", function() {
  return (
      // Minify the file
      // Output

Step 12 : Run gulp command in node command prompt.
User can see below output in command Prompt

PS D:\StridelyProject\SampleSPHostedApp\SampleSPHostedApp> gulp
[16:23:13] Using gulpfile D:\StridelyProject\SampleSPHostedApp\SampleSPHostedApp\gulpfile.js
[16:23:13] Starting 'clean'...
[16:23:13] Finished 'clean' after 90 ms
[16:23:13] Starting 'default'...
[16:23:13] Starting 'build'...
[16:23:13] Finished 'default' after 19 ms
[16:23:16] Finished 'build' after 2.42 s
[16:23:16] Starting 'watch'...
[16:23:16] Finished 'watch' after 7.18 ms
[16:23:16] Starting 'build'...
[16:23:17] Finished 'build' after 1.36 s
[16:23:17] Starting 'scripts'...
[16:23:21] Finished 'scripts' after 3.44 s

Once “gulp” command is executed successfully.
bundle.js” file is created under Scripts/build. This file indicates bundle of all the code of react in one file.
“bundle.js” file is created under Scripts/build/js.
This file indicates the minified version of the bundle.js.

Step 12: Open default.aspx in visual studio code.
Copy below code and replace it with last <Asp:content> tag.

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <div id="message"></div>
    <%--<script src="../Scripts/build/bundle.js"></script>--%>
    <script src="../Scripts/build/js/bundle.js"></script>

Step 13 : Deploy SharePoint hosted app and open it in browser.
Use Can see below output in add in.

Feedback is always welcome.
Happy Coding:)

Leave a Reply to armin Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.