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.

run() — part 1:

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.

Open create-next-app/index.ts and navigate to the run() function.

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 } 

Program — part — 1

// 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 }) 

Conclusion:

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.

The code with comments is available here: https://github.com/TThroo-Dev/opensource-codebase-analysis/commit/edac99a9dd8b57e47d19561e4f746dae59898bc3

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.

If you have any questions, feel free to reach out to me at ramu.narasinga@gmail.com

Get free courses inspired by the best practices used in open source.

About me:

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.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github —  https://github.com/ramu-narasinga

My website —  https://ramunarasinga.com

My Youtube channel —  https://www.youtube.com/@ramu-narasinga

Learning platform —  https://thinkthroo.com

Codebase Architecture —  https://app.thinkthroo.com/architecture

Best practices —  https://app.thinkthroo.com/best-practices

Production-grade projects —  https://app.thinkthroo.com/production-grade-projects