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:
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