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:
shape-tracker/ ├── 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:
shape-tracker/ ├── 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
src directory and bundle everything together for us, turning it into
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.
.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
Lesson 4 of 46
Last updated November 24, 2021