Client Side Development to SP2013 is not new, but in this Post I’ll try explain my experience with develop a Client Solution App with same technology that are use with SPFx,  Typescript, React, React-Ui-Fabric-React Components, I use the @PnP/PnPjs to access Lista Data.

SPFx is supported in SP2016 (Feature Pack 2) and SP2019 but not in SP2013.

First Step is create a Type Script React Project, I use the create-react-app with create-react-app-ts script  this will scaffold a project with tools necessary to create a React App with TypeScript

If you don’t have installed create-react-app  you must install with:

npm install create-react-app -g 

Can find more information here:

https://www.npmjs.com/package/create-react-app

after you have to install the react-scripts-ts with:

npm i react-scripts-ts -g

Can find more information here:

https://github.com/wmonk/create-react-app-typescript

Finally create the project:

create-react-app  <projectName> –scripts-version=react-scripts-ts

I use MAC OS X as my principal environment for development and for simplify the creation of a React Project with TypeScript I create a simple bash shell script that only receive a project name as parameter.

Here the my script:

CreateReactTS.sh . that have the following code:

create-react-app $1 –scripts-version=react-scripts-ts

•  Microsoft-ui-fabric-react https://developer.microsoft.com/en-us/fabric
• @PnP/PnPj https://pnp.github.io/pnpjs/

• React-Localization –  for MultiLanguage https://www.npmjs.com/package/react-localization

 

Project Organization:

Class to access SharePoint Data (services.ts) here are defined all methods to get data from SharePoint,  I use @PnP/PnPjs .

Note on use@PnP/PnPjs  , we are using SharePoint 2013 REST API’s,  first we have to setup@PnP/PnPjs .:

This is required in SharePoint 2013.

Sample of my service.ts class:

I use a class for some staff I use in my components, that I called util.ts

Here my Application  App.tsx

 

Let’s compile my Application and prepare to deploy to SharePoint.

First thing is define a environment var called PUBLIC_URL to the location of SharePoint library where the build directory is replicated.

export PUBLIC_URL = “/Shared%20Documents/App/build”

On build process all path of our files, css, jscript, etc.. are reference to this location in the index.html.

Next, build the App.

npm run build

go to the build directory of your project and you will see the compiled files:

Open the project folder with File Explorer in Windows or Finder in MAC and copy all the content of build directory to your SharePoint Document Library.

In Document Library:

After I create a WebPart based on Content Editor WebPart, point to my Index.html

Upload the dwp file to WebPart Gallery and is ready to use. 🙂

Here my Sample: