0

When using @wordpress/scripts to create a React app for WordPress, the default configuration to build the app is via running one of the following two scripts wp-scripts build or wp-scripts start (both run from within package.json). Both scripts will take the code from the src directory and build it into the build directory.

I would like to change the destination directory; for example, I would like the result to be in dist/app instead of build. I found an option to change the source directory; the option is --webpack-src-dir (I have not used it, but I think with a little bit of tinkering, I will find out how), however I could not find a way of changing the destination directory. Is this possible?

Thanks.

PS: This is the first time using React with WordPress, so apologies about the simple question.

Improve this question
3
  • 1
    --output-path can be used for that - from the documentation, "build:custom": "wp-scripts build entry-one.js entry-two.js --output-path=custom" and "npm run build:custom - builds the code for production with two entry points and a custom output directory. Paths for custom entry points are relative to the project root".
    – Sally CJ
    Commented Jan 17, 2023 at 0:42
  • @SallyCJ - Been reading the documentation and even tracing the code, but did not even see this. I will look into it. Thanks so much for pointing me to the right direction. It looks like this will only work if I have multiple entry points for the build. I have to test it and see if it works. (maybe you can add this as the answer, so I accept it for the greater good?)
    – Greeso
    Commented Jan 17, 2023 at 0:50
  • entry-one.js entry-two.js was just an example, and I'm pretty sure it will work even for a single entry, wp-scripts build foo.js --output-path=custom - I already tried it long ago. It's just I would only write an answer after testing it again. So if it works for you, then just write your own answer :)
    – Sally CJ
    Commented Jan 17, 2023 at 1:00

1 Answer 1

Reset to default
2

I am writing this answer after testing the suggestion given by @SallyCJ (thank you for pointing me towards the right direction)

Writing the following entry into the scripts section of package.json will change both the source and destination of the React code.

"scripts": {
    "build": "wp-scripts build --webpack-src-dir=path/to/source/dir/ --output-path=path/to/destination/dir/",
    "test": "echo \"Error: no test specified\" && exit 1"
},

If you'd like to override the default entry point (i.e., use a different file than index.js as your entry point), and if this custom entry point file is located in a custom path, then here is how to setup your scripts

"scripts": {
    "build": "wp-scripts build path/to/source/dir/custom.js --webpack-src-dir=path/to/source/dir/ --output-path=path/to/destination/dir/",
    "test": "echo \"Error: no test specified\" && exit 1"
},
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.