Next.js Codebase Analysis <> create-next-app <> index.ts explained

#webdev #opensource #javascript #nextjs

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. Let’s understand the code inside index.ts

What begins it all:

Open 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.