Next.js Codebase Analysis <> create-next-app <> index.ts explained - Part 1.3
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):
console.log("program:", program);
npm run build
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.
If you have any questions, feel free to reach out to me at [email protected]
About me:
Website: https://ramunarasinga.com/
Email: [email protected]