Next.js Codebase Analysis <> create-next-app <> index.ts explained
Ramu Narasinga
Posted on January 20, 2024
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.
Get free courses inspired by the best practices used in open source.
About me:
Website: https://ramunarasinga.com/
Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/
Github: https://github.com/Ramu-Narasinga
Email: ramu.narasinga@gmail.com
Posted on January 20, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.