Sharepoint React Webpart

These are the steps I took to publish a React app in Sharepoint:

1. install gulp if you dont have it installed

$ npm i gulp --g

2. install Yoman if you dont have it installed

$ npm i yo --g

3. install microsoft/sharepoint generator if you dont have it installed

$ npm i @microsoft/generator-sharepoint --g

4. Open you terminal and cd to the path where you want to create your project:

$ cd C:\\Path\to\App

5. Create a new directory (folder)

$ mkdir sharepoint-react-app

6. Start Yoman

$ yo @microsoft/sharepoint

     _-----_     ╭──────────────────────────╮
    |       |    │      Welcome to the      │
    |--(o)--|    │  SharePoint Online SPFx  │
   `---------´   │  Yeoman [email protected] │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

See https://aka.ms/spfx-yeoman-info for more information on how to use this generator.
Let's create a new SharePoint solution.
? What is your solution name? sharepoint-reac-app
? Which type of client-side component to create? WebPart
Add new Web part to solution sharepoint-reac-app.       
? What is your Web part name? SharepointReactApp        
? Which template would you like to use? React

# THIS MAKE TAKE A WHILE!!!

ERROR:

npm ERR! code 1
npm ERR! path G:\APPS\SHAREPOINT\REACT\node_modules\deasync
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c C:\Users\15t\AppData\Local\Temp\install-8b0b1031.cmd
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
npm ERR! gyp ERR! stack     at PythonFinder.failNoPython (G:\APPS\SHAREPOINT\REACT\node_modules\node-gyp\lib\configure.js:484:19)
npm ERR! gyp ERR! stack     at PythonFinder.<anonymous> (G:\APPS\SHAREPOINT\REACT\node_modules\node-gyp\lib\configure.js:509:16)
npm ERR! gyp ERR! stack     at callback (G:\APPS\SHAREPOINT\REACT\node_modules\graceful-fs\polyfills.js:306:20)
npm ERR! gyp ERR! stack     at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp ERR! System Windows_NT 10.0.19044
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "G:\\APPS\\SHAREPOINT\\REACT\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd G:\APPS\SHAREPOINT\REACT\node_modules\deasync
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed
npm ERR!     C:\Users\15t\AppData\Local\npm-cache\_logs\2022-11-20T23_38_16_196Z-debug-0.log


ERROR SOLUTION:
1. Update your generators
2. use command in powershell as admin: $ npm install -g windows-build-tools
https://stackoverflow.com/questions/34372618/npm-cant-find-python-executable-python-you-can-set-the-python-env-variabl


7 Open project with Visual Code

$ code .

8. Open file name: config/serve.json and the initialPage property:

"initialPage": "https://[tenant].sharepoint.com/sites/[siteName]/_layouts/workbench.aspx"

9. Set certificate

$ gulp trust-dev-cert

10. Start gulp server

$ gulp serve

11. Open URL with Edge Browser:

https://[tenant].sharepoint.com/sites/[siteName]/_layouts/workbench.aspx

12. Done

next, Deploy your client-side web part to a SharePoint page

20-p5026-sharepoint-gulp-yoman.png