In the previous article, we looked at what begins the project creation process, it was run(). In this article, we will understand what run() is made of.
I will add the meaningful comments next to each line of code that needs explanation. I will also do this explanation in parts, as I want to make little contributions everyday. Discipline over motivation.
I did not mention this before, but index.ts has 519 lines of code. I do not know if there is a coding style guide where they set a limit to the number of lines a file can have. This observation is something I picked while I was scouring the Github wilderness which is full of hidden cool patterns waiting to be discovered by the passionate FOSS enthusiasts.
run() function has 308 lines of code, but I will try to understand and explain at least 15–25 lines each day. Well, this might take a long time to finish understanding how next.js repo works and it is okay. My goal is to understand and learn different strategies and techniques so I can effectively improve my coding skills and learn from elite devs. I believe, there is no better way unless you are personally mentored by the next.js authors.
Please make sure you follow comments as that is where I add the explanation, find it easy for my train of thoughts.
async function run(): Promise<void> {// a Conf object creation with projectName.// We do not know what Conf does yet and it is okay. const conf = new Conf({ projectName: 'create-next-app' })// My first thought, where did the program come from?// Let's find out by looking outside the run() function.// We skipped Conf class but the program variable cannot be skipped.// I know for a fact it is a global variable.if (program.resetPreferences) { conf.clear() console.log(`Preferences reset successfully`) return }
// Commander is a package for CLI available here:// https://www.npmjs.com/package/commander// packageJson is from import on top of the file// import packageJson from './package.json'// I personally never had to import anything from package.json, // I guess you can do it.const program = new Commander.Command(packageJson.name)// https://www.npmjs.com/package/commander#version-option .version(packageJson.version)// https://www.npmjs.com/package/commander#command-arguments .arguments('<project-directory>')// https://www.npmjs.com/package/commander#usage .usage(`${green('<project-directory>')} [options]`)// https://www.npmjs.com/package/commander#action-handler .action((name) => { projectPath = name })
Part 1.1 leads to run() — part 1, program — part 1 and adding the comments next to each line of code does a good job in explaining my train of thought. I will stick to it.
I am building a platform that explains best practices used in open source by elite programmers. Join the waitlist and I will send you the link to the tutorials once they are ready.
Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.
