Hi All,
i want to deploy the "react-script-editor" from https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-script-editor.
so i did these steps:-
1. i download the zip file >> extract it inside my C:\ drive.
2. then i modify the "config\write-manifest.json" to reference our root site folder, as follow:-
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "https://*****.sharepoint.com/SiteAssets/SPFX/"
}
3. then i opened the node.js >> change the directory to c, as follow:-
H:\>cd /d c:\
4. i chnage the directory to where the file are found , as follow:-
c:\>cd C:\***\sp-dev-fx-webparts-master\samples\react-scri
pt-editor\
5. as per the documentation i tried to run this command gulp --ship, but i got an error:-
C:\***\sp-dev-fx-webparts-master\samples\react-script-edit
or>gulp --ship
[16:39:51] Local gulp not found in C:\***\sp-dev-fx-webpar
ts-master\samples\react-script-editor
[16:39:51] Try running: npm install gulp
6. so i run the npm install gulp, but i got many warning as follow:-
C:\***\sp-dev-fx-webparts-master\samples\react-script-edit
or> npm install gulp
npm WARN deprecated graceful-fs@3.0.11: please upgrade to graceful-fs 4 for comp
atibility with current and future versions of Node.js
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher
to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher
to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compa
tibility with current and future versions of Node.js
> deasync@0.1.13 install C:\***\sp-dev-fx-webparts-master\
samples\react-script-editor\node_modules\deasync
> node ./build.js
`win32-x64-node-8` exists; testing
Binary is fine; exiting
> node-sass@4.9.3 install C:\***\sp-dev-fx-webparts-master
\samples\react-script-editor\node_modules\node-sass
> node scripts/install.js
Cached binary found at C:\Users\*******.AD-***GROUP\AppData\Roaming\npm-c
ache\node-sass\4.9.3\win32-x64-57_binding.node
> phantomjs-prebuilt@2.1.16 install C:\***\sp-dev-fx-webpa
rts-master\samples\react-script-editor\node_modules\phantomjs-prebuilt
> node install.js
PhantomJS not found on PATH
Download already available at C:\Users\***~1.AD-\AppData\Local\Temp\phantomjs
\phantomjs-2.1.1-windows.zip
Verified checksum of previously downloaded file
Extracting zip contents
Removing C:\***\sp-dev-fx-webparts-master\samples\react-sc
ript-editor\node_modules\phantomjs-prebuilt\lib\phantom
Copying extracted folder C:\Users\****~1.AD-\AppData\Local\Temp\phantomjs\phan
tomjs-2.1.1-windows.zip-extract-1551976921083\phantomjs-2.1.1-windows -> C:\***\sp-dev-fx-webparts-master\samples\react-script-editor\node
_modules\phantomjs-prebuilt\lib\phantom
Writing location.js file
Done. Phantomjs binary available at C:\***\sp-dev-fx-webpa
rts-master\samples\react-script-editor\node_modules\phantomjs-prebuilt\lib\phant
om\bin\phantomjs.exe
> spawn-sync@1.0.15 postinstall C:\***\sp-dev-fx-webparts-
master\samples\react-script-editor\node_modules\spawn-sync
> node postinstall
> uglifyjs-webpack-plugin@0.4.6 postinstall C:\***\sp-dev-
fx-webparts-master\samples\react-script-editor\node_modules\uglifyjs-webpack-plu
gin
> node lib/post_install.js
> node-sass@4.9.3 postinstall C:\***\sp-dev-fx-webparts-ma
ster\samples\react-script-editor\node_modules\node-sass
> node scripts/build.js
Binary found at C:\***\sp-dev-fx-webparts-master\samples\r
eact-script-editor\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\wat
chpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\san
e\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)
+ gulp@3.9.1
added 1950 packages from 1747 contributors and audited 776321 packages in 125.12
5s
found 10941 vulnerabilities (4750 low, 5965 moderate, 219 high, 7 critical)
run `npm audit fix` to fix them, or `npm audit` for details
7. so i tried to install the latest version of graceful, as follow:-
C:\***\sp-dev-fx-webparts-master\samples\react-script-edit
or>npm install -g graceful-fs graceful-fs@latest
+ graceful-fs@4.1.15
+ graceful-fs@4.1.15
updated 1 package in 0.419s
8. then i run the npm install gulp again, as follow:-
C:\***\sp-dev-fx-webparts-master\samples\react-script-edit
or>npm install gulp
npm WARN deprecated graceful-fs@3.0.11: please upgrade to graceful-fs 4 for comp
atibility with current and future versions of Node.js
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher
to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher
to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compa
tibility with current and future versions of Node.js
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed.
You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\wat
chpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\san
e\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)
+ gulp@3.9.1
updated 1 package and audited 776321 packages in 41.189s
found 10941 vulnerabilities (4750 low, 5965 moderate, 219 high, 7 critical)
run `npm audit fix` to fix them, or `npm audit` for details
9. then i run gulp --ship, as follow (where i got this error "The build failed because a task wrote output to stderr."):-
C:\***\sp-dev-fx-webparts-master\samples\react-script-edit
or>gulp --ship
Build target: SHIP
[16:44:26] Using gulpfile C:\***\sp-dev-fx-webparts-master
\samples\react-script-editor\gulpfile.js
[16:44:26] Starting gulp
[16:44:26] Starting 'default'...
[16:44:26] Starting subtask 'configure-sp-build-rig'...
[16:44:26] Finished subtask 'configure-sp-build-rig' after 6.56 ms
[16:44:26] Starting subtask 'pre-copy'...
[16:44:26] Finished subtask 'pre-copy' after 21 ms
[16:44:26] Starting subtask 'copy-static-assets'...
[16:44:26] Starting subtask 'sass'...
[16:44:30] Finished subtask 'sass' after 3.95 s
[16:44:30] Starting subtask 'tslint'...
[16:44:32] Starting subtask 'typescript'...
[16:44:32] [typescript] TypeScript version: 2.4.2
[16:44:32] Finished subtask 'copy-static-assets' after 5.42 s
Warning: no-duplicate-case rule is deprecated. Replace your usage with the TSLin
t no-duplicate-switch-case rule.
Warning: valid-typeof rule is deprecated. Replace your usage with the TSLint typ
eof-compare rule.
[16:44:32] Warning - tslint - src\webparts\scriptEditor\ScriptEditorWebPart.ts(1
78,29): error prefer-const: Identifier 'hackReload' is never reassigned; use 'co
nst' instead of 'let'.
[16:44:32] Finished subtask 'tslint' after 2.17 s
[16:44:34] Finished subtask 'typescript' after 2.19 s
[16:44:34] Starting subtask 'ts-npm-lint'...
[16:44:34] Finished subtask 'ts-npm-lint' after 14 ms
[16:44:34] Starting subtask 'api-extractor'...
[16:44:34] Finished subtask 'api-extractor' after 2.04 ms
[16:44:34] Starting subtask 'post-copy'...
[16:44:34] Finished subtask 'post-copy' after 888 µs
[16:44:34] Starting subtask 'collectLocalizedResources'...
[16:44:34] Finished subtask 'collectLocalizedResources' after 1.1 ms
[16:44:34] Starting subtask 'configure-webpack'...
[16:44:36] Finished subtask 'configure-webpack' after 2.01 s
[16:44:36] Starting subtask 'webpack'...
[16:44:42] Finished subtask 'webpack' after 6.24 s
[16:44:42] Starting subtask 'configure-webpack-external-bundling'...
[16:44:42] Finished subtask 'configure-webpack-external-bundling' after 2.85 ms
[16:44:42] Starting subtask 'copy-assets'...
[16:44:43] Finished subtask 'copy-assets' after 869 ms
[16:44:43] Starting subtask 'write-manifests'...
[16:44:45] Finished subtask 'write-manifests' after 2.18 s
[16:44:45] Finished 'default' after 19 s
[16:44:46] ==================[ Finished ]==================
Warning - tslint - src/webparts/scriptEditor/ScriptEditorWebPart.ts(178,29): err
or prefer-const: Identifier 'hackReload' is never reassigned; use 'const' instea
d of 'let'.
[16:44:46] Project pzl-script-editor version:0.0.1
[16:44:46] Build tools version:3.7.4
[16:44:46] Node version:v8.11.4
[16:44:46] Total duration:31 s
[16:44:46] Task warnings:1
The build failed because a task wrote output to stderr.
Exiting with exit code: 1
10 finally i run this command gulp package-solution --ship but i got this error ("The build failed because a task wrote output to stderr."), as follow:-
C:\***\sp-dev-fx-webparts-master\samples\react-script-edit
or>gulp package-solution --ship
Build target: SHIP
[16:44:54] Using gulpfile C:\***\sp-dev-fx-webparts-master
\samples\react-script-editor\gulpfile.js
[16:44:54] Starting gulp
[16:44:54] Starting 'package-solution'...
[16:44:54] Starting subtask 'configure-sp-build-rig'...
[16:44:54] Finished subtask 'configure-sp-build-rig' after 8.24 ms
[16:44:54] Starting subtask 'package-solution'...
[16:44:54] Warning - [package-solution] The "cdnBasePath" in "config/write-manif
ests.json" has been changed from its default value ("<!-- PATH TO CDN -->") to "
https://***groupinfra.sharepoint.com/SiteAssets/SPFX/", however the "includeClie
ntSideAssets" setting in "config/package-solution.json" is "true" and will be ig
nored. If you meant to deploy your assets in your SPPKG to SharePoint, reset the
value of "cdnBasePath" to "<!-- PATH TO CDN -->".
[16:44:54] [package-solution] Found manifest: C:\***\sp-de
v-fx-webparts-master\samples\react-script-editor\temp\deploy\3a328f0a-99c4-4b28-
95ab-fe0847f657a3.json
[16:44:54] Verifying configuration...
[16:44:54] Done!
[16:44:54]
[16:44:54] Normalizing solution information...
[16:44:54] Attempting creating component definitions for {1} manifests
[16:44:54] Created component definitions for {1} manifests
[16:44:54] config.solution.features not set! Instead generating a feature for ea
ch component.
[16:44:54] Creating feature for Modern Script Editor...
[16:44:54] Done!
[16:44:54]
[16:44:54] Reading custom Feature XML...
[16:44:54] Done!
[16:44:54]
[16:44:54] Validating App Package...
[16:44:54] Done!
[16:44:54]
[16:44:54] Reading resources...
[16:44:54] Done!
[16:44:54]
[16:44:54] Reading Sharepoint Assets & Creating XML...
[16:44:54] Done!
[16:44:54]
[16:44:54] Writing solution XML to sharepoint\solution\debug...
[16:44:54] Cleaned sharepoint\solution\debug
[16:44:54] Created file: sharepoint\solution\debug\3a328f0a-99c4-4b28-95ab-fe084
7f657a3\WebPart_3a328f0a-99c4-4b28-95ab-fe0847f657a3.xml
[16:44:54] Created file: sharepoint\solution\debug\[Content_Types].xml
[16:44:54] Created file: sharepoint\solution\debug\AppManifest.xml
[16:44:54] Created file: sharepoint\solution\debug\feature_3a328f0a-99c4-4b28-95
ab-fe0847f657a3.xml.config.xml
[16:44:54] Created file: sharepoint\solution\debug\feature_3a328f0a-99c4-4b28-95
ab-fe0847f657a3.xml
[16:44:54] Created file: sharepoint\solution\debug\_rels\feature_3a328f0a-99c4-4
b28-95ab-fe0847f657a3.xml.rels
[16:44:54] Created file: sharepoint\solution\debug\_rels\.rels
[16:44:54] Created file: sharepoint\solution\debug\_rels\AppManifest.xml.rels
[16:44:54] Created file: sharepoint\solution\pzl-script-editor.sppkg
[16:44:54] Done!
[16:44:54]
[16:44:54] ALL DONE!
[16:44:54]
[16:44:54] Finished subtask 'package-solution' after 135 ms
[16:44:54] Finished 'package-solution' after 148 ms
[16:44:55] ==================[ Finished ]==================
Warning - [package-solution] The "cdnBasePath" in "config/write-manifests.json"
has been changed from its default value ("<!-- PATH TO CDN -->") to "https://***
groupinfra.sharepoint.com/SiteAssets/SPFX/", however the "includeClientSideAsset
s" setting in "config/package-solution.json" is "true" and will be ignored. If y
ou meant to deploy your assets in your SPPKG to SharePoint, reset the value of "
cdnBasePath" to "<!-- PATH TO CDN -->".
[16:44:55] Project pzl-script-editor version:0.0.1
[16:44:55] Build tools version:3.7.4
[16:44:55] Node version:v8.11.4
[16:44:55] Total duration:4.47 s
[16:44:55] Task warnings:1
The build failed because a task wrote output to stderr.
Exiting with exit code: 1
11. i copied the content from samples\react-script-editor\temp\deploy to the SPFX folder, but when i upload the .sppkg file to our app catalog site collection, i got this error that the deployment has failed, as follow:-
so can anyone advice how i can get my "react-script-editor" deplyed to our app catalog? as i am following all the needed steps.