Create React App inside a non-empty folder

I use create-react-app to create a react app inside an existing backend project which will serve the react application. And I have to run the eject command to:

• change the target directory
• change the build logic and directories
• add .less support with some extra configuration and so on…

To automate this process, I took a fork from react-scripts and I defined my folder structure. A

My final file system hierarchy should be something like:

- project directory
    - foo
    - bar
    - baz
    - resources
        - react-app
            - index.js
    - package.json 
    - qux.php

So I edited the template folder to match these requirements and published the scripts to give a try.

npx create-react-app . --scripts-version my-react-scripts

And as you guessed, I got

The directory . contains files that could conflict: Backend FSH.

However:

• I need my package.json to be located in the project root directory.
• My scripts will create a new directory called react-app inside the existing resources folder. And react-app will live inside this directory. I don’t expect an override.
• My build is customized and will use my webpack plugin to generate the built files. I don’t expect an unexpected override here as well.

Describe the solution you’d like

• Since I know what I do, I want to have some way to run create-react-app in an existing folder with some files.

Maybe by setting a constant from my scripts or using an option after npx create-react-app call.

Describe alternatives you’ve considered

I considered to update create-react-app to support it as well but that doesn’t make sense since it would be almost impossible to follow up the updates and upgrades later.

Additional context

https://github.com/facebook/create-react-app/issues/334 https://github.com/facebook/create-react-app/issues/2776

[erdemkeren]

Hello, Thanks for your reply @JacobMGEvans!

Haha! That is one of my first shots as well 😃 I also considered working with:

• .git
• back-end
• front-end

---

But:

• I use npm run development -- --watch to watch the changes of the file system and move the generated/built:
  • index.html as root/resources/views/app.blade.php
  • robots.txt and *.js and other static assets as public/robots.txt, public/*.js, public/assets/*.js.
  • single page app
  • single page page-components (like 403, 404, 500) as … so on.

All of them programmatically and on every save (backend serves the output).

If I include the package.json inside root/React, then my watch and build commands will write the output to a higher level then the package.json and that doesn’t make sense to me. I really feel like it belongs to the whole project since it affects a lot of places out of the React directory in the suggested example.

That is why It makes perfect sense to move the configuration to the root directory. I hope it makes sense to you too.

Having rmdir is great but I am looking for rm -rf at the moment =)

[JacobMGEvans]

I see. I think what you are doing is exactly why the eject is available to “own” the configurations. I would definitely be interested in what the maintainers have to say. Pretty slick that you got that to work though!