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

#opensource #webdev #javascript #nextjs

In the previous article, I wrote about project.example option. In this article, let’s look at more code from index.ts

/**
   * Verify the project dir is empty or doesn't exist
   */
  const root = path.resolve(resolvedProjectPath)
  const appName = path.basename(root)
  const folderExists = fs.existsSync(root)

  if (folderExists && !isFolderEmpty(root, appName)) {
    process.exit(1)
  }

Looking at the above code, the comment already was there. I did not add it. It just checks if the project directory and does not exist, otherwise processs exits.

I am surprised there is no console.log before process.exit.

I logged the root, appName, folderExists and built the project and ran the command npx create-my-app and the following were found.

Looks like these will be logged after the first prompt to provide your project name.

Experiment:

Let’s create a project with name my-app and then run the npx create-my-app again to see what will be logged.

Here are the results below:

Wait a minute? where did this log come from?

Well, it is from isFolderEmpty. How I found it? searched with the words “The directory”

Conclusion:

As we are progressing in understanding how create-next-app is written, this article explains another safe guarding technique against providing an existing folder or project name.

I shall write more about isFolderEmpty in the next article. I try not to overdo these analysis, my goal is to get better at programming everyday by reading some unknown code from opensource and take notes so I could apply these later in the future.

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