Porting a React / TypeScript project to SharePoint Framework. Part 1

I got a new task on work today, port at TypeScript app to SharePoint Framework (SPFx). In this bloggpost series i am going to describe the steps i am taking to make this port happen. The idea is to do all transactions that now is done in SQL tables in SharePoint lists instead and also port the user interface.

Prereqs:

Get the sourcecode for the app you are going to port from Git:

  • Open up your favourite CMD’er (My favourite is found at: http://cmder.net/).
  • Type in: CD “your procject directory url”.
  • Type in: git clone “<Repo URL”> or download the project and put it somewhere on your computer.
  • Type in: CD to the project directory and run this command: npm install. (Checks if there are any node packages to be installed). 

Now that you have a directory with the app you are going to port you can start thinking about creating a new SharePoint Framework Webpart.

Type in the following commands to create a new SPFx solution and webpart.

  • Open up your favourite CMD’er.
  • Type in: yo @microsoft/sharepoint.
  • Type in: The solution name and description and choose solution folder.
  • Choose the JavaScript framework you would like to use for developing the webpart, here you have 3 choises, choos framework for the new SPFx webpart that is most similar to the app you are porting:
    • None
    • React
    • KnockOut

Now you will see the SharePoint framework generator create a solution for you and installing all the required bits, when this is done and all went well you will see a your cmd’er look like this:

virksom

I will be covering how i am starting the development of the new SPFx webpart in next part of this series.