01-create-a-project.md

Create a project

Recall that @codemod-utils/cli automatically adds @codemod-utils/files and @codemod-utils/tests. We will instruct the CLI to also add @codemod-utils/blueprints, so that we can use blueprints to create files.

Goals:

• Use @codemod-utils/cli to create a project
• Familiarize with the folder structure

Use the CLI

Change the directory to a place where you like to keep projects. Then, run these commands:

# Create project
npx @codemod-utils/cli blueprints-v2-addon --addon blueprints

# Install dependencies
cd blueprints-v2-addon
pnpm install

Note

Just like in the main tutorial, remove the sample step, add-end-of-line.

Folder structure

Let's take a look at how blueprints-v2-addon is structured as a tree. For simplicity, the tree only shows what's new, compared to that from the main tutorial.

blueprints-v2-addon
└── src
    ├── blueprints
    │   └── .gitkeep
    └── utils
        └── blueprints.ts

We see that the CLI has scaffolded src/blueprints and src/utils.

blueprints

The blueprints folder contains blueprint files, which we use to create files that our end-developers (users) will have.

Note

.gitkeep is a placeholder file, one that our users don't need. Remove it.

For the most part, the folder structure and file names will match what end-developers will see in their project. At runtime, it is possible to change the file path (e.g. rename __gitignore__ to .gitignore) or exclude the file (e.g. tsconfig.json for JavaScript projects).

utils/blueprints.ts

The file exports a variable called blueprintsRoot. When end-developers install our codemod, our blueprint files are saved somewhere on their machine. blueprintsRoot represents this runtime location.

In short, we can write and test our codemod as usual, without worrying about where the blueprint files will end up.

Next: Create static files

Previous: Introduction