CODEWITHSUNDEEP
reactjsreact-native
Balamurali
Balamurali

Reputation: 23

React: how to change startup file index.html to other html page in start_url of manifest.json

In React, I need to change the starting page index.html to some other html page (eg: person.html as stating page). I have created person.html page inside public folder and changed in manifest.json and tried. but still it is taking index.html as priority.

manifest.json:

{

  "short_name": "React App",

  "name": "Create React App Sample",

  "icons": [

    {

      "src": "favicon.ico",

      "sizes": "64x64 32x32 24x24 16x16",

      "type": "image/x-icon"

    }

  ],

  "start_url": "./person.html", //here i have changed and tried

  "display": "standalone",

  "theme_color": "#000000",

  "background_color": "#ffffff"

}

Am expecting the result as while rendering, it should not run index.html and should take other html page.

Upvotes: 2

Views: 5941

Answers (1)

Winston Jude
Winston Jude

Reputation: 599

Assuming that you are using create-react-app to create the react application, you will need to eject the project to be able to rename it. Once the project is ejected, you can manually configure webpack, babel and all other dependencies. You will need to dive into the webpack settings to change this.

Without ejecting there is no other way. Please be careful as you cannot undo it.

First you will need to run:

npm run eject

in webpack.config.prod.js change filename to:

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

You can read more here: https://github.com/facebook/create-react-app/issues/1761

Edit:

Looks like the webpack configurations have changed in newer create-react-app versions. Here's how you would do it now:

First eject. Then open paths.js which is found in the config folder, and change the appHtml property in the module.exports.

Here is the modified exports object for you:

module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/person.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: 2

Related Questions