Publishing Nx Monorepo Angular App to NPM

Do you want to publish your nx monorepo app to npmjs.org? In this article, I will explain how can u publish your app to npmjs.org.

Introduction

In my monorepo, when I build my app then inside the dist folder I get my application dist/apps/onlinestore-dashboard. I will show you how to automate things such that you can publish it into npm.org. Then anyone can install it as node package and use it in .net project or any other server side project’s home page.

In Nx Monorepo Apps are not publishable by design

By default, Nrwl.Nx Monorepo Angular apps are not publishable. They don’t expect you to put your apps in npm.org or your local microsoft npm repository.

No package.json in App projects

Notice that in our application there is no package.json file. So by default it is not publishable to npm. If you build this application then you can notice inside the dist folder you will not have package.json file.

Lets see this in action go ahead in terminal and run nx build onlinestore-dashboard Check the dist folder you will see there is no package.json file.

In order to make your application as npm package you need to have package.json file.

Lets fix it I will have to:

• Add package.json to our application
• Copy the package.json file to the dist folder after build is done.

Adding new package.json file to app

Go to onlinestore-dashboard project and add a package.json file.

{
  "name": "@fsms/onlinestore-dashboard",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^10.1.6",
    "@angular/core": "^10.1.6"
  },
  "dependencies": {
    "tslib": "^2.0.0"
  }
}

If you want to publish to your local Microsoft npm repository. Then you must add .npmrc file to your application.

Copying Packag.json to Dist folder

Install copyfiles npm package as dev dependency.

Run below script

npm i -D copyfiles

Next lest create below script for copying package.json file in package.json file.

"copy:dashboard:prd": "copyfiles ./apps/onlinestore-dashboard/package.json ./dist"

If you want to publish to your local Microsoft npm repository. Then you must copy .npmrc file to dist folder.

I am planning to publish this application over public npm.org. Therefore, I am not adding any .npmrc file.

Building application

Now lets make a script which will build our application and then copy package.json file.

"build:dashboard:prd" :"nx build onlinestore-dashboard && npm run copy:dashboard:prd"

Lets run this above script.

Verify the dist folder and notice package.json file is now present.

Bumping the package.json version

If you do not bump the version of the package.json file. Then you will ended duplicate versions and npm.org will throw error something like this

ERR! You cannot publish over the previously published versions:

So lets add below scripts to bump the version.

"publish:dashboard:patch":"cd dist/apps/onlinestore-dashboard && npm version patch --force",
"publish:dashboard:major":"cd dist/apps/onlinestore-dashboard && npm version patch --force",
"publish:dashboard:minor":"cd dist/apps/onlinestore-dashboard && npm version patch --force"

Now lets run:

npm run publish:dashboard:patch

Notice version in package.json in dist folder increased to 0.0.2

{
  "name": "@fsms/onlinestore-dashboard",
  "version": "0.0.2",
  "peerDependencies": {
    "@angular/common": "^10.1.6",
    "@angular/core": "^10.1.6"
  },
  "dependencies": {
    "tslib": "^2.0.0"
  }
}

Publishing app in npm

Lets update our script to publish to npm add npm publish --access public.

"publish:dashboard:patch":"cd dist/apps/onlinestore-dashboard && npm version patch --force && npm publish --access public",
"publish:dashboard:major":"cd dist/apps/onlinestore-dashboard && npm version patch --force && npm publish --access public",
"publish:dashboard:minor":"cd dist/apps/onlinestore-dashboard && npm version patch --force && npm publish --access public"

Login to npm run npm login enter your username, password and email id.

Verify app is published

Login to npm.org and go to your account and search for your package.

https://www.npmjs.com/package/@fsms/onlinestore-dashboard

Conclusion

You learn how to publish a package to public organization. Still if you have a nrwl.Nx monorepo. Then you need to write custom node.js code to identify which application is changed then bump the version for that application only and publish the same app to npm registry. In my next article I will explain that in detail.

Become full stack developer 💻

If you want to become full stack developer and grow your carrier as new software developer or Lead Developer/Architect. Consider subscribing to our full stack development training programs. We have All-Access Monthly membership plans and you will get unlimited access to all of our video courses, slides, source code & Monthly video calls.

• Please subscribe to All-Access Membership PRO plan to access current and future angular, node.js and related courses.
• Please subscribe to All-Access Membership ELITE plan to get everything from PRO plan. Additionally, you will get access to monthly live Q&A video call with Rupesh and you can ask doubts/questions and get more help, tips and tricks.

Your bright future is awaiting for you so visit today FullstackMaster and allow me to help you to board on your dream software company as a Developer,Architect or Lead Engineer role. 💖 Say 👋 to me!

Rupesh Tiwari

www.rupeshtiwari.com

✉️ Email Rupesh

Founder of Fullstack Master