Where's the Connection Between Index.HTML and Index.Js in a Create-React-App Application

Where's the connection between index.html and index.js in a Create-React-App application?

Under the hood, Create React App uses Webpack with html-webpack-plugin.

Our configuration specifies that Webpack uses src/index.js as an “entry point”. So that’s the first module it reads, and it follows from it to other modules to compile them into a single bundle.

When webpack compiles the assets, it produces a single (or several if you use code splitting) bundles. It makes their final paths available to all plugins. We are using one such plugin for injecting scripts into HTML.

We have enabled html-webpack-plugin to generate the HTML file. In our configuration, we specified that it should read public/index.html as a template. We have also set inject option to true. With that option, html-webpack-plugin adds a <script> with the path provided by Webpack right into the final HTML page. This final page is the one you get in build/index.html after running npm run build, and the one that gets served from / when you run npm start.

Hope this helps! The beauty of Create React App is you don’t actually need to think about it.

How React JS index.js file contacting index.html for id references?

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 react-scripts@3.x

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

Why does create-react-app creates both App.js and index.js?

index.js is the traditional and actual entry point for all node apps. Here in React it just has code of what to render and where to render.

App.js on the other hand has the root component of the react app because every view and component are handled with hierarchy in React, where <App /> is the top most component in the hierarchy. This gives you the feel that you maintain hierarchy in your code starting from App.js.

Other than that, you can have the App logic in the index.js file itself. But it's something related to conventions followed by the community using the library or framework. It always feels good to go along the community.

reactjs create-react-app missing index.html in src folder

You have to check public folder in the root directory only. You will get your index.html would be there. and your index.js file which is in src folder is the single point of connection between them(main index.html in public folder and all Javascript code which is in src folder).

How does a React application start without explicit references to its JS implementation files?

Try running npm run build.
the index.html file discussed in the answer above is in the build directory produced by webpack after running that command.

Under the hood, Create React App uses Webpack with html-webpack-plugin.

this plugin will be producing the index.html file by using the index.html in the public directory as a template

Our configuration specifies that Webpack uses src/index.js as an “entry point”. So that’s the first module it reads, and it follows from it to other modules to compile them into a single bundle.

when running npm run build webpack starts with index.js and every time you import it includes that module in one script that would be injected into the index.html generated above as explained below in the answer you shared

We have enabled html-webpack-plugin to generate the HTML file. In our configuration, we specified that it should read public/index.html as a template. We have also set inject option to true. With that option, html-webpack-plugin adds a with the path provided by Webpack right into the final HTML page. This final page is the one you get in build/index.html after running npm run build, and the one that gets served from / when you run npm start.

This is my understanding I hope this helps.

---

Related Topics