Building an NPM package

If you're new here, I'm André, a tech entrepreneur and founder of LaunchFast, a stack designed to help web developers significantly speed up their project development time. I post daily updates on my journey and progress. ------------------------ Today I worked to improve the “npx -y launchfast” command. Here’s what got done: 1. Improved text colors 2. Added TS support 3. Added a stepper 4. Absorbed the input for folder input 5. Explained why the script needs a GitHub Private Access Token 6. Add support for multiple package managers (npm, yarn, pnpm) 7. Show the number of steps ## Improved text colors One of the CLI UI components is called a note. A note has a title and a description. The description used to be faded out. I've improved the contrast ratio to make sure developers don't skip that section. ## Added TS support I caught myself running the script 3 times in a row and having basic type errors, so I decided to use TypeScript. Developing with TypeScript is such a breeze ♥️ You avoid running invalid code because all type errors are gone, you get auto-completion, and GitHub Copilot’s suggestions are better. ## Added a stepper When you’re building a CLI, it’s often the case you need a stepper. This is a simple technique. The steps variable is just an array of functions you call with a shared context, so they share data between themselves. This allows me to isolate each step into its function, making the code more modular and manageable. ## Absorbed the input for folder input When `npx -y launchfast` is done getting the info from the user, it runs `npx create-remix@latest`. Unfortunately, the create-remix command doesn’t have the best error validation for the folder name, failing when the user inserts an absolute path (without ./). Luckily, create-remix accepts a folder name as an argument, so I ask the user (with proper validation) the name of the folder he wants to create and pass that down to the create-remix command. Here’s what that looks like at the moment: const command = `npx --yes create-remix@latest ${ctx.folderName} --package-manager ${ctx.packageManager} --git-init --install --init-script --template andrecasal/launch-fast-stack --token ${ctx.privateAccessToken}` I’m happy my users don’t have to type that in manually 😄 ## Explained why the script needs a GitHub Private Access Token I was afraid of making the prompts too long. I sacrificed clarity because of it. But after hearing almost every developer wonder what the GitHub Private Access Token was for, I changed the prompt to something more obvious: “We need a Private Access Token (PAT) to download the template. Open GitHub to create one (use the default read-only scope, scroll down, and press "Generate token")?” ## Add support for multiple package managers (npm, yarn, pnpm) Adding support for multiple package managers was surprisingly easy. It’s as easy as running `npm --version` and catching an exception. Now the CLI supports installing LaunchFast with npm, yarn, or pnpm. ## Show the number of steps A nice tip I’ve got from testing with users was to show the user where he was in the process. So I’ve added a “Step n/total: ”. This makes navigation and managing expectations considerably easier. ## Next Steps Tomorrow I’ll try to make Fly’s CLI installation automatic. The challenge with this is not installing Fly’s CLI itself, but reloading the environment variables so that the `fly --version` command is recognized. I’ll let you know how I solve that. Then I’ll apply all the other minor improvements to the CLI and test with new developers to see how they feel about it. After that’s done, I’ll record a demo video to put on the landing page 🚀 That’s it, folks. I hope this post is useful to you. Feel free to dive into the open source code or ask me questions on 𝕏 in case you’re building an NPM package or a Remix Stack initialization script. Cheers, and have a great weekend ♥️