Published my first npm package!

I published my first package to NPM. I didn’t start my day off with that intention, so it’s still an early days WIP (Work In Progress). But I’m proud of the baby step in just doing it.

The problem I was trying to solve was taking all the learnings of composing my last React application from a previous project, into any new project.

Create-react-app (CRA) already did a great job of generating the boilerplate for a new React project without the need to know the intricacies of babel, webpack and the various other bits to get a build going for a new React application. The CRA’s Typescript template allows Typescript to be nicely integrated as part of the boilerplate code it generates.

This great article then basically showed me how to package this all up into a template that could be published in npm’s public repository that I could then call for any new project. Pretty sweet. Hopefully others find it useful too. There’s also good official documentation about creating custom CRA templates.

My modifications to date include:

1. Adding moment (for handling date/times properly)
2. Adding antd (The Ant Design System, which gives me a rich set of useful UI components)
3. Adding react-router-dom (which is the usual way to go about doing routing, and I’m not geek enough yet to have an opinion on any others)

You can check out my published package cra-template-typescript-redditech and give me some feedback if there’s something you see I can add to help make it better if you’re so inclined.

Side note: After the project was delivered, while deep diving behind CRA and parallel to publishing this npm package I also did start to delve into the build aspects that CRA hides so well to help me understand better how I’d go about doing what CRA did from scratch, and found other neat tools like parcel that could get you to running code quicker and make going down that path more fun as well. I highly recommend doing some learning spikes behind the magic of CRA and see which part of Wonderland this rabbit-hole leads you to.