22

Both use the README.md as the description when you publish. A common practice is to use a single shared file.

But what if I need to have the different Readme and still publish it from a single local repo with no manual editing/replacement

PS

I tried to use "readme": "npm-readme.md" in package.json but it displays a value of this field, not the content of а file

Oleg Pro
  • 2,323
  • 1
  • 15
  • 23
  • Although not directly answering this question, it is also worth mentioning that also some repositories are monorepos (e.g., Jest) and they use the "repository.directory" field of the package.json file to break the repository into multiple packages, and then each of them will be able to have its own README.md file. – aderchox Sep 02 '22 at 10:50
  • In this case, the problem can be the same - what shows GitHub in a package folder and what is shown on NPM page of this package. – Oleg Pro Sep 14 '22 at 02:36

5 Answers5

10

Good question mate! I prefer GitHub to NPM for a number of reasons, such as

a) the column on NPM is to narrow and all tables start to scroll b) there is no padding when images are aligned to left of right c) the TOC navigation does not work because anchor links are generated differently on GitHub and npm

Therefore I found a solution: add a README file, which will be read by NPM, and keep README.md file which will be read by GitHub. Easy-peasy but no guarantee it will continue to work.

zavr
  • 2,049
  • 2
  • 18
  • 28
  • 3
    so npm will take README instead of README.md? – Oleg Pro Oct 07 '18 at 11:27
  • 2
    yeah this is an npm page https://www.npmjs.com/package/@rqt/namecheap this is its github https://github.com/rqt/namecheap. You can try it on your package by publishing with a beta tag, e.g., yarn publish --tag beta – zavr Oct 07 '18 at 16:02
  • 2
    Great solution, mate! And damn simple! :) – Oleg Pro Oct 13 '18 at 15:06
  • @zavr — Good eye for pointing that out! Could you explain how jQuery did it? Their readme on npm is different than on github, but I can't find the npm readme file in the repo or in the gitignore. npm: https://www.npmjs.com/package/jquery/v/3.3.1 github: https://github.com/jquery/jquery/tree/3.3.1 – chharvey Feb 11 '19 at 04:16
10

For some reason zavr's answer (using README and README.md) didn't work when I tried it (probably the logic used by NPM has changed). But what did work is putting the GitHub README into .github directory (this is allowed according to their docs), and using the root README.md as the version for NPM along the lines of

<!-- README for NPM; the one for GitHub is in .github directory. -->

<badges>

<a brief description>

Please refer to the [GitHub README](https://github.com/<your repo>#readme) for full documentation.

Luckily, for GitHub .github/README.md seems to take priority over README.md.

Update 2021-02-06: a quick note about best practice. NPM wouldn't let you update the readme without bumping the package version, and in reality you often need to make updates, sometimes minor, to the docs. So I'd recommend to provide full docs in the GitHub readme, but still give a short description of the library on NPM, which in combination with keywords field of package.json will make the package more discoverable. It's also a good idea to include badges in the NPM readme because that will increase the quality score displayed by NPM (see discussion of "branding" score in this article).

Ivan
  • 1,317
  • 13
  • 23
  • 1
    Awesome mate this is the final solution! Really works, proof https://www.npmjs.com/package/@usulpro/readme-pro – Oleg Pro Jan 16 '21 at 17:50
7

One solution can be to use two readme files and rename them using npm scripting during npm publish.

This can be done as follows.

On source control, we would have the following files:

  • README.md - This is the default git readme where you would document your source.
  • npm.README.md - This would be the readme that would be seen on NPM.

Next, we would have the following in package.json (note that some contents are omitted).

{
  ...    
  "scripts": {
    ... 
    "build": "...",
    "use:npmReadme": "mv 'README.md' 'git.README.md' && mv 'npm.README.md' 'README.md'",
    "use:gitReadme": "mv 'README.md' 'npm.README.md' && mv 'git.README.md' 'README.md'",
    "prepublishOnly": "run-s build use:npmReadme",
    "postpublish": "npm run use:gitReadme"
  }, 
  "dependencies": {
    ... 
  },
  "devDependencies": { 
    ... 
    "npm-run-all": "^4.1.2", 
    ...
  }
}

In devDependencies, the npm-run-all package is used. This allows using the run-s command to run specified npm scripts sequentially.

in the scripts section, we have the following scripts:

Scripts to Rename README files

  • use:npmReadme - This simply backs up the current git specific readme, and then renames npm.README.md to be the default README.md.
  • use:gitReadme - This simply reverts back to using the git specific readme as the default README.md.

prepublishOnly

This is executed BEFORE the package is prepared and packed, and ONLY on npm publish. (Does not run with npm install).

Here, the solution is built, and then we run use:npmReadme.

postPublish

This is executed AFTER the package is published on npm.

Here, we run use:gitReadme to revert the readme files back to their original state.

More information on prepublishOnly and postPublish can be found here.

keshav.bahadoor
  • 1,886
  • 1
  • 13
  • 19
  • Thank you. This solution is one of the obvious and straightforward, but it is not very far from manual renaming. I asked more about the possibility of setting this through the settings. So I can't accept this answer but sure it could be used as a solution in some specific cases. – Oleg Pro Apr 24 '18 at 09:41
2

keshav.bahadoor's answer inspired me to use similar approach in GitHub workflows.

I'm using it as following:

  - uses: actions/checkout@v2
  ...
  - run: mv NPM-README.md README.md
  ...
  - run: npm publish --access public

I'm moving NPM-README.md to README.md only during workflow and not committing.

rest of the workflow yaml file

Note: This is working for GitHub workflows, not makes sense to use in your local.

Furkan Yavuz
  • 1,858
  • 5
  • 30
  • 51
1

  1. (the more good one) If we named the npm readme to README.md and the GitHub readme to readme.md. Then we can add readme.md for the npm ignore .npmignore and add the README.md for gitignore .gitignore.

  2. (the more bad one) Add npm.README.md and git.README.md. Remove the npm. or git. when commiting or publishing the git or npm.

tscpp
  • 1,298
  • 2
  • 12
  • 35