14

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"
  }
}
familyBandSolution
  • 143
  • 1
  • 1
  • 6
  • 1
    Could you share your package.json? – Dayron Gallardo Sep 21 '18 at 22:56
  • Possible duplicate of [Use custom build output folder when using create-react-app](https://stackoverflow.com/questions/41495658/use-custom-build-output-folder-when-using-create-react-app) – Dayron Gallardo Sep 21 '18 at 23:31
  • 1
    You should be able to deploy by exporting your assets (to a specified folder) and creating a bundle without changing the public url? Did you try to deploy prior to making folder name changes? – Rachel Gallen Sep 21 '18 at 23:32
  • 1
    Sorry, I should have been more clear. I'm not trying to change the build output folder. The public folder is where I'm keeping my static files (my main html page, and any images that I need to serve). So I want to be able to keep my static files in a folder named 'static', rather than in a folder named 'public' (which is how create-react-app automatically configures everything). It just seems like there is something going on behind the scenes that is forcing static files to be searched for only in the public directory. Am I totally misunderstanding the actual problem/your suggested solution? – familyBandSolution Sep 22 '18 at 00:41

4 Answers4

7

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

sudo bangbang
  • 27,127
  • 11
  • 75
  • 77
5

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.

Dayron Gallardo
  • 1,502
  • 2
  • 21
  • 37
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;
    }
}
  1. Create a .env file at root of your project and write PUBLIC_URL='./static'

Hope this helps anyone trying to do the same.

Devorein
  • 1,112
  • 2
  • 15
  • 23
  • 1
    this approach really worked! – Marcello DeSales Apr 28 '22 at 03:27
  • 1
    This works so fine! We could also add that for installing react-app-rewired this is what is required: npm install react-app-rewired --save-dev And also that package.json must be changed this way: "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" } – Gustavo Soler Jun 29 '22 at 18:09
1

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;
        },
    }
Василий Порох
  • 11
  • 2