142

I recently get started with react.

My index.html contains

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

and index.js contains

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

My doubt is I didn't mention index.js in any script tag in index.html. But how it is referencing the root div element in index.html? I was wondering as it is working fine. Please explain me.

I had run these commands to create the app

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
4
  • webpack is a bundler that bundles your JS to a single file (for instance index.js) and injects it to another (for instance index.html). Read more about webpack on their page, because it is pretty powerful and I can't explain everything they do
    – Lyubomir
    Jan 19, 2017 at 10:24
  • Where I can find that bundled file?
    – Ram_T
    Jan 19, 2017 at 10:26
  • I'm not that familiar with the setup of react-create-app, see in the console where it loads the file from. Most probably from webpack's server memory, because it comes with an own dev server or in dist/ directory
    – Lyubomir
    Jan 19, 2017 at 10:29
  • @Mr_Perfect If you want to see the inner workings of webpack in reactapp, run this command to eject explicit settings. npm run eject. In this way you will be able to see commands which create-react-app was using to build your application.
    – hhsadiq
    Feb 4, 2017 at 6:01

1 Answer 1

252

Create-React-App has a very interesting setup.

I started digging in the package.json npm script start

"start": "react-scripts start"

That takes me to their binary react-scripts under node_modules/.bin
I'll post the relevant stuff here.

switch (script) {
  case 'build':
  case 'eject':
  case 'start':
  case 'test': {
    const result = spawn.sync(
      'node',
      [require.resolve('../scripts/' + script)].concat(args),
      { stdio: 'inherit' }
    );

So this tells me that they are looking for script inside ../scripts/ folder.

So I go to the react-scripts npm module(node_modules/react-scripts) and open up the node_modules/react-scripts/scripts/start.js file since I was doing npm start.

Now here is where I found the webpack config I was looking for.
They were specifically referring to node_modules/react-scripts/config/webpack.config.dev.js. I'll post the relevant stuff here.

entry: [
  // Finally, this is your app's code:
  paths.appIndexJs,
],
plugins: [
  // Generates an `index.html` file with the <script> injected.
  new HtmlWebpackPlugin({
    inject: true,
    template: paths.appHtml,
  }),

So file referred by paths.appIndexJs is the entry file in the webpack config.

And they are using HtmlWebpackPlugin to load the html at the path paths.appHtml.

Final piece of the puzzle is linking this back to the files you posted. Posting relevant stuff from paths.js

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
  ...
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveApp('src/index.js'),
  ...
}

So inside your application directory,
appHtml is file public/index.html
appIndexJs is file src/index.js

Your two files in question.
Wow! That was quite a journey..:P


Update 1 - As of [email protected]

The react-scripts binary under node_modules/.bin has changed the logic as below. Essentially doing the same thing.

if (['build', 'eject', 'start', 'test'].includes(script)) {
  const result = spawn.sync(
    'node',
    nodeArgs
      .concat(require.resolve('../scripts/' + script))
      .concat(args.slice(scriptIndex + 1)),
    { stdio: 'inherit' }
  );

The webpack configs for dev & prod has been combined into one.
const configFactory = require('../config/webpack.config');

The HTMLWebpackPlugin config looks like this - This is since they have to conditionally add production config on top of this

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

The paths file code has some updates

module.exports = {
  ...
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveModule(resolveApp, 'src/index'),
  ...
};
4
  • Nice inside of the node_modules. unfortunately I guess they changed some names as I couldn't find node_modules/react-scripts path neither anywhere the node_modules/react-scripts/scripts/start.js file. Jul 25, 2019 at 9:14
  • @Carmine Can you please mention your version of react-scripts, I will update the answer if needed.
    – Aftab Khan
    Jul 31, 2019 at 8:59
  • This question popped into my mind, went digging into index.html, then started browsing and here I found it!! Good work :)
    – Uzair Khan
    Sep 24, 2019 at 7:59
  • 2
    @AftabKhan fantastic answer! I really appreciate your way of showing us how to dig up the relevant info! I am a backend person for much of my life, so as a newbie to JS/react, this is like godsend! Thx!
    – HAltos
    Dec 7, 2020 at 2:48

Not the answer you're looking for? Browse other questions tagged or ask your own question.