Tiffany R. White Blog

Dark Mode
Light Mode

My First Module: Lessons

February 06, 2019 • 🍵 4 min read

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 specifiying 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 <project/bin/new-post>

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.


Sign Up for the Newsletter. No spam. I hate that, too.


Buy Me A Coffee

Discuss on TwitterEdit on GitHub


Tiffany R. White Blog

Tiffany White

Blog of Tiffany White. Thoughts on React & web development.