FHL - create & publish your own NPM package

Install/aquire prerequisites for this exercise

1. Download Visual Studio Code

   https://code.visualstudio.com/

2. Download Node JS

   https://nodejs.org/dist/v10.15.3/node-v10.15.3-x64.msi

3. Download Git Bash

   https://git-scm.com/download/win

4. Register for new NPM account here, remember the credentials for later.

   https://www.npmjs.com/signup

Follow the steps below

• Step 1

  Create a new empty directory where you will be storing the code for your new NPM package. It is important for this directory to be empty.

  e.g. d:\work\fhl-npm

• Step 2

  Press Windows + S -> Type vscode in the search box and open the first result that reads Visual Studio Code.

  Inside VS Code window' Click File -> Open Folder -> Select the directory created in Step 1.

• Step 3

  Press Ctrl + Shift + P -> Type Terminal: Select Default Shell -> Select Git Bash.

• Step 4

  Press Ctrl + Shift + `. It will open a new Git Bash terminal window within VS Code.

• Step 5

  Type following command into the terminal window to download demo code on to your machine.

  git clone https://github.com/hiraldesai/fhl-npm ./

  Notice the "./" at the end of the command, this is to ensure you don't end up creating an extra directory under the current one.  

• Step 6

  In the file explorer pane on the left of VS Code window:

  • Open the src/index.ts file, uncomment lines 2-18, and press Ctrl + S to save the file
  • Open the test/index.spec.ts file, uncomment the code block 6-26, and press Ctrl + S to save the file

  Uncommenting in TypeScript is done by removing the /* */ around the code block

  Observe the code in both these files – demonstrator will talk about it.

• Step 7

  Go back to VS Code terminal window and run following commands one at a time:

  npm install
  npm run build
  npm run test

  Observe the output every step of the way – demonstrator will talk about it.

  As long as you don't see any red text in the terminal window while running this, you're good. If you do, please call for assistance.

• Step 8

  Open package.json file in the editor and provide unique name for the package. Replace hidesai with your alias to ensure uniqueness of the npm package name. This is a unique name with which your npm package will get registered in the npmjs.org registry and you will not be able to use a name that's already been taken.

  

  Observe other values in this file - demonstrator will talk about it.

• Step 9

  Go back to VS Code terminal window and run this command:

  npm login

  When prompted, provide the credentials you used when signing up for your npm account when doing prerequisites.

• Step 10

  npm publish –dry-run

  This will ensure everything is correctly setup for publishing. Now, you're ready to publish your package to the entire world!

  npm publish --access=public

  This will publish the package to the npmjs.org registry.

• Step 11

  Go to - https://npmjs.com/, login to your account if you aren't already logged in and verify the version of the package that you just published is available. You should also receive an email on the email address you used for your account when signing up confirming the package has been published.

  

• Step 12 (Optional) – if you have an existing node/react app you want to test the new package on

  Install the package onto your app by running this command

  npm install fhl-hidesai-calculator

  Open existing or create a new file that will always execute (or an entry point) in your app (e.g. index.tsx in React app)

  Add following import to import the calculator exported by your npm package.

  import { calculator } from "fhl-hidesai-calculator";

  Add following snippet to the file to test your calculator.

  var x = calculator.add(15, 25);
  console.log("adding 15 to 25 results in: ", x);

  Run the app and observe the console and verify it prints following message:

  adding 15 to 25 results in:  40