How can I rename index.html in a create-react-app project?

Question

I'm using Surge to host my create-react-app website and in order to use client-side routing with it you need your entry point to be 200.html but when using create-react-app it's by default set to index.html. What's the best way to rename that file without breaking the website?

Answer 1

As suggest in related CRA issue 1761 the proposed solution is to eject entire configuration (including Webpack):

npm run eject

Running npm run eject copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like npm start and npm run build will still work, but they will point to the copied scripts so you can tweak them. At this point, you’re on your own. (Why I love Create React App)

After ejecting you will be able to manually edit configuration inside config/webpack.*.js.

You may expect there line like:

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

Where you can simply replace index.html into desired 200.html.

---

There is also a possibility to play around with building commands (like suggested lcoder):

{
  "scripts": {
    ...
    "build": "node scripts/build.js && mv build/index.html build/app.html",
    ...
  }
}

Assuming that simple rename after build process would be sufficient for you.