# My CLI for SPFx development

In my [last post](https://spfx-app.dev/my-personal-tips-how-to-configure-a-spfx-project-after-creation), 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](https://www.npmjs.com/package/@spfxappdev/cli) with full [documentation](https://github.com/SPFxAppDev/spfxcli#readme).

> UPDATE: I introduced the CLI in the PnP community call. You can see the CLI in action [here](https://www.youtube.com/watch?v=urhHe_NlYvI).

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](https://www.npmjs.com/package/commander) or [yargs](https://www.npmjs.com/package/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](https://spfx-app.dev/my-personal-tips-how-to-configure-a-spfx-project-after-creation)
    
* [Using pnpm in SPFx projects](https://spfx-app.dev/using-pnpm-in-spfx-projects)
    
* [Package SPFx solution with one command and automatically increase the version](https://spfx-app.dev/package-spfx-solution-with-one-command-and-automatically-increase-the-version)
    
* [SPFx Azure DevOps Pipeline: Increment version, push to repository and publish package](https://spfx-app.dev/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](https://spfx-app.dev/my-personal-tips-how-to-configure-a-spfx-project-after-creation).

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](https://www.npmjs.com/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](https://spfx-app.dev/using-pnpm-in-spfx-projects), 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

```bash
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](https://github.com/SPFxAppDev/spfxcli) also has an alias, so you could for example enter the following command to create a new project

```bash
#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](https://github.com/SPFxAppDev/spfxcli#readme). 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:

```PowerShell
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

```PowerShell
#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](https://www.npmjs.com/package/@spfxappdev/cli), you should read the [documentation](https://github.com/SPFxAppDev/spfxcli#readme). 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 ;)