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

Since I first saw a dist/ directory in many open source projects, usually on GitHub, I've been wondering what it means.

With dist, vendor, lib, src, and many other folder names that we see quite often, I sometimes wonder how I should name my own folders.

Correct me if I'm wrong!

  • src: Contains the sources. Sometimes only the pure sources, sometimes with the minified version, depends on the project.
  • vendor: Contains other dependencies, like other open source projects.
  • lib: Good question, it's really close to vendor actually, depending on the project we can see one or another or both...
  • dist: From what I saw, it contains the "production" files, the one we should use if we want to use the library.

Why is open source so confusing? Isn't it possible to do things clearer? At least per language because some languages use specific names.


Solution 1:

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.
  • 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.

Solution 2:

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.

Solution 3:

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 ✌️

Solution 4:

Summary of the folders:

  • bin: binaries
  • src: source
  • include: C/C++ headers
  • lib: C/C++ libraries
  • contrib: contribution from other people
  • doc/docs: documentations
  • man: manual (Unix/Linux)