JavaScript Project Initialization Tools Comparison
degit vs create-react-app vs sao
1 Year
degitcreate-react-appsao
What's JavaScript Project Initialization Tools?

Project initialization tools are essential for quickly setting up new JavaScript projects with predefined configurations and dependencies. These tools streamline the development process by providing boilerplate code and project structures, allowing developers to focus on building features rather than configuring their environments. Each tool offers unique features tailored to different use cases, making it important to choose the right one based on the project's requirements.

NPM Package Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
degit303,0087,126-934 years agoMIT
create-react-app136,684102,91538.4 kB2,284-MIT
sao12,1791,048-675 years agoMIT
Feature Comparison: degit vs create-react-app vs sao

Project Setup Speed

  • degit:

    Degit is designed for speed, allowing developers to clone project templates from Git repositories almost instantly. It skips unnecessary files, making it a quick solution for starting new projects based on existing templates without the bloat.

  • create-react-app:

    Create React App offers a fast setup experience by providing a complete React development environment with a single command. It abstracts away the complexity of configuring Webpack, Babel, and other tools, allowing developers to start coding immediately.

  • sao:

    Sao provides a flexible setup process that can be slightly slower than degit due to its customizable nature, but it allows for a more tailored project initialization experience. It is ideal for developers who need specific configurations from the start.

Customization Options

  • degit:

    Degit allows for minimal customization since it focuses on cloning existing templates. Developers can modify the cloned project as needed, but the initial setup is based on the template's predefined structure.

  • create-react-app:

    Create React App offers limited customization options out of the box, but it allows developers to eject the configuration if deeper customization is needed. This can be beneficial for larger projects that require specific configurations but may complicate the setup for smaller projects.

  • sao:

    Sao excels in customization, allowing developers to create projects from templates that can be tailored to specific needs. It supports various template engines and can be configured extensively, making it suitable for complex projects.

Community and Ecosystem

  • degit:

    Degit has a smaller community compared to Create React App, but it is widely used for quick project setups. Its simplicity and speed make it a popular choice among developers who need to clone templates quickly.

  • create-react-app:

    Create React App has a large community and extensive documentation, making it easy for developers to find resources, tutorials, and support. Its popularity ensures that it stays updated with the latest React features and best practices.

  • sao:

    Sao has a growing community and is gaining traction among developers who require more advanced project generation capabilities. While its ecosystem is not as extensive as Create React App, it offers flexibility that appeals to experienced developers.

Learning Curve

  • degit:

    Degit has a very low learning curve, as it simply clones existing templates. Developers familiar with Git will find it easy to use, making it an excellent choice for quick project setups.

  • create-react-app:

    Create React App is beginner-friendly, providing a straightforward setup for new React developers. It abstracts many complexities, allowing users to focus on learning React without getting bogged down by configuration details.

  • sao:

    Sao may have a steeper learning curve due to its advanced features and customization options. Developers need to understand template engines and configuration settings, making it more suitable for those with experience in project scaffolding.

Use Cases

  • degit:

    Ideal for developers looking to quickly start projects based on existing templates, such as boilerplate code for various frameworks or libraries. It is perfect for prototyping and experimenting with new ideas.

  • create-react-app:

    Best suited for new React applications, especially for beginners or small to medium-sized projects where a quick setup is essential. It provides a solid foundation for building React applications with minimal hassle.

  • sao:

    Perfect for developers who need a highly customizable project generator for complex applications. It is suitable for teams that require specific configurations and want to maintain a consistent project structure across multiple projects.

How to Choose: degit vs create-react-app vs sao
  • degit:

    Choose degit if you need a lightweight tool to clone a project template from a Git repository without the overhead of a full project setup. It's perfect for quickly starting projects based on existing templates, especially when you want to customize the initial setup without unnecessary files or configurations.

  • create-react-app:

    Choose Create React App if you are starting a new React project and want a zero-configuration setup. It provides a robust development environment with built-in support for modern JavaScript features, hot reloading, and a comprehensive build process, making it ideal for beginners and small to medium-sized applications.

  • sao:

    Choose sao if you are looking for a highly customizable project generator that allows you to create projects from templates with advanced features. It supports various template engines and provides a flexible way to scaffold projects, making it suitable for developers who need more control over the project structure and dependencies.

README for degit

degit — straightforward project scaffolding

Travis CI build status AppVeyor build status Known Vulnerabilities install size npm package version Contributor Covenant PRs Welcome

degit makes copies of git repositories. When you run degit some-user/some-repo, it will find the latest commit on https://github.com/some-user/some-repo and download the associated tar file to ~/.degit/some-user/some-repo/commithash.tar.gz if it doesn't already exist locally. (This is much quicker than using git clone, because you're not downloading the entire git history.)

Requires Node 8 or above, because async and await are the cat's pyjamas

Installation

npm install -g degit

Usage

Basics

The simplest use of degit is to download the master branch of a repo from GitHub to the current working directory:

degit user/repo

# these commands are equivalent
degit github:user/repo
degit git@github.com:user/repo
degit https://github.com/user/repo

Or you can download from GitLab and BitBucket:

# download from GitLab
degit gitlab:user/repo
degit git@gitlab.com:user/repo
degit https://gitlab.com/user/repo

# download from BitBucket
degit bitbucket:user/repo
degit git@bitbucket.org:user/repo
degit https://bitbucket.org/user/repo

# download from Sourcehut
degit git.sr.ht/user/repo
degit git@git.sr.ht:user/repo
degit https://git.sr.ht/user/repo

Specify a tag, branch or commit

The default branch is master.

degit user/repo#dev       # branch
degit user/repo#v1.2.3    # release tag
degit user/repo#1234abcd  # commit hash

Create a new folder for the project

If the second argument is omitted, the repo will be cloned to the current directory.

degit user/repo my-new-project

Specify a subdirectory

To clone a specific subdirectory instead of the entire repo, just add it to the argument:

degit user/repo/subdirectory

HTTPS proxying

If you have an https_proxy environment variable, Degit will use it.

Private repositories

Private repos can be cloned by specifying --mode=git (the default is tar). In this mode, Degit will use git under the hood. It's much slower than fetching a tarball, which is why it's not the default.

Note: this clones over SSH, not HTTPS.

See all options

degit --help

Not supported

  • Private repositories

Pull requests are very welcome!

Wait, isn't this just git clone --depth 1?

A few salient differences:

  • If you git clone, you get a .git folder that pertains to the project template, rather than your project. You can easily forget to re-init the repository, and end up confusing yourself
  • Caching and offline support (if you already have a .tar.gz file for a specific commit, you don't need to fetch it again).
  • Less to type (degit user/repo instead of git clone --depth 1 git@github.com:user/repo)
  • Composability via actions
  • Future capabilities — interactive mode, friendly onboarding and postinstall scripts

JavaScript API

You can also use degit inside a Node script:

const degit = require('degit');

const emitter = degit('user/repo', {
	cache: true,
	force: true,
	verbose: true,
});

emitter.on('info', info => {
	console.log(info.message);
});

emitter.clone('path/to/dest').then(() => {
	console.log('done');
});

Actions

You can manipulate repositories after they have been cloned with actions, specified in a degit.json file that lives at the top level of the working directory. Currently, there are two actions — clone and remove. Additional actions may be added in future.

clone

// degit.json
[
	{
		"action": "clone",
		"src": "user/another-repo"
	}
]

This will clone user/another-repo, preserving the contents of the existing working directory. This allows you to, say, add a new README.md or starter file to a repo that you do not control. The cloned repo can contain its own degit.json actions.

remove

// degit.json
[
	{
		"action": "remove",
		"files": ["LICENSE"]
	}
]

Remove a file at the specified path.

See also

License

MIT.