Create a project using the `npm init initializer` command

The above video is hosted on egghead.io.

Historically, the npm init command was soley used to create a new package.json file. However, as of version 6.1.0, you can use a new feature of npm init called the <initializer>. The initializer you provide will determine how your new appilcation will be built. npm will prepend create- to the name of the initialier you provide and use npx to temporarily install and execute that project.

3 ways to create-react-app with npm

Depending on what version of npm you have installed, there are various ways to interact with npm packages. In order to see these differences, let’s focus on interacting with the create-react-app package to bootstrap a React application.

1. npm <= 5.1.0

If you have a older version of npm (less than or equal to 5.1.0), then you don’t have many options when using create-react-app. You are basically constrained to globally installing creat-react-app and then using it to bootstrap your app.

npm install create-react-app -g
create-react-app playground

The above will globally install the create-react-app from the npm registry and then utilize the global package to bootstrap the application.

Pros

Cons

2. npm >= 5.2.0

If you have a version of npm equal to or greater than 5.2.0, then you can use the npx tool that comes bundled with npm.

npx (among other things) will temporarily install a package if it’s not already installed globally. This is great if you want to experiment with a package or, if you run it so infrequently, you’d rather always have the latest version.

npx create-react-app playground

The above snippet will temporarily install create-react-app from the npm registry and then execute it in order to bootstrap the application.

Pros

Cons

3. npm >= 6.1.0

Finally, if you have a fairly recent version of npm (version 6.1.0 or above), then you have the newest way to initialize an app. The npm init command has been around for many years, but as of 6.1.0 there is a new <initializer> option that let’s npm know you’d like to use it to create or update your app.

Under the covers npm will prepend create- to the initializer you provide and then install and execute it with the npx tool (as we discussed up above).

npm init react-app playground

The above snippet will go out and find the create-react-app from the npm registry and then install and execute it with npx in order to bootstrap the application.

Pros

Cons

Other create-<initializers>

Above we looked at create-react-app, as an example, but there many are other initializers you can use as well, such as…

What is your favorite initializer? If you use one that isn’t on the above list, I’d love to know. Please let me know on Twitter at @elijahmanor!

Conclusion

Depending on your version of your npm, you can create projects in very different ways. If you have the latest version, you can use all 3 of the above techniques, including the new initializer option.

If you enjoyed this post, please consider sharing it with others via the following Twitter or Reddit buttons. I also have a YouTube Channel with free web development videos that you are welcome to watch and/or subscribe. As always, you can reach out to me on Twitter at @elijahmanor. Thanks and have a blessed day!

Reddit