# Starting development of plugin based upon ps-react-starter template **URL:** \ **Category:** UXP Plugin API\ **Created:** [June 28, 2021, 3:06pm UTC](https://forums.creativeclouddeveloper.com/t/starting-development-of-plugin-based-upon-ps-react-starter-template/3202 "2021-06-28T15:06:32Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![FrankMarijsse](https://avatars.discourse-cdn.com/v4/letter/f/5daacb/32.png) [@FrankMarijsse](https://forums.creativeclouddeveloper.com/u/FrankMarijsse)\ **Post date:** [June 28, 2021, 3:06pm UTC](https://forums.creativeclouddeveloper.com/t/starting-development-of-plugin-based-upon-ps-react-starter-template/3202/1 "2021-06-28T15:06:32Z")
We explore writing plugins based upon ps-react\_starter template. The plugin is created in the selected folder and could be added & loaded in the UXP Developer Tool. But 2 empty panels are shown in Photoshop. How can the panel contents be shown? ---
**Author:** ![AndresLP](https://avatars.discourse-cdn.com/v4/letter/a/d2c977/32.png) [@AndresLP](https://forums.creativeclouddeveloper.com/u/AndresLP)\ **Post date:** [August 23, 2022, 10:13am UTC](https://forums.creativeclouddeveloper.com/t/starting-development-of-plugin-based-upon-ps-react-starter-template/3202/2 "2022-08-23T10:13:58Z")
Hi, I have the same problem. Just tested to create a UXP plugin using the React starter using the UXP Developer Tool. Just two empty panels are loaded. It looks like “index.js” is missing in the plugins folder. This is how I tested creating the React UXP Photoshop plugin using the starter: UDT \> Create Plugin \> ps-react-starter do “npm install” (get “deprecated” warnings and 6 severe vulnerabilities) UDT \> More \> Advanced \> change manifest.json folder to “…/plugin” Load plugin in Photoshop: two empty panels called “Demo Panel” and “Demo Panel 2” are shown. UDP \> open Debugger, shows this error: Uncaught Error: Failed to load script file: index.js Failed to invoke the stat. File Path: /Desktop/tmp react uxp/plugin/index.js at l (uxp://uxp-internal/webfs\_scripts.js:2) at s (uxp://uxp-internal/webfs\_scripts.js:2) at e.exports.readFileSync (uxp://uxp-internal/webfs\_scripts.js:2) at Object.readFileSync (uxp://uxp-internal/webfs\_scripts.js:2) at Object.readFileUrlSync (uxp://uxp-internal/domjs\_scripts.js:2) at e.exports.\_insertRemoteScript (uxp://uxp-internal/domjs\_scripts.js:2) at e.exports.\_checkScriptNode (uxp://uxp-internal/domjs\_scripts.js:2) at e.exports.appendChild (uxp://uxp-internal/domjs\_scripts.js:2) at e.exports.appendChild (uxp://uxp-internal/domjs\_scripts.js:2) at e.exports.appendChild (uxp://uxp-internal/domjs\_scripts.js:2) So it looks like “index.js” file is missing in the plugin folder? P.S.:versions: Photoshop App Version 23.5.0 UXP Version 6.2.1 ---
**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\ **Post date:** [August 23, 2022, 11:20am UTC](https://forums.creativeclouddeveloper.com/t/starting-development-of-plugin-based-upon-ps-react-starter-template/3202/3 "2022-08-23T11:20:54Z")
Did you check the [README](https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/tree/main/ui-react-starter#readme) on what needs to be done? ---
**Author:** ![AndresLP](https://avatars.discourse-cdn.com/v4/letter/a/d2c977/32.png) [@AndresLP](https://forums.creativeclouddeveloper.com/u/AndresLP)\ **Post date:** [August 23, 2022, 11:36am UTC](https://forums.creativeclouddeveloper.com/t/starting-development-of-plugin-based-upon-ps-react-starter-template/3202/4 "2022-08-23T11:36:00Z")
Thank you for your reply @Karmalakas , yes I did. However I think this paragraph of the README is wrong: > If the plugin hasn’t already been added to your workspace in the UXP Developer Tools, you can add it by clicking “Add Plugin…” and selecting `dist/manifest.json`. **DO NOT** select the `manifest.json` file inside the `plugin` folder. Not sure if I’m missing something obvious, but there is no “dist” folder. The only “manifest.json” file is located in the “plugin” folder. Do you know if the “dist” folder needs to be created manually? ---
**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\ **Post date:** [August 23, 2022, 11:48am UTC](https://forums.creativeclouddeveloper.com/t/starting-development-of-plugin-based-upon-ps-react-starter-template/3202/5 "2022-08-23T11:48:28Z")
Not sure if you’re reading the doc from the end, but I think you’re completely missing the [**Install dependancies**](https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/tree/main/ui-react-starter#install-dependencies) and [**Build process**](https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/tree/main/ui-react-starter#build-process) parts ---
**Author:** ![AndresLP](https://avatars.discourse-cdn.com/v4/letter/a/d2c977/32.png) [@AndresLP](https://forums.creativeclouddeveloper.com/u/AndresLP)\ **Post date:** [August 23, 2022, 12:17pm UTC](https://forums.creativeclouddeveloper.com/t/starting-development-of-plugin-based-upon-ps-react-starter-template/3202/6 "2022-08-23T12:17:07Z")
OK now it’s working, thanks for your replies. I initially skipped the build process, I thought that was only needed for production. Does this mean I need to do “npm run build” every time I want to apply code changes in Photoshop? is there any way to “watch” the changes in Photoshop without needing to run build? (as with “normal” React development, or as vanilla JS UXP plugin UDT “watch” works). ---
**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\ **Post date:** [August 23, 2022, 12:26pm UTC](https://forums.creativeclouddeveloper.com/t/starting-development-of-plugin-based-upon-ps-react-starter-template/3202/7 "2022-08-23T12:26:36Z")
> [@AndresLP](#): > > Does this mean I need to do “npm run build” every time I want to apply code changes in Photoshop? is there any way to “watch” the changes in Photoshop without needing to run build? I think it says it pretty clear in the [**Build process**](https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/tree/main/ui-react-starter#build-process) section: > - `yarn watch` or `npm run watch` will build a development version of the plugin, and recompile everytime you make a change to the source files. The result is placed in `dist`. * * * > [@AndresLP](#): > > I initially skipped the build process, I thought that was only needed for production. UDT also loads basically already built version. For prod you only might want to minify and/or obfuscate it, but it’s pretty much the same version you will use while developing. At least that’s what I do. It also minimises the risk of noticing too late if something’s not working. ---
**Author:** ![AndresLP](https://avatars.discourse-cdn.com/v4/letter/a/d2c977/32.png) [@AndresLP](https://forums.creativeclouddeveloper.com/u/AndresLP)\ **Post date:** [August 23, 2022, 2:12pm UTC](https://forums.creativeclouddeveloper.com/t/starting-development-of-plugin-based-upon-ps-react-starter-template/3202/8 "2022-08-23T14:12:18Z")
Great, thank you, I got the watch working now for development. > UDT also loads basically already built version. For prod you only might want to minify and/or obfuscate it, but it’s pretty much the same version you will use while developing. I see “npm run build” doesn’t minify and obfuscate the code. Do you use Webpack for that? ---
**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\ **Post date:** [August 23, 2022, 2:24pm UTC](https://forums.creativeclouddeveloper.com/t/starting-development-of-plugin-based-upon-ps-react-starter-template/3202/9 "2022-08-23T14:24:40Z")
> [@AndresLP](#): > > Do you use Webpack for that? I do. Something like [this](http://forums.creativeclouddeveloper.com/t/im-shocked-why-are-plugins-decrypted-on-install/3629/32) ---
**Author:** ![AndresLP](https://avatars.discourse-cdn.com/v4/letter/a/d2c977/32.png) [@AndresLP](https://forums.creativeclouddeveloper.com/u/AndresLP)\ **Post date:** [August 23, 2022, 2:31pm UTC](https://forums.creativeclouddeveloper.com/t/starting-development-of-plugin-based-upon-ps-react-starter-template/3202/10 "2022-08-23T14:31:04Z")
Great link, thanks again for your help. ---
**Author:** ![rascheln](https://avatars.discourse-cdn.com/v4/letter/r/e19b73/32.png) [@rascheln](https://forums.creativeclouddeveloper.com/u/rascheln)\ **Post date:** [January 19, 2023, 10:16pm UTC](https://forums.creativeclouddeveloper.com/t/starting-development-of-plugin-based-upon-ps-react-starter-template/3202/11 "2023-01-19T22:16:48Z")
This is the thread that I checked before I ended up making my own thread. In my particular case, I followed the readme.md as exactly as I could. I ended up getting several vulnerability warnings when I ran `npm install`, which effectively makes this plugin a non-starter for me, until I can figure out why I am getting the errors when running npm install. I attempted running `npm run build` in three cases, deleting everything and starting with a fresh new folder with the downloaded files each time: - The case where I did not run `npm audit fix` or `npm audit fix --force` - The case where I ran `npm audit fix` - The case where I ran `npm audit fix --force` This is the error I get when attempting to build: ```auto opensslErrorStack: ['error:03000086:digital envelope routines::initialization error'], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' ``` In all cases, build attempts failed, a dist folder never showed up, and I am thus unable to run the plugin. I am running MacOS 13.1 Ventura.