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

Question

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"
  }
}

Answer 1

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

Answer 2

On Unix based systems you can simply move the build folder to a new one with the "mv" command.

I have this as build script on my package.json:

"build": "react-scripts build && rm -rf static && mv build static"

I build my project, then remove any precedent "static" folder and finally move my "build" folder to a new "static" folder.

Answer 3

I was actually amazed by how simple it actually is.

1. Install react-app-rewired using your package manager of choice.

2. Create a config-overrides.js file at the root of your project

3. Paste the following code in config-overrides.js

const path = require('path');
module.exports = {
    paths: function (paths, env) {
        // Changing public to static
        paths.appPublic = path.resolve(__dirname, 'static');
        paths.appHtml = path.resolve(__dirname, 'static/index.html');
        return paths;
    }
}

4. Create a .env file at root of your project and write PUBLIC_URL='./static'

Hope this helps anyone trying to do the same.

Answer 4

package.json.scripts (FOR WINDOWS)

"start03": "set FOLDER=chapter03 && react-app-rewired start",
"build03": "set FOLDER=chapter03 && react-app-rewired build", 

react-app-rewired

    const path = require('path');
    module.exports = {paths: function (paths, env) {

          const folder = process.env.FOLDER.trim()

           // Changing public to static
           paths.appPublic = path.resolve(`${ __dirname }/src/${ folder }/_public`)
           paths.appHtml = path.resolve(`${ __dirname }/src/${ folder }/_public/index.html`)
           paths.appIndexJs = path.resolve(`${ __dirname }/src/${ folder }/index.js`)
           paths.appBuild = path.resolve(`${ __dirname }/build/${ folder }`)

           return paths;
        },
    }