Why is there always an index.html file and an index.js file

In all of the quality assurance projects there are repls with an index.html file and an index.js file

I was wondering what kind of code/information/actions you’re meant to place in each (for future reference when I build my own full repl)

Why not just have one single index file? What are you trying to seperate out?

e.g.


the two files might share a name, but they are written in different languages, thus serving different purpose.
As you might guess, the html file is your document main content, or at least the one the browser would look for. Its like the root, where links to other data and features of your document are available. You will find a link to the css file, which is responsible for the document styling. You can find links to images, frameworks as well as other content of your page. You can also find script reference, leading to your logic, which is commonly established via javascript. Instead of include the logic in the same document, between the script tags of the html, it would link to a separate file, wrote in the JS conventions, where the logic of your document will take place. The more complex and large your web app becomes, the more files you would want the content to be split, to have some sort of structure. In theory, you can write your whole page in one big file, the logic, the html structure, the styling and whatnot, but it will produce one big abomination it would be hard to work with. Humans like thigns to be ordered and structured(most of the time) so our brains can work with the current task, the current problem instead of dealing with a huge mess. You can even notice, how in the project files, the logic itself is split into separate files, some representing simply the data, some including a specific logic, some including test suite and so on.
PS: index is a naming convention, but beside that, many tools would target that name by default. For example, if you want to import a file from a given folder, using JS, if you dont provide a file name, the file named ‘index’ will be targeted by default.

Just as a word of warning: this is explicitly not default behaviour, it’s just how some tools work, as a convenience. JS requires fully resolved file names. It’ll work in something like the environment that this project is being developed in, and it’ll work fine (I rely on this behaviour quite a lot). But if you use actual JS modules, eg in a browser environment, this will just fail, because there’s no file specified, so there’s nothing to import

It is how Node resolves CommonJS file imports. If there isn’t a configuration set that specifies which file to look for first, then it will default to using index.js if there is a file of that name in the folder it’s searching in. And most current build tools use Node, so they’ve inherited this behaviour.

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.