What Should be Your Package.json Look Like
By: Rohit Jain
Tags: NPM, Json, Node, Packagejson, Js

When you create a project using NPM or Yarn Your project director has this file. Package.json is the Core file of the Node.js System. It is the manifest file of any Node project and contains all the configuration, dependencies, and metadata about the project. As a form extension, you can say it is a JSON(JavaScript Object Notation) file. So, you should know a bit about JSON before working on this file. A lot of things described in this file are affected at the configuration time.

let’s see an example of a complete Package.json look like:

Let’s first talk about how you create a package.json file

You are about to create a package.json file that means you are going to start a node project to create a full-fledged application or a package.

Prerequisites: You need to have Node installed it comes with npm (Node package manager) too. Then using the console run the following command

npm init answer the question in the command line and you will have your package.json

if you want to set all the answer to be default then you can just run this command

npm init -y

This will create a package.json file with default values and after that, you can edit the file and install other modules using npm i or npm i -D

name

Rules for name

The name must be less than or equal to 214 characters. All letters need to be lowercase letters The name must only contain URL safe characters. The name will probably be used as an argument to require(), so it must be short and descriptive.

version

If you make an update in your application or package then this field needs to be updated as well. Version is defined as 1.2.3 in this 1 represents a major change, 2 represents minor change and 3 represents a patch. So, if you make a patch in your app then update the last place as 1.2.3 to 1.2.4. if you make a minor change then update the 10th place as 1.2.3 to 1.3.3. and if you make a major change in your app like adding something big then you need to update as 1.2.3 to 2.2.3.

If you don’t want to publish then name and version fields are optional. But if you want to publish as a Package, then These together act as an identifier that is assumed to be unique for every package.

description

The field helps people to know your application or package. When they reach the app they will read this and get to know about your app. So this must be a short paragraph and make it as much as possible descriptive, so anyone will understand your app easily.

author

author means “you” the developer of the app, this is an informative field that helps us to get to know and reach the author of the app.

There are two ways you can define author in package.json as an object

or in short

contributors

this is an array of people that contributed to your project, you can add the name of the contributors to give them the credit for their hard work. Defining contributors is the same as the array of authors.

[{ “name”: “Rohit Jain”, “email”: “rohitjain19060@gmail.com”, “url”: “https://kingtechnologies.in/" },{ “name”: “Rohit Jain”, “email”: “rohitjain19060@gmail.com”, “url”: “https://kingtechnologies.in/" }]

or in short

[ “Rohit Jain <rohitjain19060@gmail.com> (https://kingtechnologies.in/)", “Rohit Jain <rohitjain19060@gmail.com> (https://kingtechnologies.in/)" ]

main

This field describes the entry point of your app. This should be a module relative to the root of your package. Developers mostly use the server file as the main.

homepage

This is a URL field where you put the home of the app as a string

“homepage”:”https://sleepy-peak-88767.herokuapp.com/"

private

this is a boolean field if you make it true npm will refuse to publish it. This is the way to prevent accidental publication. Mostly used when creating an application.

repository

This field specifies where is the code stored like Github or Gitlab link. where people can make requests, describe their issues, or want to contribute to your app. For example

{ “type”: “git”, “url”: “https://github.com/Rohit19060/mern-share-note" },

you can also use a shorthand for it as

“repository”: “github:Rohit19060/mern-share-note”, “repository”: “gist:110234e33e81”, “repository”: “bitbucket:user/repo”,

bugs

This is also a URL field for the issue tracker although mostly its same as the repository link as most of the VCS comes with the issue tracker. You can also provide an email here if you don’t have any issue tracker.

{ “url” : “https://github.com/Rohit19060/mern-share-note/issues", “email” : “rohitjain19060@gmail.com” }

In another way, you also can define one of them directly as a string instead of an object.

dependencies

This is one of the most important fields in package.json as it contains package names that your app will be utilizing. Don’t play with version number if you don’t sure what you are doing. This field is specified in a simple object that maps the package name to a version. Dependencies can also be identified with a tarball or git URL. This field gets automatically updated whenever you install a package using npm i

scripts

This field is also very important as it contains all the script commands that you can run according to your need. It can contain any number of commands like start, build, dev, serve, test, predeploy, postdeploy, server, etc., and all the scripts are associated with their respective module script commands.

“start”: “react-scripts start”, “build”: “react-scripts build”, “test”: “react-scripts test”, “eject”: “react-scripts eject”, “dev”: “concurrently \” nodemon server\” \” npm run start\””, “serve”: “node server”

devDependencies

This field is the same as dependencies but the package that is in the fields is only for development not for production. So, whenever you install a development package like nodemon using npm i -D then this field gets automatically updated. This will also help others as they don’t need to install your test or documentation frameworks that you used when you developing the app.

browserlist

People ask me a lot about what is your browserlist, when I created my default browserlist is very much like create-react-app So, when I saw that list, then I was very confident about the default list I was using. This field helps people to on which version of the browser your app will run best.

license

When you put a hell of amount of hard work into developing something then others should respect that. They shouldn’t just use your hard work and get credit for it. You should get credit for your hard work. So, you should specify a license for your package, so people will know how they are permitted to use your app and what restriction you are placing on it. If you’re using a common license such as BSD-2-Clause or MIT, add a current SPDX license identifier for the license you’re using, like this:

{ “license” : “BSD-3-Clause” }

and if you don’t want to grant others the right to use your app under any terms then you can make it as “UNLICENSED”

keywords

This field helps people discover your package it works the same as SEO, put the keywords that best describe your app. It is an array of strings.

funding

This field contains information about the ways to help fund the development of your app, You can specify an object or a donation URL, a Patreon link, or an array of string or object for example:

“funding”: { “type” : “Streamelements”, “url” : “https://streamelements.com/kingtechnologies/tip" }, “funding”: { “type” : “patreon”, “url” : “https://www.patreon.com/KingTechnologies" },

engines

This field has info about which node,npm, and yarn version is best for your app. I recommend adding this whenever you start your project so that you also know about it. If there is some version issue then you know which version your app is working completely fine. For example.

“engines”: { “node”: “>= 15.7.0”, “npm”: “>= 7.0.0”, “yarn”: “¹.22.0” },

Thank you. This is all you can do with package.json.

Let me know if you have any questions or queries. I’ll be happy to help you. Like, share, and follow. Thanks for reading.