CODEWITHSUNDEEP
javascriptreactjsreact-routersurge.sh
JakAttk123
JakAttk123

Reputation: 1806

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?

Upvotes: 10

Views: 19017

Answers (3)

Rob Fleischmann
Rob Fleischmann

Reputation: 63

I wanted to update the thread since I got this figured out. Changing

appHtml: resolveApp('public/mynewawesomeindexfile.html'),  //Change only this line

Only effects how it's sourcing the file during compiling. To keep npm start happy, I left that as is (including the filename in public). However, you can change the filename of the built html file in webpack.config.js around line #565:

plugins: [
  // Generates an `index.html` file with the <script> injected.
  new HtmlWebpackPlugin(
    Object.assign(
      {},
      {
        inject: true,
        template: paths.appHtml,
        filename: isEnvProduction ? 'mynewawesomeindexfile.html' : 'index.html'
  ...

I can confirm, after doing this, my build folder contains that filename instead of index.html. I hope this helps others when finding this thread :)

Upvotes: 0

Winston Jude
Winston Jude

Reputation: 599

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')),
};

Upvotes: 5

Xarvalus
Xarvalus

Reputation: 3021

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.

Upvotes: 12

Related Questions