My First Module: Lessons

I am publishing this here first before my blog. Let’s see how this works.

Joel Hooks, creator of egghead.io wrote a post on automating new posts for Gatsby with a basic npm script.

I decided that, with a few modifications specific to Gatsby Starter Blog, I would publish it as a package on npm.

First to market? Hardly ever

I had the seriously amateur notion that I would be the only one with this script in the registry. There were a couple others already, some more thought out than mine, using way more technology than needed but hey. I guess it looks good on your GitHub.

It didn’t stop me though.

I continued to research how to make the module and publish it.

Errors

There are too many errors here to list. Last night I was so frustrated with Googling, I went to the npm support forums and asked what seemed to be like a newb question.

I got a response though that got me thinking about how I was structuring my package.json file.

Take a look at the old package.json file:

{
  "name": "new-post-gatsby-starter-blog",
  "version": "1.1.5",
  "description": "create a new post in gatsby starter blog format with a simple command",
  "main": "/bin/index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/twhite96/gatsby-starter-blog-new-post.git"
  },
  "bin": {
    "new-post": "bin/new-post.js"
  },
  "keywords": [
    "gatsby-starter-blog",
    "blog",
    "post",
    "gatsby",
    "npm"
  ],
  "author": "Tiffany White",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/twhite96/gatsby-starter-blog-new-post/issues"
  },
  "homepage": "https://github.com/twhite96/gatsby-starter-blog-new-post#readme",
  "devDependencies": {
    "date-fns": "^1.30.1",
    "slug": "^0.9.3",
    "slugify": "^1.3.4"
  },
  "dependencies": {
    "shelljs": "^0.8.3"
  },
  "scripts": {
    "new-post": "new-post"
  }
}

Here, I was using core dependencies as dev dependencies. I should really research the difference, because when the person on the forums ran my script, he got an error related to having slug as a dev dependency:

"devDependencies": {
  "date-fns": "^1.30.1",
  "slug": "^0.9.3",
  "slugify": "^1.3.4"
},

I decided to move these to the core dependencies and rerun things.

Scripts unneeded

Another pain point was that I was cobbling together information from all across the internet and trying to parse it all was a problem. I got information from YouTube, the npm blog, Medium, anywhere I could find how to do this, I tried to implement in my own module.

One of the things I was doing wrong was using an arbitrary npm script as well as putting the executable in the bin folder and specifying this in the package.json file.

I removed the scripts object, first. Secondly, whenever I was trying to run it I was running it with npm run new-post to which I got the error: missing script: new-post. I don’t know why that is, but further research is needed on npm scripts.

Global install

The forum commenter showed me how he installed it and ran it.

npm install --global new-post-gatsby-starter-blog

I wasn’t installing it globally and I still don’t have it local to a specific project; I am working on this.

He also ran the script with new-post and it worked, but there were errors.

One was the slug issue. I fixed that, but I was still getting weird errors.

Can’t find module

This one was weird and I attributed it to not having my main object pointing to the right file. With that modification and removal of the scripts object, everything is working as it should.

Lesson: research before doing something like this

I did it hastily to just have it up there first which meant there were pretty bad errors and frustrations that could have been avoided. I should have done more thorough research so that I wouldn’t have skimmed so much information on the topic, then trying to cobble together bits and pieces of videos and articles I found on the web.

Before I publish Check Yo Self CLI I plan on doing a bit more research and planning.

Where to Find the Module

You can find it on npm and see releases on my GitHub.

P.S. If you like what I am doing here, be sure to  subscribe, follow me on Twitter, buy me a coffee, a book, or support me on Buy Me a Coffee and share the love. You can also subscribe to this newsletter’s rss feed or you can ask me anything.

👋🏾 Hi. I’m Tiffany White. I am a front-end engineer and egghead.io instructor. I sometimes contribute to open source, and blog about web development at Tiffany R. White Blog. I love JavaScript, React ⚛️, and herding cats 🐾 🐈