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

#opensource #nextjs #webdev #javascript

In the previous article, I looked at a Commander to configure and accept cli options and assign it to a variable called program.

Let’s log and see what is value in the program variable by logging it inside run()

console.log(program):

Add the following as your first line in run():

console.log("program:", program);

Build the create-next-app

npm run build

Run the following command

npx create-my-app

Please note originally it is create-next-app, but I changed to create-my-app for purely experimental and learning purposes in package.json

Few things worth noting here is, npx create-my-app uses what is dist, so you make any changes, the projects needs to be built using npm run build to have your latest changes in build.

The following is what program has:

program: Command {
commands: [],
  options: [
    Option {
      flags: '-V, --version',
      required: false,
      optional: false,
      bool: true,
      short: '-V',
      long: '--version',
      description: 'output the version number'
    },
    Option {
      flags: '--ts, --typescript',
      required: false,
      optional: false,
      bool: true,
      short: '--ts',
      long: '--typescript',
      description: '\n\n  Initialize as a TypeScript project. (default)\n'
    },
    Option {
      flags: '--js, --javascript',
      required: false,
      optional: false,
      bool: true,
      short: '--js',
      long: '--javascript',
      description: '\n\n  Initialize as a JavaScript project.\n'
    },
    Option {
      flags: '--tailwind',
      required: false,
      optional: false,
      bool: true,
      long: '--tailwind',
      description: '\n\n  Initialize with Tailwind CSS config. (default)\n'
    },
    Option {
      flags: '--eslint',
      required: false,
      optional: false,
      bool: true,
      long: '--eslint',
      description: '\n\n  Initialize with eslint config.\n'
    },
    Option {
      flags: '--app',
      required: false,
      optional: false,
      bool: true,
      long: '--app',
      description: '\n\n  Initialize as an App Router project.\n'
    },
    Option {
      flags: '--src-dir',
      required: false,
      optional: false,
      bool: true,
      long: '--src-dir',
      description: '\n\n  Initialize inside a `src/` directory.\n'
    },
    Option {
      flags: '--import-alias <alias-to-configure>',
      required: true,
      optional: false,
      bool: true,
      long: '--import-alias',
      description: '\n\n  Specify import alias to use (default "@/*").\n'
    },
    Option {
      flags: '--use-npm',
      required: false,
      optional: false,
      bool: true,
      long: '--use-npm',
      description: '\n\n  Explicitly tell the CLI to bootstrap the application using npm\n'
    },
    Option {
      flags: '--use-pnpm',
      required: false,
      optional: false,
      bool: true,
      long: '--use-pnpm',
      description: '\n\n  Explicitly tell the CLI to bootstrap the application using pnpm\n'
    },
    Option {
      flags: '--use-yarn',
      required: false,
      optional: false,
      bool: true,
      long: '--use-yarn',
      description: '\n\n  Explicitly tell the CLI to bootstrap the application using Yarn\n'
    },
    Option {
      flags: '--use-bun',
      required: false,
      optional: false,
      bool: true,
      long: '--use-bun',
      description: '\n\n  Explicitly tell the CLI to bootstrap the application using Bun\n'
    },
    Option {
      flags: '-e, --example [name]|[github-url]',
      required: false,
      optional: true,
      bool: true,
      short: '-e',
      long: '--example',
      description: '\n' +
        '\n' +
        '  An example to bootstrap the app with. You can use an example name\n' +
        '  from the official Next.js repo or a GitHub URL. The URL can use\n' +
        '  any branch and/or subdirectory\n'
    },
    Option {
      flags: '--example-path <path-to-example>',
      required: true,
      optional: false,
      bool: true,
      long: '--example-path',
      description: '\n' +
        '\n' +
        '  In a rare case, your GitHub URL might contain a branch name with\n' +
        '  a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar).\n' +
        '  In this case, you must specify the path to the example separately:\n' +
        '  --example-path foo/bar\n'
    },
    Option {
      flags: '--reset-preferences',
      required: false,
      optional: false,
      bool: true,
      long: '--reset-preferences',
      description: '\n\n  Explicitly tell the CLI to reset any stored preferences\n'
    }
  ],
  _execs: {},
  _allowUnknownOption: true,
  _args: [ { required: true, name: 'project-directory', variadic: false } ],
  _name: 'create-next-app',
  _version: '14.0.5-canary.55',
  _versionOptionName: 'version',
  _events: [Object: null prototype] {
    'option:version': [Function (anonymous)],
    'command:*': [Function: listener],
    'option:typescript': [Function (anonymous)],
    'option:javascript': [Function (anonymous)],
    'option:tailwind': [Function (anonymous)],
    'option:eslint': [Function (anonymous)],
    'option:app': [Function (anonymous)],
    'option:src-dir': [Function (anonymous)],
    'option:import-alias': [Function (anonymous)],
    'option:use-npm': [Function (anonymous)],
    'option:use-pnpm': [Function (anonymous)],
    'option:use-yarn': [Function (anonymous)],
    'option:use-bun': [Function (anonymous)],
    'option:example': [Function (anonymous)],
    'option:example-path': [Function (anonymous)],
    'option:reset-preferences': [Function (anonymous)]
  },
  _eventsCount: 16,
  _usage: '\x1B[32m<project-directory>\x1B[39m [options]',
  rawArgs: [
    '/Users/ramunarasinga/.nvm/versions/node/v18.17.0/bin/node',
    '/Users/ramunarasinga/.npm/_npx/cde15b9888bbc9d5/node_modules/.bin/create-my-app'
  ],
  args: []
}

Conclusion:

We looked at how to add your own code inside index.ts. I put console.log for the program variable to look at what is inside it. Don’t forget to build your project before you test your custom code.

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