Using ReactJS with Sharepoint Rest API - sharepoint

I'm trying to use the React JavaScript library with the SharePoint Rest API to display and edit SharePoint Lists. I've been able to get React to work inside of SharePoint, I'm using webpack-dev-server for development but it is difficult and time consuming. Currently I mock up data for SharePoint Rest API calls and develop my code on webpack-dev-server. When I get the code working. I compile the code for production and move the files to the SharePoint server. I then test the new functionality in SharePoint.
React needs to run inside of SharePoint to access the Rest API. I don't think it is possible to set up the webpack-dev-server on the SharePoint server because SharePoint doesn't use actual folders to store files. I tried to map a network drive on my windows computer to the SharePoint server but I was unable to get it to work.
I have just begun to work with JavaScript and React so I don't have much experience.
How can I make my development process easier?

Related

How can I convert a HTML template into a Node.JS web app

I'm starting out on my Node.JS journey and I discovered a fantastic boilerplate over at https://github.com/azouaoui-med/pro-sidebar-template. I'm unsure though how to turn the static html into a web app. Just wondering how someone with more experience would do this?
Do I take the html and translate it into a PUG template file? I'm guessing to then make the onclick / links actually run some code, i'd need to point them at the routes setup in the web app?
Sorry to ask such inexperienced questions, web apps seem to take a vastly different approach to the desktop apps i'm familiar with programming
I'm wanting to create a web app that runs on a server, which I will later put on the desktop via electron.
thanks
The project you have is using browser-sync which indirectly uses NodeJS to run a local server and host the web application files.
Do I take the HTML and translate it into a PUG template file?
I am not sure about this question unless you specifically want to use server-side rendering I am not sure I would recommend this to start with especially if you plan to later convert this to a desktop application.
[Note* - Assuming you are referencing this library PUGJS in statements above ]
Now For this requirement I'm wanting to create a web app that runs on a server, which I will later put on the desktop via electron.
This will require you to make your data serving layer which is most commonly called backend separate from that of the data viewing layer which is most commonly referred to as front-end. Thus a case for using the same data layer across different types of clients viz. A web application and/or A desktop application ( electron if you choose so )
Step 1 - Define what sort of web application architecture you want to follow or use. This will be based on your project and business requirements. From what information I have so far I would suggest a simple client-server architecture where your frontend or web-application is the client which makes REST API calls to the backend (API Server) and thus produces a meaningful result.
Step 2 - Start with the creation of 2 projects a frontend where your HTML, CSS JS, etc will be and a simple NodeJS script to serve this static web app when deployed on the server. I am going with NodeJS since the context of this question is suggesting the same.
Step 3 - The other project which will only be an API Server or Backend. This server will provide only REST API to the frontend. This server will talk to the database and provide other services like authentication and logging etc. You can use expressJS for this also in the frontend project.
Here is a simplistic representation of the client-server model which you can reference.
Some additional links for you to digest.
What is the difference between a web application and a client/server application?
https://medium.com/codiumclub/web-application-architecture-part-1-guide-to-become-full-stack-developer-cc9526a3519b

SharePoint CSOM in .NET Core Azure function running on Linux

Looking for advice, not necessarily any actual code. I'm a consultant writing some de-duplication functionality into an existing SharePoint Online \ Azure functions solution for a client.
The requirement: I need to write an Azure function that pulls PDF's from a SharePoint library, so I can hash check it before running it through OCR (ComputerVision API), followed by some text processing and a final similarity check.
The challenge: The client environment is locked down to the n-th degree (financial institution) and I only have access to the Azure resource group I'm currently working in. The existing function app, used by other solutions, runs on runtime 2.0 and Linux. I need to use SharePoint CSOM to access the PDF's for the above mentioned checks, but runtime 2.0 only supports .NET Core (not .NET framework), and .NET Core doesn't support SharePoint CSOM. There is a workaround to get CSOM working in .NET Core by fiddling with target build settings, but then it still doesn't run on Linux. Logic Apps doesn't give me the granularity to run all the checks and balances I need to, and SPFX isn't really a solution to do nightly automated runs without some garish compromises. VM's are out.
Any thoughts or suggestions to get this up and running without shooting myself or my client in the foot?
Here's two options:
Using the raw REST APIs with .Net Core running in Linux. You'll need to figure out how to generate the auth token. I know it can be done but don't have sample code for you at this time.
If Node is an option for you, you can use PnP JS in a Node Azure function. https://spblog.net/post/2017/06/07/Using-PnP-JS-Core-(sp-pnp-js)-in-Nodejs-environment
Do not even bother trying to get the CSOM to work. Also I don't even see how SPFX will work in this case.

How to connect WIX template with 3rd party REST APIs?

I created a simple web site using WIX platform. (https://www.wix.com/). I have some simple forms. Like customer registration and package management. All the UI part is done. And I have a Node.JS server to manage customers and packages. API is 100% done.
Now I need to connect WIX template with my NOde.JS REST API. Is there any possible ways to do this ?
My Node Server is deployed on a Ubuntu server and I can access it anywhere.
Please help me on this.
Yes, now Wix has this thing called Wix Code platform, which enables you to dynamically control your UI components and bind it to data coming from the outside.
To answer your question, they have this fetch API which you can use to write code to fetch your own server and get the data from it. Here is a link Wix Code API - fetch
Anyway, this is their site, Wix Code, you may learn a lot more there. Also they have those tutorials and examples of many "how to..." and examples Wix Code Tutorials and Videos
Cheers!

Building an App in SharePoint Online

I have a client that wanted an easier way for his team members to build/update pages on their site, their site is heavily customized with a lot of JavaScript. The issues is that when a team member wanted to add a new section to the page they had consult a dev person to hard code in the desired features. So we decided to create customizable web parts of those features making the site more self-serviceable.
When I first started I found some documentation that said to use visual studios to build the web part using sandbox code, upload it to the site and then they would just need to activate it to deploy it on the site. Buuut unbeknownst to me code based sandbox solutions are no longer supported in Sharepoint and therefore the web parts we built could not be deployed. I was then told that I needed to build it as an Add-in, but as I started building the add-ins I found that the customizable field properties (i.e. ability to change background color, text style/color and banner color) that I want are not implementable as a add-ins.
So now I’m back at square one and I don’t know if it’s even possible to build a web part as a add-in or do I need to go a different route?
Any thoughts or links to sources you can provide would be HUGELY appreciated!
Thanks
Terek
In SharePoint 2016 things have changed a lot from the traditional model which was the classic way of building web parts. The way you worked before is called "classic", the new way is called "modern", and the way to get your dev environment is the following (brace yourself, it is a long answer):
1) In SP2016/Online you will need to configure your dev machine with the following environment, installing the following:
NodeJS Long Term Support version
Yeoman (which will be used to create web parts)
GULP (which will play the role of virtual web server)
Once the three components above are installed, you will install the Yeoman SharePoint Generator to create the SharePoint Web Parts, Yeoman simplifies the process of creating things by delivering templates ready to use and making all the configurations standard, you gonna love this guy!
To configure your machine see the following link:
https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment
2) In SP2016/SP Online, you will develop for SPFx (SharePoint Framework), Microsoft has made significant efforts to address the changes and help developers to embark on this new journey by publishing training and educational material at GitHub, YouTube, and on its official website (I will add link below), but for the purpose of helping you, please follow this tutorial, it helped me to learn how to develop Modern Web Parts for SP 2016/Online:
https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part
3) From the tutorial above, you will get a fully functional Modern Web Part that can be deployed to SP2016/Online, you will see the new modern architecture allows you that old experience of "sandboxing" web parts in a faster way without, thus solving your problem of constant updating/refactoring components in a live production environment. This way now allows you to constantly update the code and see the results in real-time , you will be able to see results on your dev environment by calling: https://localhost:4321/temp/workbench.html and at same time on your SP environment. for example: http://portal.company.com/_layouts/workbench.aspx
Links:
YouTube "SharePoint Framework Tutorials" - it is the step by step tutorial video showing the whole process of creating a web part:
https://www.youtube.com/playlist?list=PLR9nK3mnD-OXvSWvS2zglCzz4iplhVrKq
GitHub repository with the full documentation, samples and extras for the SPFx and PnP (this is another story for another time):
https://github.com/SharePoint
I hope it helps you!

Node.js Web and Mobile apps - Where to read excel file?

I'm starting with node js and I was trying to build a web application and a mobile app too. My idea was building a Node API and then create a web app (maybe using Angular) and an Android App. One of the main functionalities will be loading data from an excel file using the web app, processing this data and then show some info both in the web app and the mobile app.
I'm not sure if this is the best way to go.. how could I send the excel file from the web app to the node API and then read the file and process it? I have seen several node packages to read excel files, that's not the problem. I just don't know how to pass the excel to the API from my web app.
Thanks.
You would need to send multipart/form-data via a POST. Then you can access your data in the node.js app. There's plenty of info's on how to send multipart/form-data on the web.

Resources