Create-react-app: How can I rename from index.html to app.html?

[starqueue]

The title says it all.

I want my app to use app.html instead of index.html. How can I do this?

thanks

[gaearon]

Without ejecting, you can’t.

If you run npm run eject, all configuration will be copied directly into your project. You lose the ability to easily upgrade to new versions, but you have full control, and can change the HTML file name in Webpack settings in config/webpack.*.js.

I hope this helps!

[lcoder]

{
"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom"
  }
}

to

{
"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js && mv build/index.html build/app.html",
    "test": "node scripts/test.js --env=jsdom"
  }
}

[hodgef]

I managed to do it as follows:

in webpack.config.prod.js:

new HtmlWebpackPlugin({ inject: true, template: paths.appHtml, filename: 'app.html', ...)

Note the "filename: 'app.html'" setting.

[DanielNoonan]

There does seem to be a way to do this without ejecting...

In the node modules folder look for the folder 'html-webpack-plugin'.
Inside there is an 'index.js' file - open this.
At the top of the file you'll see: 'function htmlWebpackPlugin (options) {.....'
One of the options is: filename: 'index.html'
Simply change this to the new name and the 'npm run build' script will create the html file with the new name and all the links (for the js and css) will be set correctly for this new name.
Remember to change the 'filename' option in html-webpack-plugin's 'index.js' back to 'index.html' once you have finished 'npm run build'. Otherwise the dev server you get from the 'npm start' script will not work if/when you want to continue work on the project development.

I know this is an old question... but I just wanted to update the answer for people who don't want to eject their project.