
<p>For the past few weeks I&#8217;ve been working on a side project and documenting it in a series of blog posts. It&#8217;s been a pretty lengthy project so I wanted to take a quick break and write about my first experience publishing a package to NPM. The more I work in the code editor, I begin to see the need for helper functions that have common usage regardless of the project. My previous solutions for this were to re-write the helper function from scratch or, moderately more efficiently, copy and paste one I had written in a different project. </p>



<p>Today I decided it was time to at least start collecting these helpers in their own repo so I didn&#8217;t have to go hunting down that one project from months ago where I think I last used the function. I created a GitHub repo <a rel="noreferrer noopener" href="https://github.com/lucsedirae/helper-library" target="_blank" data-type="URL" data-id="https://github.com/lucsedirae/helper-library">https://github.com/lucsedirae/helper-library</a> and loaded the couple of helpers into an index.js file that I am constantly searching for to get it started. </p>



<p>Then the thought occurred to me that it would be nice to just install this index.js file via NPM and be able to import the functions like I would any other NPM published dependency. I wasn&#8217;t sure where to start so I did some Googling and discovered the process was actually really easy and NPM gives you unlimited public access packages with their basic free tier membership.</p>



<h2>Initializing package.json</h2>



<p>The first step after cloning down my repo that I initialized from the GitHub website GUI was to run <code>npm init</code> from the root directory of my new repo on my local machine. This executes a command line script that asks for basic information about your package and creates a package.json file in the project directory. It&#8217;s important to have a readme file, a license file, and make sure the NPM &#8220;entry point&#8221; is the name of the file you want to store your functions in. The default entry point suggested by the <code>npm init</code> script is index.js so that&#8217;s what I went with.</p>



<p>Inside index.js I wrote out the couple of helpers I am always searching for. The one I needed this morning was <code>formatDate()</code>. It&#8217;s a simple function that takes in an <code>incoming</code> UTI time stamp value, creates a new JavaScript date value using the Date constructor and then returns that new value using the toLocaleDateString method. I have some plans to expand the functionality of this over time so I use it regularly as a helper instead of doing both of those other processes inline for each use case. This is a much lighter-weight solution than importing a time-handling library like moment.js and keeps my codebase clean.</p>



<p>I pushed these initial functions up to my GitHub repo and was ready to publish the package to NPM.</p>



<h2>Publish to NPM</h2>



<p>Before you can actually publish your package you need to create an NPM account. You can do this from their website at <a rel="noreferrer noopener" href="https://www.npmjs.com/" data-type="URL" data-id="https://www.npmjs.com/" target="_blank">https://www.npmjs.com/</a> or from the command line by running <code>npm adduser</code>. Make sure to select a password longer than 10 characters. NPM will send you an email to confirm your address and once you have clicked on their confirmation link you are ready to publish.</p>



<p>Publishing was as easy as running <code>npm publish --access public</code> from the command line inside the root directory of the package you wish to publish. Once that script completed, I was able to test my publication inside a project. My package is published as my GitHub user name so I navigated to the project I wanted to use the function in and ran <code>npm i lucsedirae</code>. Then I imported the function in the file where I needed it to run:</p>



<p> <code>import { formatDate } from 'lucsedirae';</code></p>



<p>Then called the function:</p>



<p><code>  const todaysDate = formatDate(Date.now());</code></p>



<p>And voila! It worked like a charm!</p>



<h2>Caution!</h2>



<p>I noticed after running <code>npm i lucsedirae</code> that there were a lot of vulnerability notices in the terminal. I haven&#8217;t had a chance to dig into how to fix these issues but I do plan on doing so to expand my understanding of NPM and its package publishing environment. So, with that said, I would not recommend using a package like this in a production environment. When I publish my project I will replace that import with the helper functions hosted in a utils file inside the project until I better understand the security implication with using my own NPM package. But as a learning experience and a way to store common helper functions for practice projects, I was really satisfied with the results.</p>
