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

问题

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?

回答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.

回答2:

Updated answer

For the newer create-react-app versions, looks like the configurations changed a bit.

First you will need to eject:

npm run eject

Then open paths.js which is found in the config folder, and change the appHtml property in the module.exports. That's the only change you'll need to make.

Here is an example of the modified exports object:

module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/mynewawesomeindexfile.html'),  //Change only this line
  appIndexJs: resolveModule(resolveApp, 'src/index'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  appTsConfig: resolveApp('tsconfig.json'),
  appJsConfig: resolveApp('jsconfig.json'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
  proxySetup: resolveApp('src/setupProxy.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
};

来源：https://stackoverflow.com/questions/50780983/how-can-i-rename-index-html-in-a-create-react-app-project

标签

javascript

reactjs

react-router

surge.sh