Next.js Codebase Analysis <> create-next-app <> index.ts explained
Tags: webdev, opensource, javascript, nextjs
Published: 2024-01-20 13:52:01

From the previous article, where you execute the create-my-app, you will find that create-my-app executes ./dist/index.js which is basically a minified version of [create-next-app/index.ts](https://github.com/vercel/next.js/blob/canary/packages/create-next-app/index.ts). Let’s understand the code inside index.ts

## What begins it all:

Open [create-next-app/index.ts](https://github.com/vercel/next.js/blob/canary/packages/create-next-app/index.ts) and go to the bottom of the file. You will see the following snippet:

```
run()
 .then(notifyUpdate)
 .catch(async (reason) => {
   console.log()
   console.log('Aborting installation.')
   if (reason.command) {
     console.log(`  ${cyan(reason.command)} has failed.`)
   } else {
     console.log(
       red('Unexpected error. Please report it as a bug:') + '\n',
       reason
     )
   }
   console.log()
   await notifyUpdate()
   process.exit(1)
 })
```

`run()` begins it all. I used to think using `.then` with `catch` is old fashioned but looks like it is okay to use `.then`, it does not always have to be async/await.

Let’s understand what the code means from function names before jumping into their definition.

I will add the meaningful comments next to line of code, so it is easy for you to follow.

```
run()
// On successful execution of run(), call 
// notifyUpdate. Not sure what notifyUpdate does yet.
.then(notifyUpdate) 
// you have a reason why catch failed, 
// I tend to put error as variable name,
// It makes sense to label it as reason
.catch(async (reason) => { 
   console.log()
   // Log explains installation is aborted
   // How often do you log when you encounter failure?
   console.log('Aborting installation.')
   // This is specifically looking for command prop
   // Specificity matters when it comes to error logging
   if (reason.command) {
     console.log(`  ${cyan(reason.command)} has failed.`)
   } else {
     // There is a catchall as well
     // Nice! 
     console.log(
       red('Unexpected error. Please report it as a bug:') + '\n',
       reason
     )
   }
   console.log()
   
   // Notify update even when the installation is aborted
   // This makes me wonder if it is worth writing .then()
   // But promises do not execute if you don't put .then()
   // Learnt it the hard way that one time when I was calling a      // promise without .then() and
   // started questioning my progamming abilities because I forgot // to initailise a promise with .then()
   // How often do you question your programming abilties?
   await notifyUpdate()
   // useful links:
   // https://stackoverflow.com/questions/5266152/how-to-exit-in-node-js
   // https://nodejs.org/api/process.html#process
   // This exits the node process with a failure
   process.exit(1)
 })
```

Cyan, red are from a package called picocolors, found on top of index.ts import.

```
import { cyan, green, red, yellow, bold, blue } from 'picocolors'
```

## Conclusion:

I will add meaningful comments next to code, but I might improvise if I find a better way to explain the code. We looked at index.ts, it all begins with run(). Interesting choice of function name `run` instead of `init`. I liked the variable name for catch parameter, instead of `error`, it is `reason`. `error` is what I usually name the parameter of catch.