My CLI for SPFx development

In my last post, I gave some personal tips on how to configure an SPFx project after it is created. And in that post, I mentioned a command-line interface (CLI) I am working on. And now I have released the first version with full documentation.

UPDATE: I introduced the CLI in the PnP community call. You can see the CLI in action here.

You are probably asking yourself, why create your own CLI at all? To be honest, the idea came up very spontaneously. I have many customers and for them, I create SPFx projects. The projects are (if not otherwise specified) always built and configured by me in the same way. But some configurations I can't (or don't want to) remember. So I "copy" the gulp and tsconfig configurations from other projects. I don't want to say that it takes a lot of time, probably a maximum of 15 minutes per project. But it sucks to copy and then paste everything etc. Besides, with time it became more and more configurations. Also, with such a CLI, I could provide a corporate standard. So that all my colleagues have the same procedure. And that's when the idea was born. A CLI should do this job for me. In addition, I have never created a CLI and wanted to expand my knowledge about it.

The first thing I had to figure out was how to create a CLI. Some tools can help with this like commander or yargs. I chose yargs for no particular reason. But what should the CLI be able to do?

As mentioned before, I wanted to map my typical configurations. Those who follow my blog know that I often give tips and tricks around SPFx development. That's why the CLI is based on the following blog articles:

• My personal tips how to configure a SPFx project after creation

• Using pnpm in SPFx projects

• Package SPFx solution with one command and automatically increase the version

• SPFx Azure DevOps Pipeline: Increment version, push to repository and publish package

I started with a single command, the init command. This configured everything from my last post.

1. A new folder @spfxappdev is created in the root directory of the project

2. The gulpfile.js file is modified: Aliases are registered, and the bump-version task is defined and the possibility to build your solution in such a way that a warning will not cause the build process to fail.

3. tsconfig.json is changed: Path aliases and baseUrl are set.

4. fast-serve/webpack.extend.js is changed (if available): Aliases are registered

5. The package.json file is modified: The publish and publish:nowarn commands are defined

After that I had the idea to install npm packages with the command. Mostly you use the same packages like @pnp/sp, then they should be installed when you call the init command. Of course it should be possible to disable it. And you should be able to configure the packages "globally". But how do you do that? After a little research, I found the package configstore.

And there was created another command config with "subcommands" to handle the configuration.

Because I don't use npm by now but pnpm, this had to be included as well. So I added the possibility to set the package manager, also using the config command.

And because I don't want to preset my settings, everybody should have the possibility to overwrite my templates. Therefore I have also created the possibility to specify own templates, which should be used when generating the ESLint and TSConfig files.

And then I had the idea that it should be possible to create a new project via the CLI. Nothing else is done than calling the yo @micrsoft/sharepoint command. Only that the configured package manager is passed automatically. In case of pnpm the following commands are also executed

pnpm config set auto-install-peers true --location project
pnpm config set shamefully-hoist true --location project

Another benefit is that you no longer have to type the long command yo @micrsoft/sharepoint. My CLI also has an alias, so you could for example enter the following command to create a new project

#Long form
spfxappdev new 
#Short form
spfx n

I don't want to go into detail now and explain every single command and what it is for. After all, that's why I wrote the documentation. For example, you can also create models or services that are automatically exported to the index.ts.

To keep it short, if you want to start with my CLI. Install it once globally:

npm i @spfxappdev/cli -g

Once installed, you can invoke CLI commands directly from your OS command line through the spfxappdev executable. If you want to start directly with a new project and the default configurations, then enter the following commands

#create a new SPFx Project
spfx new
#Initialize the project (alias, bump-version, publish command)
spfx init
#Create custom ESLint and TSConfig rules
spfx rules

That's it. Your project is created and configured. For more ways to use my CLI, you should read the documentation. I would be happy about the usage. I am looking forward to your feedback. I also like to hear suggestions for new features.

PS: I'm not done with the CLI yet. There will be more features to come. But currently, it is in a status that I can publish :)

Happy coding ;)