In this lesson, we'll provide an overview of what our file's project structure will look like by the end of this course 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 │ ├── assets │ │ └── images │ │ └── image.jpg │ ├── css │ │ └── styles.css │ ├── circle.js │ ├── index.html │ ├── index.js │ └── triangle.js ├── 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 to be comprehensive.
bundle.js: webpack will automatically bundle all of the separate files (our JS, HTML, CSS, images, and other files) into one single file called
bundle.js. Then, this file will be added to a directory called
dist, which is short for distribution. This is where our finished code goes! We will never create this folder or 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.
circle.test.js and a
src directory and bundle everything together for us, turning it into
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. This includes processes like minifying code to make it smaller and concatenating files together into one single file.
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, which include automatically generated files and files with sensitive information (like passwords). 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.
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 about how to 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