What is the meaning of the /dist directory in open source projects?

To answer your original question about the meaning of the dist folder:

The shortform dist stands for distributable and refers to a directory where files will be stored that can be directly used by others without the need to compile or minify the source code that is being reused.

Example: If I want to use the source code of a Java library that someone wrote, then you need to compile the sources first to make use of it. But if a library author puts already the precompiled version into the repository, then you can just go ahead. Such an already compiled version is saved into the dist directory.

Something similar applies to JavaScript modules. Usually JavaScript code is minified and obfuscated for use in production. Therefore, if you want to distribute a JavaScript library, it's advisable to put the plain (not minified) source code into an src (source) directory and the minified and obfuscated version into the dist (distributable) directoy, so others can grab the minified version right away without having to minify it themselves.

Note: Some developers use names like target, build or dest (destination) instead of dist. But the purpose of these folders is identical.


To answer your question:

/dist means "distributable", the compiled code/library.

Folder structure varies by build system and programming language. Here are some standard conventions:

  • src/: "source" files to build and develop the project. This is where the original source files are located, before being compiled into fewer files to dist/, public/ or build/.

  • dist/: "distribution", the compiled code/library, also named public/ or build/. The files meant for production or public use are usually located here.

    There may be a slight difference between these three:

    • build/: is a compiled version of your src/ but not a production-ready.
    • dist/: is a production-ready compiled version of your code.
    • public/: usually used as the files runs on the browser. which it may be the server-side JS and also include some HTML and CSS.
  • assets/: static content like images, video, audio, fonts etc.

  • lib/: external dependencies (when included directly).

  • test/: the project's tests scripts, mocks, etc.

  • node_modules/: includes libraries and dependencies for JS packages, used by Npm.

  • vendor/: includes libraries and dependencies for PHP packages, used by Composer.

  • bin/: files that get added to your PATH when installed.

Markdown/Text Files:

  • README.md: A help file which addresses setup, tutorials, and documents the project. README.txt is also used.
  • LICENSE.md: any rights given to you regarding the project. LICENSE or LICENSE.txt are variations of the license file name, having the same contents.
  • CONTRIBUTING.md: how to help out with the project. Sometimes this is addressed in the README.md file.

Specific (these could go on forever):

  • package.json: defines libraries and dependencies for JS packages, used by Npm.
  • package-lock.json: specific version lock for dependencies installed from package.json, used by Npm.
  • composer.json: defines libraries and dependencies for PHP packages, used by Composer.
  • composer.lock: specific version lock for dependencies installed from composer.json, used by Composer.
  • gulpfile.js: used to define functions and tasks to be run with Gulp.
  • .travis.yml: config file for the Travis CI environment.
  • .gitignore: Specification of the files meant to be ignored by Git.

Actually! "dist folder" is the result you get after modifying a source code with "npm run build" or "ng build" or "ng build --prod" for production.

Meanwhile! After getting "dist folder" there might still be few things that you still need to do depending on your project type ✌️