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:
Improved text colors
Added TS support
Added a stepper
Absorbed the input for folder input
Explained why the script needs a GitHub Private Access Token
Add support for multiple package managers (npm, yarn, pnpm)
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.
This is what it looked like before:
This is what it looks now:
If you’d like to see how to publish an NPM package, take a look at the commit history.
Added TS support
I caught myself running the script 3 times in a row and having basic type errors, so I decided it was time to switch to 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 checking for an exception.
This code checks for npm
, yarn
, and pnpm
and adds those package managers to the array.
As you can see in the npx create-remix
command above, it accepts the package manager of choice.
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: ”. Here’s how that looks like:
Again, I open-sourced the code, in case you’re interested in seeing how all of this works.
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 works. 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 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 ♥️