Step-by-Step Guide to Using the CLI
As with every framework, you have two options when it comes to setting up your project in React Native:
- You do a fresh install and add your modules one by one
- You clone a starter template, then start coding
Often, a starter template will be a perfect choice for getting things done quickly because it comes with a few easy-to-use screens and functions, but the catch is, because starter kits aren’t updated often, modules are usually at their latest. versions, so your entire app will probably be out of date.
So what can we do instead? Starting a project from scratch seems like the way to go, but how can we make the process easier and faster?
stop! Which CLI are we talking about? In this article, we will build our own CLI which we will use for upcoming projects. Our CLI will be responsible for installing React Native and modules you use frequently. We will also package our CLI and publish it on npm.
cold! Let’s get started!
For this project, we will use commander.js Since we are in a Node.js environment. Commander.js is a popular and popular tool for building commands in a fashion that you would use on a terminal. we will also use sheljs To run shell commands continuously in each OS environment.
Let’s first decide what will be in the box. Even though there are many great libraries for React Native, the required libraries are largely the same. Here is an example list of the modules I am using:
- React Navigation
- redux toolkit
- React Native Reanimated
- feedback question
- Formic and UP
Of course, yours may be different, so feel free to add yours. At this point, we can create an array of those modules like this:
Then, let’s install Commander.js by
npm i commander --save And start writing our CLI:
Here is the basic version of our command script, which triggers the react-native installation and exits afterwards. Let’s break it down to understand it better:
First, we have placed a shebang bash instruction at the top for our script to reach portability between Unix systems. It is also necessary for our script to behave like a cli when running. Then we introduce our program and define its name, version and description. I chose rncli as the name, which means that when you use it, you have to type
rncli in terminal. Commander.js programs contain commands, which contain arguments and which contain options. Think about npm when installing modules. For example, when you write the following:
npm install react-native --save
npmOur program is
install Our command is
react-nativeour argument, and finally
--save is our option. Same goes for this example. we got
install command, and we provide the directory to be installed as an argument.
there are arguments
[optional], If you omit a required argument, you will get an error.
Finally, in the last line, we provide an action to trigger, and we run the default react-native install command as if we were doing it from the terminal.
Now, let’s go ahead and install our modules:
Here we generate a concatenated string of module names and provide it
npm install command. we also give
--typescriptOption for users who prefer to write in TS.
At this point, we’ve achieved what we wanted: a simple, slick CLI that saves us a few minutes. However, you would like to improve it a bit more, right?
To make our CLI more friendly and more “modern”, we can add a wizard mode to guide users through the steps. This wizard explains what this program will do, asks for the preferred language, and lists the module names with their latest version numbers.
We start by first installing the module below:
npm i figlet axios inquier loading-cli --save
In short, Inquier allows us to display select lists and inputs. Figlet generates fancy ASCII text, loading-cli and colors-cli to add a bit of color and spinner to our CLI. We will also get the package version through the npm endpoint. Thus, we will use axios (which, to me, seems more convenient), but you can also use simple fetch.
Now we can add the new command “wizard”, pass no arguments, and let the program guide you step by step.
So, our final code will look like this:
cold! Our program is ready. If we pass a “wizard” argument like
rncli wizard First, it will list our modules and their latest versions and ask us if we want to continue. If we don’t, it will drop out immediately. Then it will ask for language and directory. After receiving that information, it will start installing modules as we did earlier in the bare CLI.
The final stage is publishing. Before sending our package to npm, make sure your
package.json These are the two entries:
"bin": "rncli": "index.js",
don’t be confused with
bin name here. The package name will be displayed in npm and not in the CLI name. If your name is taken, you can replace this name with something else.
Finally, log in to npm and publish your package:
this much only! Your CLI is publicly published to npm. Now you can test it quickly with
npx rncli wizard and check if things are working.
In this article, we briefly entered the world of CLI and learned how to create a command program in Node.js. It is not limited to React Native only. You can use this example and modify it for any language that uses npm, such as Angular, React.js, or bare Node.js. You can make it even better by adding a directory structure or make the terminal fancier by adding colors etc.
I hope it will be useful for you. If you have any comments please let me know!