Search code examples
javascriptreactjsnpmcreate-react-app

Can I change the name of the public folder in create-react-app without ejecting?


I have a create-react-app project that I've set up (express and node connecting to a mysql db on the backend, in case that matters), and it was working just fine. I was told by my project manager that I need to change the name of the 'public' directory to 'static' (this directory holds/will hold my static files, such as my index.html and any media that I need to serve) in order for it to correctly deploy, however the only solution I've been able to find is to eject so I can go change the value of 'PUBLIC_URL'. Currently I'm getting a error when I run 'npm run start' which logs: 'Could not find a required file. Name: index.html', and it is still searching in the public directory (which I have already changed to be called 'static'). Nowhere in my code am I referencing the public folder.

From my understanding (someone please correct me if I am wrong), the PUBLIC_URL variable is set by create-react-app to be the path to the public folder. I would like to change this to be the static folder, but the only solution I found that seemed like a possibility involved ejecting and then manually changing the variable. Is there a way to set that variable without ejecting, or to do some other workaround for changing that directory, and if not, what's the easiest way to get this to work (I'd prefer not ejecting, but will do it if it's the only way)...I really just need the directory to change names, and am finding myself frustrated with what I thought would be a fairly straightforward change.

Thanks!

edit: here's my package.json:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "PORT=8080 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Solution

  • PUBLIC_URL is a variable you can set.

    You can set it in your console

    export PUBLIC_URL="/static"
    

    Create react app will take it from process.env.PUBLIC_URL

    You can read more about it in the pull request thread to implement this functionality