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.

Prerequisites:
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.
D:\Project\<ProjectName>\<ProjectName>\
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)
description:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\Project\SampleSPHostedApp\SampleSPHostedApp\package
.json:
{
  "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 (
      <div>
        <h1>Hello from Test123!</h1>
      </div>
    );
  }
}
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";

ReactDOM.render(
<HelloWorld />, 
document.getElementById("message")
);

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"] })
    .bundle()
    .on("error", function(err) {
      console.error(err);
      this.emit("end");
    })
    .pipe(source("bundle.js"))
    .pipe(gulp.dest("./Scripts/build"));
});

gulp.task("watch", ["build"], function() {
  gulp.watch("*.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 (
    gulp
      .src("./Scripts/build/bundle.js")
      // Minify the file
      .pipe(uglify())
      // Output
      .pipe(gulp.dest("./Scripts/build/js"))
  );
});

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>
</asp:Content>

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

3 thoughts on “SharePoint Hosted App with React

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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.