In this lesson, we'll provide an overview of what our file's project structure will look like by the end of this section. We'll also briefly describe the purpose of each file. Do not add any files to your project just yet. We will add them as they are needed. This lesson just provides an introduction to how our file structure will change, including contrasting it with our project's current file structure.

Here's the structure of our project so far:

├── index.html
├── src
│   ├── index.js
│   └── triangle.js
└── css
    └── styles.css

Here is what a "built" project will look like by the end of this section:

├── dist
│   └── bundle.js
├── __tests__
│   ├── circle.test.js
│   └── triangle.test.js
├── src
│   ├── index.html
│   ├── index.js
│   ├── circle.js
│   ├── triangle.js
│   └── css
|       └── styles.css    
├── package.json
├── package-lock.json
├── webpack.config.js
├── node_modules
├── .gitignore
├── .babelrc
├── .eslintrc
└── README.md

That is a lot more files! We will be creating some of these files manually and some will automatically be generated for us. Once again, do not add any of these files now. This lesson is just an overview of what our completed environment will look like at the end of this section.

Let's briefly summarize the purpose of each file. Remember, we will be exploring all these files in more depth soon - so these summaries aren't meant be comprehensive.

  • dist: We will use webpack to automatically bundle all our code in this directory. dist is short for distribution. This is where our finished code goes!

  • bundle.js: webpack will automatically bundle all our code into this file. We will never create this file manually - webpack will do it for us. If we want to open our project in the browser, this is the file we'll open.

  • __tests__: All of the tests we write will go in this directory. And yep, two underscores before and after is the naming convention! Each logic file will have its own test file and our finished project will have logic files for two shapes, meaning we will have a circle.test.js and a triangle.test.js.

  • src: Our src directory will contain all of our source code, and not just our JavaScript files. We'll put our HTML and CSS files in here, too. webpack will look in the src directory and bundle everything together for us, turning it into dist/bundle.js.

  • package.json: This file has a list of all of our project's dependencies (packages our project needs) so we can easily and automatically install them. It also contains other important information about our project.

  • package-lock.json: This file will automatically be generated for us when we install our dependencies. It includes an exact list of all the packages that are currently installed. This list will differ from the more general list in package.json, as many of the dependencies we'll use rely on yet other dependencies which will automatically be installed for us.

  • webpack.config.js: This will hold our webpack configuration, providing specific instructions on how webpack should process and bundle our source code.

  • node_modules: This directory contains all the dependencies our project needs. It is automatically generated for us and we should never edit anything in it, though sometimes we may need to delete this directory and rebuild it if we are having issues with our environment.

  • .gitignore: This will include all the files that we don't ever want to push to GitHub. Since we'll automatically generate some of our files, there's no reason for those generated files to be in GitHub. Other developers can clone our project and automatically generate those files, too.

  • .babelrc: This file holds our Babel configuration. Babel is a transpiler used to help browsers and parts of our application understand newer JavaScript syntax. We'll only be using Babel to make sure Jest (our testing framework) can run properly, but Babel can also allow us to use cutting-edge JavaScript tools in browsers that don't have support for those tools yet.

  • .eslintrc: This file holds our ESLint configuration. ESLint is a tool to "lint" our code, automatically alerting us about bugs and badly-written code.

  • README.md: Our projects should always include a README. It becomes even more important once we start using an environment because we need to provide exact instructions for other developers to automatically set up the same environment when they clone our projects.

That's a lot of files. It may seem over the top for smaller projects. Chances are, though, that down the road you won't just be building little projects. Enterprise applications are a lot bigger and more involved than this. Also, in the real world, it's very rare that you'll be building a project from scratch - you'll be jumping right into a much larger codebase.

In the next lesson, we'll actually start building out our environment further - starting with creating a package.json file.

Lesson 4 of 46
Last updated November 24, 2021