2558 Views
4 minute read
Categories
SharePoint

Use ReactJS to Connect to SharePoint (Online/On Premises) from Localhost

Introduction:

Traditionally, SharePoint custom applications are created using SPFx in SharePoint 2016 and 2019. However, this needs additional server configuration and the react version/SPFx version is also very old.

Today, we can easily use ReactJS to create single page custom applications both for on-prem and online SharePoint covering 2013,2016 and 2019. Although, currently it applies only for SPO classic sites, the ease of development and deployment makes the choice of ReactJS very popular.

The effort here is to describe a step by step approach to create a custom application using latest ReactJS and PnPJS. Hope this will serve as a quick reference to the developers interested in building custom app in SPO.

Project Configuration

  1. Create a new React App using the following command
    npx create-react-app my-app
    cd my-app    
    
  2. Open the project in VSCode or WebStorm or any other editor
  3. Open the terminal
  4. Run the below command
    npm install concurrently sp-rest-proxy –-save-dev
    
  5. A successful installation can be confirmed when the below shows up in package.json Use ReactJS to Connect to SharePoint (Online/On Premises) from Localhost
  6. The following command can be run to use pnp js and bootstrap
    npm install @pnp/sp react-bootstrap
  7. Create “api-server.js” file at the root of the solution where package.json file resides
  8. Open “api-server.js” file and add the below code block
    const RestProxy = require('sp-rest-proxy');
    const settings = {
      configPath: './config/private.json', 
      // Location for SharePoint instance mapping and credentials
      port: 8081, // Local server port
      //staticRoot: 'node_modules/sp-rest-proxy/static', 
      // Root folder for static content
    };
    
    const restProxy = new RestProxy(settings);
    restProxy.serve();
    
    
  9. Add the below lines under the package.json scripts block
    "proxy": "node ./api-server.js",
    "startServers": "concurrently --kill-others \"npm run proxy\" \"npm run start\""
    
  10. Confirm that the package.json scripts block appears ike the one below
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject",
      "proxy": "node ./api-server.js",
      "startServers": "concurrently --kill-others \"npm run proxy\" \"npm run start\""
    }
    
  11. Add below code block to the end of package.json
    "proxy": "http://127.0.0.1:8081"
    

Successful implementation of all the above changes can be confirmed when packge.json file appears like the one below

{
  "name": "sp-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@pnp/sp": "^2.0.5",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.4.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "proxy": "node ./api-server.js",
    "startServers": "concurrently --kill-others \"npm run proxy\" \"npm run start\""
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "concurrently": "^5.2.0",
    "sp-rest-proxy": "^2.11.1"
  },
  "proxy": "http://127.0.0.1:8081",
  
}

Setup connection to SharePoint

Open terminal to project folder and run the below command.

npm run proxy

Provide the SharePoint site URL, username and password when prompted to start the proxy at localhost:8081. Open http://localhost:8081 in browser and validate that the rest API page can be seen.

Use ReactJS to Connect to SharePoint (Online/On Premises) from Localhost

A rest url can also be provided to to validate the connection. “_api/web”

Use ReactJS to Connect to SharePoint (Online/On Premises) from Localhost

Setup @Pnp/Sp

Open App.js file and add the below constructor.

constructor(props) {
  super(props);

  sp.setup({
    sp: {
      headers: {
        Accept: 'application/json;odata=verbose',
      },
      baseUrl: 'http://localhost:3000/',
    },
  });
}

Connect to SharePoint from Application

Create a new method to get current user information in App.js file.

getCurrentUser = () => {
   sp.web.currentUser.get().then((currentUser) => {
     console.log('currentUser', currentUser);            
   });  
};

Call the above method in componentDidMount().

Run the project

Open terminal in and run below command.

npm run startServers

Open console of http://localhost:3000 and to see current user information from SharePoint.

Takeaways

We can use this concept to create any custom application in SharePoint where particularly we don’t have an option to create a SPFx solution and want to use ReactJS or any other latest JavaScript framework.

Feel free to comment of get in touch in case you need any clarifications or further help.

Saikat Ojha

About Saikat Ojha

Saikat Ojha is the Technical Architect and a Microsoft Certified Professional at Netwoven Inc., with 9.5 years of industry experience. His extensive knowledge in analysis, design, development, testing, and maintenance of object-oriented and client-server multi-tier web applications can steer clear any technical challenges. He also holds strong experience in Client-Side Object Model with CAML query, JavaScript and jQuery. Prior to Netwoven, he has worked with several IT companies as a skilled Web Developer.

He is a detailed oriented performer and holds a B. Tech Degree in Computer Science from WBUT. He is a core player and enthusiastically drives his team through any kind of task.

LinkedinTwitterFacebook

Leave a Reply

Your email address will not be published. Required fields are marked *




Enter Captcha Here :