shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.1
Tags: javascript, nextjs, opensource, shadcnui
Published: 2024-06-27 20:51:25

I wanted to find out how shadcn-ui CLI works. In this article, I discuss the code used to build the shadcn-ui/ui CLI.

In part 1.0 and part 1.1, I discussed the code written in [packages/cli/src/index.ts](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/index.ts). In part 2.0, I talked about how the commander.js is used along with zod to parse the CLI argument passed. In Part 2.1, we will look at few more lines of code.

```js
const cwd = path.resolve(options.cwd)

// Ensure target directory exists.
if (!existsSync(cwd)) {
  logger.error(\`The path ${cwd} does not exist. Please try again.\`)
  process.exit(1)
}

preFlight(cwd)
```

We will look at below concepts based on the code snippet above:

1.  path.resolve
2.  Ensure target directory exists
3.  preFlight function
4.  fg.glob

path.resolve
------------

The path.resolve() method resolves a sequence of paths or path segments into an absolute path. ([Source](https://nodejs.org/api/path.html#pathrelativefrom-to))

cwd is a CLI option that you pass when you run the shadcn-ui/ui init command.

![](https://media.licdn.com/dms/image/D5612AQEkR5L6lQrMqw/article-inline_image-shrink_1500_2232/0/1719521003607?e=1724889600&v=beta&t=3mDROrcX9CmDK1NWL0iifibbMUczscJ5h_KgOb9LaHA)

The [official CLI docs](https://ui.shadcn.com/docs/cli) has the below options for the init command.

```
Usage: shadcn-ui init \[options\]

initialize your project and install dependencies

Options:
  -y, --yes        skip confirmation prompt. (default: false)
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  -h, --help       display help for command
```

Ensure target directory exists
------------------------------

```js
// Ensure target directory exists.
if (!existsSync(cwd)) {
  logger.error(\`The path ${cwd} does not exist. Please try again.\`)
  process.exit(1)
}
```

This code snippet is self explanatory, it checks if the target directory exists; if it does not, the code logs the message and process exits.

```js
import { existsSync, promises as fs } from "fs"
```

existsSync is an import function from “fs”.

preFlight function
------------------

![](https://media.licdn.com/dms/image/D5612AQEnHcJY1eFjDQ/article-inline_image-shrink_1000_1488/0/1719521003854?e=1724889600&v=beta&t=vEDtOAcazBhrnssY8KZeOwQ9W5ehuKuDZQUZQ5t27os)

preFlight is a function that checks that tailwind.config.\* file exists, otherwise throws an error.

### fg.glob

import fg from "fast-glob"

preFlight validates that tailwind.config.\* file exists by using function named glob.

```js
// We need Tailwind CSS to be configured.
const tailwindConfig = await fg.glob("tailwind.config.\*", {
  cwd,
  deep: 3,
  ignore: PROJECT\_SHARED\_IGNORE,
})
```

fast-glob is a package that provides methods for traversing the file system and returning pathnames that matched a defined set of a specified pattern according to the rules used by the Unix Bash shell with some simplifications, meanwhile results are returned in **arbitrary order**. Quick, simple, effective. ([source](https://www.npmjs.com/package/fast-glob))

Conclusion:
-----------

We looked at few more lines of code from init.ts command related file. There a couple of safeguarding techniques here, one is if the target directory does not exist, exit the proccess and log an error and the second one is, detecing the tailwind.config.\* using fast-glob package since tailwind is required for shadcn-ui to work properly.

Never forget to put your defensive mechanism in case the program fails as it is not always guaranteed to execute successfully.

> _Want to learn how to build shadcn-ui/ui from scratch? Check out_ [_build-from-scratch_](https://tthroo.com/)

About me:
---------

Website: [https://ramunarasinga.com/](https://ramunarasinga.com/)

Linkedin: [https://www.linkedin.com/in/ramu-narasinga-189361128/](https://www.linkedin.com/in/ramu-narasinga-189361128/)

Github: [https://github.com/Ramu-Narasinga](https://github.com/Ramu-Narasinga)

Email: [ramu.narasinga@gmail.com](mailto:ramu.narasinga@gmail.com)

[Build shadcn-ui/ui from scratch](https://tthroo.com/)

References
----------

1.  [https://www.npmjs.com/package/fast-glob](https://www.npmjs.com/package/fast-glob)
2.  [https://nodejs.org/api/path.html#pathrelativefrom-to](https://nodejs.org/api/path.html#pathrelativefrom-to)
3.  [https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/init.ts](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/init.ts)
4.  [https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L179](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L179)