rsnext/packages/create-next-app/create-app.ts

273 lines
7 KiB
TypeScript
Raw Normal View History

/* eslint-disable import/no-extraneous-dependencies */
import retry from 'async-retry'
import { red, green, cyan } from 'picocolors'
import fs from 'fs'
import path from 'path'
import {
downloadAndExtractExample,
downloadAndExtractRepo,
getRepoInfo,
feat(cli): support examples without `package.json` (#37910) Previously our CLI assumed that when using an `--example` flag, the example contains a `package.json` file. There are examples though, like `with-docker-compose` which does not have one. In that case, we can simply clone the directory and show a success message. <details> <summary> Full list of examples without <code>package.json</code>: </summary> <ul> <li>custom-server</li> <li>page-transitions</li> <li>parameterized-routing</li> <li>reproduction-template</li> <li>with-chakra-ui-typescript</li> <li>with-cookie-auth</li> <li>with-docker-compose</li> <li>with-dotenv</li> <li>with-facebook-chat-plugin</li> <li>with-firebase-authentication</li> <li>with-firebase-authentication-serverless</li> <li>with-glamorous</li> <li>with-global-stylesheet</li> <li>with-global-stylesheet-simple</li> <li>with-graphql-faunadb</li> <li>with-markdown</li> <li>with-material-ui</li> <li>with-next-auth</li> <li>with-next-i18next</li> <li>with-next-multilingual</li> <li>with-next-routes</li> <li>with-now-env</li> <li>with-pretty-url-routing</li> <li>with-prisma</li> <li>with-redux-toolkit</li> <li>with-redux-toolkit-typescript</li> <li>with-sentry-simple</li> <li>with-strict-csp-hash</li> <li>with-styled-jsx-postcss</li> <li>with-sw-precache</li> <li>with-typescript-styled-components</li> <li>with-universal-configuration-build-time</li> <li>with-universal-configuration-runtime</li> </ul> </details> Fixes #37884 In a follow-up PR, we can try to detect if an example contains a README.md file only, and if the example was moved, we could either try getting it from the new location or at least show a better message. (Eg.: using a magic comment that we can parse) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
2022-06-23 19:28:14 +02:00
existsInRepo,
hasRepo,
RepoInfo,
} from './helpers/examples'
import { makeDir } from './helpers/make-dir'
import { tryGitInit } from './helpers/git'
import { install } from './helpers/install'
import { isFolderEmpty } from './helpers/is-folder-empty'
import { getOnline } from './helpers/is-online'
import { isWriteable } from './helpers/is-writeable'
import type { PackageManager } from './helpers/get-pkg-manager'
feat(create-next-app): JS/TS prompt (with appDir support); enhanced testing (#42012) Resubmitting this PR following this comment from Tim. This work has been done already and we can build off of it to get this in faster. > Just to be clear we're planning to rework create-next-app to give you the option to choose between JavaScript or TypeScript so it'll solve this request. For `app` right now it'll stay TypeScript till that is implemented. > > _Originally posted by @timneutkens in https://github.com/vercel/next.js/discussions/41745#discussioncomment-3985833_ --- I added the `--ts, --typescript` flag to `create-next-app` in https://github.com/vercel/next.js/pull/24655, and since then I have seen it used very frequently, including in recent issues (such as https://github.com/vercel/next.js/issues/33314) and most Next.js tutorials on YouTube. I noticed the template logic added in this PR was also used to add the `appDir` configuration as well. We discussed a while ago adding the following user flow: - `create-next-app --js, --javascript` creates a JS project - `create-next-app --ts, --typescript` creates a TS project - `create-next-app [name]` (no `--js, --ts`) prompts the user to choose either JS or TS, with TS selected by default. ### Review Adding support for appDir and refactoring the templates brought the pain-of-review up a bit, but it's not so bad when broken into increments. The original 8-file diff is here: https://github.com/ctjlewis/next.js/commit/1f47d9b0bf5b2c59dce893ca6634c1a9bfd3dd19 And the PR that brought the diff up to 59 files (mostly owed to `app` template dirs and file structure refactors): https://github.com/ctjlewis/next.js/commit/bd3ae4afd31f787dd41df2c6ab2e8145deef2138 ([PR link](https://github.com/ctjlewis/next.js/pull/3/files)) ### Demo https://user-images.githubusercontent.com/1657236/198586216-4691ff4c-48d4-4c6c-b7c1-705c38dd0194.mov Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-10-31 06:43:39 +01:00
import {
getTemplateFile,
installTemplate,
TemplateMode,
TemplateType,
} from './templates'
export class DownloadError extends Error {}
export async function createApp({
appPath,
packageManager,
example,
examplePath,
typescript,
feat(cli): introduce `--tailwind` flag (#46927) ### What? This PR introduces a new `--tailwind` flag to the `create-next-app` CLI, to make it easier to bootstrap a Next.js app with Tailwind CSS pre-configured. This is going to be the **default**. To opt-out of Tailwind CSS, you can use the `--no-tailwind` flag. ### Why? Tailwind CSS is one of the most popular styling solutions right now, and we would like to make it easier to get started. Currently, the closest you can come to this is by running `pnpm create next-app -e with-tailwindcss` which will clone the https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss example. But that example is not configured for the App Router. This PR will let you add Tailwind CSS to both `app/`, `pages/`, and start out with TypeScript or JavaScript via the CLI prompts. (Some community feedback https://twitter.com/dev_jonaskaas/status/1632367991827443713, https://twitter.com/samselikoff/status/1634662473331617794) ### How? We are adding 4 new templates to the CLI bundle. > Note: The styling is not pixel-perfect compared to the current templates (using CSS modules) to require fewer overrides, but I tried to match it as close as possible. Here are a few screenshots: <details> <summary><b>Current, light</b></summary> <img src="https://user-images.githubusercontent.com/18369201/224733372-9dba86fe-9191-471d-ad9f-ab904c47f544.png"/> </details> <details> <summary><b>Tailwind (new), light</b></summary> <img src="https://user-images.githubusercontent.com/18369201/224733610-038d9d0f-634d-4b69-b5c2-a5056b56760c.png"/> </details> <details> <summary><b>Current, dark, responsive</b></summary> <img src="https://user-images.githubusercontent.com/18369201/224733790-9b4d730c-0336-4dbe-bc10-1cae1d7fd145.png"/> </details> <details> <summary><b>Tailwind (new), dark, responsive</b></summary> <img src="https://user-images.githubusercontent.com/18369201/224734375-28384bbc-2c3a-4125-8f29-c102f3b7aa1d.png"/> </details> #### For reviewers This introduces 4 new templates, with a very similar code base to the original ones. To keep the PR focused, I decided to copy over duplicate code, but we could potentially create a shared folder for files that are the same across templates to somewhat reduce the CLI size. Not sure if it's worth it, let me know. Probably fine for now, but something to consider if we are adding more permutations in the future. --- ~Work remaining:~ - [x] app+ts - [x] layout - [x] dark mode - [x] media queries - [x] animations - [x] app+js - [x] pages+ts - [x] pages+js - [x] prompt/config - [x] deprecate Tailwind CSS example in favor of CLI - [x] update docs - [x] add test - [x] add [Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) Closes NEXT-772 Related #45814, #44286
2023-03-16 16:06:27 +01:00
tailwind,
Add prompt for ESLint to CNA (#42218) Following up https://github.com/vercel/next.js/pull/42012 this adds an additional prompt for include ESLint config/dependencies or not. As discussed, this also removes the slow down from doing separate `dependencies` and `devDependencies` installs since this separation is no longer required now that we have `output: 'standalone'` which ensures only actual necessary dependency files are used for production builds. <details> <summary>Before</summary> https://user-images.githubusercontent.com/22380829/198953290-116b422d-4359-4aa9-9d82-b3265fde7b3f.mp4 </details> <details> <summary>After</summary> https://user-images.githubusercontent.com/22380829/198953347-20dbf897-92b3-45ea-a9d2-cfb61622251d.mp4 </details> ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
2022-10-31 16:51:50 +01:00
eslint,
Update create-next-app App Router question (#49111) <!-- Thanks for opening a PR! Your contribution is much appreciated. To make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below. Choose the right checklist for the change(s) that you're making: ## For Contributors ### Improving Documentation or adding/fixing Examples - The "examples guidelines" are followed from our contributing doc https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md - Make sure the linting passes by running `pnpm build && pnpm lint`. See https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md ### Fixing a bug - Related issues linked using `fixes #number` - Tests added. See: https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ### Adding a feature - Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. (A discussion must be opened, see https://github.com/vercel/next.js/discussions/new?category=ideas) - Related issues/discussions are linked using `fixes #number` - e2e tests added (https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs - Documentation added - Telemetry added. In case of a feature if it's used or not. - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ## For Maintainers - Minimal description (aim for explaining to someone not on the team to understand the PR) - When linking to a Slack thread, you might want to share details of the conclusion - Link both the Linear (Fixes NEXT-xxx) and the GitHub issues - Add review comments if necessary to explain to the reviewer the logic behind a change ### What? ### Why? ### How? Closes NEXT- Fixes # --> --------- Co-authored-by: JJ Kasper <jj@jjsweb.site>
2023-05-03 02:28:31 +02:00
appRouter,
srcDir,
importAlias,
}: {
appPath: string
packageManager: PackageManager
example?: string
examplePath?: string
typescript: boolean
feat(cli): introduce `--tailwind` flag (#46927) ### What? This PR introduces a new `--tailwind` flag to the `create-next-app` CLI, to make it easier to bootstrap a Next.js app with Tailwind CSS pre-configured. This is going to be the **default**. To opt-out of Tailwind CSS, you can use the `--no-tailwind` flag. ### Why? Tailwind CSS is one of the most popular styling solutions right now, and we would like to make it easier to get started. Currently, the closest you can come to this is by running `pnpm create next-app -e with-tailwindcss` which will clone the https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss example. But that example is not configured for the App Router. This PR will let you add Tailwind CSS to both `app/`, `pages/`, and start out with TypeScript or JavaScript via the CLI prompts. (Some community feedback https://twitter.com/dev_jonaskaas/status/1632367991827443713, https://twitter.com/samselikoff/status/1634662473331617794) ### How? We are adding 4 new templates to the CLI bundle. > Note: The styling is not pixel-perfect compared to the current templates (using CSS modules) to require fewer overrides, but I tried to match it as close as possible. Here are a few screenshots: <details> <summary><b>Current, light</b></summary> <img src="https://user-images.githubusercontent.com/18369201/224733372-9dba86fe-9191-471d-ad9f-ab904c47f544.png"/> </details> <details> <summary><b>Tailwind (new), light</b></summary> <img src="https://user-images.githubusercontent.com/18369201/224733610-038d9d0f-634d-4b69-b5c2-a5056b56760c.png"/> </details> <details> <summary><b>Current, dark, responsive</b></summary> <img src="https://user-images.githubusercontent.com/18369201/224733790-9b4d730c-0336-4dbe-bc10-1cae1d7fd145.png"/> </details> <details> <summary><b>Tailwind (new), dark, responsive</b></summary> <img src="https://user-images.githubusercontent.com/18369201/224734375-28384bbc-2c3a-4125-8f29-c102f3b7aa1d.png"/> </details> #### For reviewers This introduces 4 new templates, with a very similar code base to the original ones. To keep the PR focused, I decided to copy over duplicate code, but we could potentially create a shared folder for files that are the same across templates to somewhat reduce the CLI size. Not sure if it's worth it, let me know. Probably fine for now, but something to consider if we are adding more permutations in the future. --- ~Work remaining:~ - [x] app+ts - [x] layout - [x] dark mode - [x] media queries - [x] animations - [x] app+js - [x] pages+ts - [x] pages+js - [x] prompt/config - [x] deprecate Tailwind CSS example in favor of CLI - [x] update docs - [x] add test - [x] add [Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) Closes NEXT-772 Related #45814, #44286
2023-03-16 16:06:27 +01:00
tailwind: boolean
Add prompt for ESLint to CNA (#42218) Following up https://github.com/vercel/next.js/pull/42012 this adds an additional prompt for include ESLint config/dependencies or not. As discussed, this also removes the slow down from doing separate `dependencies` and `devDependencies` installs since this separation is no longer required now that we have `output: 'standalone'` which ensures only actual necessary dependency files are used for production builds. <details> <summary>Before</summary> https://user-images.githubusercontent.com/22380829/198953290-116b422d-4359-4aa9-9d82-b3265fde7b3f.mp4 </details> <details> <summary>After</summary> https://user-images.githubusercontent.com/22380829/198953347-20dbf897-92b3-45ea-a9d2-cfb61622251d.mp4 </details> ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
2022-10-31 16:51:50 +01:00
eslint: boolean
Update create-next-app App Router question (#49111) <!-- Thanks for opening a PR! Your contribution is much appreciated. To make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below. Choose the right checklist for the change(s) that you're making: ## For Contributors ### Improving Documentation or adding/fixing Examples - The "examples guidelines" are followed from our contributing doc https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md - Make sure the linting passes by running `pnpm build && pnpm lint`. See https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md ### Fixing a bug - Related issues linked using `fixes #number` - Tests added. See: https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ### Adding a feature - Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. (A discussion must be opened, see https://github.com/vercel/next.js/discussions/new?category=ideas) - Related issues/discussions are linked using `fixes #number` - e2e tests added (https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs - Documentation added - Telemetry added. In case of a feature if it's used or not. - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ## For Maintainers - Minimal description (aim for explaining to someone not on the team to understand the PR) - When linking to a Slack thread, you might want to share details of the conclusion - Link both the Linear (Fixes NEXT-xxx) and the GitHub issues - Add review comments if necessary to explain to the reviewer the logic behind a change ### What? ### Why? ### How? Closes NEXT- Fixes # --> --------- Co-authored-by: JJ Kasper <jj@jjsweb.site>
2023-05-03 02:28:31 +02:00
appRouter: boolean
srcDir: boolean
importAlias: string
}): Promise<void> {
let repoInfo: RepoInfo | undefined
feat(create-next-app): JS/TS prompt (with appDir support); enhanced testing (#42012) Resubmitting this PR following this comment from Tim. This work has been done already and we can build off of it to get this in faster. > Just to be clear we're planning to rework create-next-app to give you the option to choose between JavaScript or TypeScript so it'll solve this request. For `app` right now it'll stay TypeScript till that is implemented. > > _Originally posted by @timneutkens in https://github.com/vercel/next.js/discussions/41745#discussioncomment-3985833_ --- I added the `--ts, --typescript` flag to `create-next-app` in https://github.com/vercel/next.js/pull/24655, and since then I have seen it used very frequently, including in recent issues (such as https://github.com/vercel/next.js/issues/33314) and most Next.js tutorials on YouTube. I noticed the template logic added in this PR was also used to add the `appDir` configuration as well. We discussed a while ago adding the following user flow: - `create-next-app --js, --javascript` creates a JS project - `create-next-app --ts, --typescript` creates a TS project - `create-next-app [name]` (no `--js, --ts`) prompts the user to choose either JS or TS, with TS selected by default. ### Review Adding support for appDir and refactoring the templates brought the pain-of-review up a bit, but it's not so bad when broken into increments. The original 8-file diff is here: https://github.com/ctjlewis/next.js/commit/1f47d9b0bf5b2c59dce893ca6634c1a9bfd3dd19 And the PR that brought the diff up to 59 files (mostly owed to `app` template dirs and file structure refactors): https://github.com/ctjlewis/next.js/commit/bd3ae4afd31f787dd41df2c6ab2e8145deef2138 ([PR link](https://github.com/ctjlewis/next.js/pull/3/files)) ### Demo https://user-images.githubusercontent.com/1657236/198586216-4691ff4c-48d4-4c6c-b7c1-705c38dd0194.mov Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-10-31 06:43:39 +01:00
const mode: TemplateMode = typescript ? 'ts' : 'js'
Update create-next-app App Router question (#49111) <!-- Thanks for opening a PR! Your contribution is much appreciated. To make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below. Choose the right checklist for the change(s) that you're making: ## For Contributors ### Improving Documentation or adding/fixing Examples - The "examples guidelines" are followed from our contributing doc https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md - Make sure the linting passes by running `pnpm build && pnpm lint`. See https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md ### Fixing a bug - Related issues linked using `fixes #number` - Tests added. See: https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ### Adding a feature - Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. (A discussion must be opened, see https://github.com/vercel/next.js/discussions/new?category=ideas) - Related issues/discussions are linked using `fixes #number` - e2e tests added (https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs - Documentation added - Telemetry added. In case of a feature if it's used or not. - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ## For Maintainers - Minimal description (aim for explaining to someone not on the team to understand the PR) - When linking to a Slack thread, you might want to share details of the conclusion - Link both the Linear (Fixes NEXT-xxx) and the GitHub issues - Add review comments if necessary to explain to the reviewer the logic behind a change ### What? ### Why? ### How? Closes NEXT- Fixes # --> --------- Co-authored-by: JJ Kasper <jj@jjsweb.site>
2023-05-03 02:28:31 +02:00
const template: TemplateType = appRouter
feat(cli): introduce `--tailwind` flag (#46927) ### What? This PR introduces a new `--tailwind` flag to the `create-next-app` CLI, to make it easier to bootstrap a Next.js app with Tailwind CSS pre-configured. This is going to be the **default**. To opt-out of Tailwind CSS, you can use the `--no-tailwind` flag. ### Why? Tailwind CSS is one of the most popular styling solutions right now, and we would like to make it easier to get started. Currently, the closest you can come to this is by running `pnpm create next-app -e with-tailwindcss` which will clone the https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss example. But that example is not configured for the App Router. This PR will let you add Tailwind CSS to both `app/`, `pages/`, and start out with TypeScript or JavaScript via the CLI prompts. (Some community feedback https://twitter.com/dev_jonaskaas/status/1632367991827443713, https://twitter.com/samselikoff/status/1634662473331617794) ### How? We are adding 4 new templates to the CLI bundle. > Note: The styling is not pixel-perfect compared to the current templates (using CSS modules) to require fewer overrides, but I tried to match it as close as possible. Here are a few screenshots: <details> <summary><b>Current, light</b></summary> <img src="https://user-images.githubusercontent.com/18369201/224733372-9dba86fe-9191-471d-ad9f-ab904c47f544.png"/> </details> <details> <summary><b>Tailwind (new), light</b></summary> <img src="https://user-images.githubusercontent.com/18369201/224733610-038d9d0f-634d-4b69-b5c2-a5056b56760c.png"/> </details> <details> <summary><b>Current, dark, responsive</b></summary> <img src="https://user-images.githubusercontent.com/18369201/224733790-9b4d730c-0336-4dbe-bc10-1cae1d7fd145.png"/> </details> <details> <summary><b>Tailwind (new), dark, responsive</b></summary> <img src="https://user-images.githubusercontent.com/18369201/224734375-28384bbc-2c3a-4125-8f29-c102f3b7aa1d.png"/> </details> #### For reviewers This introduces 4 new templates, with a very similar code base to the original ones. To keep the PR focused, I decided to copy over duplicate code, but we could potentially create a shared folder for files that are the same across templates to somewhat reduce the CLI size. Not sure if it's worth it, let me know. Probably fine for now, but something to consider if we are adding more permutations in the future. --- ~Work remaining:~ - [x] app+ts - [x] layout - [x] dark mode - [x] media queries - [x] animations - [x] app+js - [x] pages+ts - [x] pages+js - [x] prompt/config - [x] deprecate Tailwind CSS example in favor of CLI - [x] update docs - [x] add test - [x] add [Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) Closes NEXT-772 Related #45814, #44286
2023-03-16 16:06:27 +01:00
? tailwind
? 'app-tw'
: 'app'
: tailwind
? 'default-tw'
: 'default'
if (example) {
let repoUrl: URL | undefined
try {
repoUrl = new URL(example)
} catch (error: any) {
if (error.code !== 'ERR_INVALID_URL') {
console.error(error)
process.exit(1)
}
}
if (repoUrl) {
if (repoUrl.origin !== 'https://github.com') {
console.error(
`Invalid URL: ${red(
`"${example}"`
)}. Only GitHub repositories are supported. Please use a GitHub URL and try again.`
)
process.exit(1)
}
repoInfo = await getRepoInfo(repoUrl, examplePath)
if (!repoInfo) {
console.error(
`Found invalid GitHub URL: ${red(
`"${example}"`
)}. Please fix the URL and try again.`
)
process.exit(1)
}
const found = await hasRepo(repoInfo)
if (!found) {
console.error(
`Could not locate the repository for ${red(
`"${example}"`
)}. Please check that the repository exists and try again.`
)
process.exit(1)
}
} else if (example !== '__internal-testing-retry') {
feat(cli): support examples without `package.json` (#37910) Previously our CLI assumed that when using an `--example` flag, the example contains a `package.json` file. There are examples though, like `with-docker-compose` which does not have one. In that case, we can simply clone the directory and show a success message. <details> <summary> Full list of examples without <code>package.json</code>: </summary> <ul> <li>custom-server</li> <li>page-transitions</li> <li>parameterized-routing</li> <li>reproduction-template</li> <li>with-chakra-ui-typescript</li> <li>with-cookie-auth</li> <li>with-docker-compose</li> <li>with-dotenv</li> <li>with-facebook-chat-plugin</li> <li>with-firebase-authentication</li> <li>with-firebase-authentication-serverless</li> <li>with-glamorous</li> <li>with-global-stylesheet</li> <li>with-global-stylesheet-simple</li> <li>with-graphql-faunadb</li> <li>with-markdown</li> <li>with-material-ui</li> <li>with-next-auth</li> <li>with-next-i18next</li> <li>with-next-multilingual</li> <li>with-next-routes</li> <li>with-now-env</li> <li>with-pretty-url-routing</li> <li>with-prisma</li> <li>with-redux-toolkit</li> <li>with-redux-toolkit-typescript</li> <li>with-sentry-simple</li> <li>with-strict-csp-hash</li> <li>with-styled-jsx-postcss</li> <li>with-sw-precache</li> <li>with-typescript-styled-components</li> <li>with-universal-configuration-build-time</li> <li>with-universal-configuration-runtime</li> </ul> </details> Fixes #37884 In a follow-up PR, we can try to detect if an example contains a README.md file only, and if the example was moved, we could either try getting it from the new location or at least show a better message. (Eg.: using a magic comment that we can parse) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
2022-06-23 19:28:14 +02:00
const found = await existsInRepo(example)
if (!found) {
console.error(
`Could not locate an example named ${red(
`"${example}"`
)}. It could be due to the following:\n`,
`1. Your spelling of example ${red(
`"${example}"`
)} might be incorrect.\n`,
`2. You might not be connected to the internet or you are behind a proxy.`
)
process.exit(1)
}
}
}
const root = path.resolve(appPath)
if (!(await isWriteable(path.dirname(root)))) {
console.error(
'The application path is not writable, please check folder permissions and try again.'
)
console.error(
'It is likely you do not have write permissions for this folder.'
)
process.exit(1)
}
const appName = path.basename(root)
await makeDir(root)
if (!isFolderEmpty(root, appName)) {
process.exit(1)
}
const useYarn = packageManager === 'yarn'
const isOnline = !useYarn || (await getOnline())
const originalDirectory = process.cwd()
console.log(`Creating a new Next.js app in ${green(root)}.`)
console.log()
process.chdir(root)
feat(cli): support examples without `package.json` (#37910) Previously our CLI assumed that when using an `--example` flag, the example contains a `package.json` file. There are examples though, like `with-docker-compose` which does not have one. In that case, we can simply clone the directory and show a success message. <details> <summary> Full list of examples without <code>package.json</code>: </summary> <ul> <li>custom-server</li> <li>page-transitions</li> <li>parameterized-routing</li> <li>reproduction-template</li> <li>with-chakra-ui-typescript</li> <li>with-cookie-auth</li> <li>with-docker-compose</li> <li>with-dotenv</li> <li>with-facebook-chat-plugin</li> <li>with-firebase-authentication</li> <li>with-firebase-authentication-serverless</li> <li>with-glamorous</li> <li>with-global-stylesheet</li> <li>with-global-stylesheet-simple</li> <li>with-graphql-faunadb</li> <li>with-markdown</li> <li>with-material-ui</li> <li>with-next-auth</li> <li>with-next-i18next</li> <li>with-next-multilingual</li> <li>with-next-routes</li> <li>with-now-env</li> <li>with-pretty-url-routing</li> <li>with-prisma</li> <li>with-redux-toolkit</li> <li>with-redux-toolkit-typescript</li> <li>with-sentry-simple</li> <li>with-strict-csp-hash</li> <li>with-styled-jsx-postcss</li> <li>with-sw-precache</li> <li>with-typescript-styled-components</li> <li>with-universal-configuration-build-time</li> <li>with-universal-configuration-runtime</li> </ul> </details> Fixes #37884 In a follow-up PR, we can try to detect if an example contains a README.md file only, and if the example was moved, we could either try getting it from the new location or at least show a better message. (Eg.: using a magic comment that we can parse) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
2022-06-23 19:28:14 +02:00
const packageJsonPath = path.join(root, 'package.json')
let hasPackageJson = false
if (example) {
/**
* If an example repository is provided, clone it.
*/
try {
if (repoInfo) {
const repoInfo2 = repoInfo
console.log(
`Downloading files from repo ${cyan(
example
)}. This might take a moment.`
)
console.log()
await retry(() => downloadAndExtractRepo(root, repoInfo2), {
retries: 3,
})
} else {
console.log(
`Downloading files for example ${cyan(
example
)}. This might take a moment.`
)
console.log()
await retry(() => downloadAndExtractExample(root, example), {
retries: 3,
})
}
} catch (reason) {
function isErrorLike(err: unknown): err is { message: string } {
return (
typeof err === 'object' &&
err !== null &&
typeof (err as { message?: unknown }).message === 'string'
)
}
throw new DownloadError(
isErrorLike(reason) ? reason.message : reason + ''
)
}
feat(create-next-app): JS/TS prompt (with appDir support); enhanced testing (#42012) Resubmitting this PR following this comment from Tim. This work has been done already and we can build off of it to get this in faster. > Just to be clear we're planning to rework create-next-app to give you the option to choose between JavaScript or TypeScript so it'll solve this request. For `app` right now it'll stay TypeScript till that is implemented. > > _Originally posted by @timneutkens in https://github.com/vercel/next.js/discussions/41745#discussioncomment-3985833_ --- I added the `--ts, --typescript` flag to `create-next-app` in https://github.com/vercel/next.js/pull/24655, and since then I have seen it used very frequently, including in recent issues (such as https://github.com/vercel/next.js/issues/33314) and most Next.js tutorials on YouTube. I noticed the template logic added in this PR was also used to add the `appDir` configuration as well. We discussed a while ago adding the following user flow: - `create-next-app --js, --javascript` creates a JS project - `create-next-app --ts, --typescript` creates a TS project - `create-next-app [name]` (no `--js, --ts`) prompts the user to choose either JS or TS, with TS selected by default. ### Review Adding support for appDir and refactoring the templates brought the pain-of-review up a bit, but it's not so bad when broken into increments. The original 8-file diff is here: https://github.com/ctjlewis/next.js/commit/1f47d9b0bf5b2c59dce893ca6634c1a9bfd3dd19 And the PR that brought the diff up to 59 files (mostly owed to `app` template dirs and file structure refactors): https://github.com/ctjlewis/next.js/commit/bd3ae4afd31f787dd41df2c6ab2e8145deef2138 ([PR link](https://github.com/ctjlewis/next.js/pull/3/files)) ### Demo https://user-images.githubusercontent.com/1657236/198586216-4691ff4c-48d4-4c6c-b7c1-705c38dd0194.mov Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-10-31 06:43:39 +01:00
// Copy `.gitignore` if the application did not provide one
const ignorePath = path.join(root, '.gitignore')
if (!fs.existsSync(ignorePath)) {
fs.copyFileSync(
feat(create-next-app): JS/TS prompt (with appDir support); enhanced testing (#42012) Resubmitting this PR following this comment from Tim. This work has been done already and we can build off of it to get this in faster. > Just to be clear we're planning to rework create-next-app to give you the option to choose between JavaScript or TypeScript so it'll solve this request. For `app` right now it'll stay TypeScript till that is implemented. > > _Originally posted by @timneutkens in https://github.com/vercel/next.js/discussions/41745#discussioncomment-3985833_ --- I added the `--ts, --typescript` flag to `create-next-app` in https://github.com/vercel/next.js/pull/24655, and since then I have seen it used very frequently, including in recent issues (such as https://github.com/vercel/next.js/issues/33314) and most Next.js tutorials on YouTube. I noticed the template logic added in this PR was also used to add the `appDir` configuration as well. We discussed a while ago adding the following user flow: - `create-next-app --js, --javascript` creates a JS project - `create-next-app --ts, --typescript` creates a TS project - `create-next-app [name]` (no `--js, --ts`) prompts the user to choose either JS or TS, with TS selected by default. ### Review Adding support for appDir and refactoring the templates brought the pain-of-review up a bit, but it's not so bad when broken into increments. The original 8-file diff is here: https://github.com/ctjlewis/next.js/commit/1f47d9b0bf5b2c59dce893ca6634c1a9bfd3dd19 And the PR that brought the diff up to 59 files (mostly owed to `app` template dirs and file structure refactors): https://github.com/ctjlewis/next.js/commit/bd3ae4afd31f787dd41df2c6ab2e8145deef2138 ([PR link](https://github.com/ctjlewis/next.js/pull/3/files)) ### Demo https://user-images.githubusercontent.com/1657236/198586216-4691ff4c-48d4-4c6c-b7c1-705c38dd0194.mov Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-10-31 06:43:39 +01:00
getTemplateFile({ template, mode, file: 'gitignore' }),
ignorePath
)
}
feat(create-next-app): JS/TS prompt (with appDir support); enhanced testing (#42012) Resubmitting this PR following this comment from Tim. This work has been done already and we can build off of it to get this in faster. > Just to be clear we're planning to rework create-next-app to give you the option to choose between JavaScript or TypeScript so it'll solve this request. For `app` right now it'll stay TypeScript till that is implemented. > > _Originally posted by @timneutkens in https://github.com/vercel/next.js/discussions/41745#discussioncomment-3985833_ --- I added the `--ts, --typescript` flag to `create-next-app` in https://github.com/vercel/next.js/pull/24655, and since then I have seen it used very frequently, including in recent issues (such as https://github.com/vercel/next.js/issues/33314) and most Next.js tutorials on YouTube. I noticed the template logic added in this PR was also used to add the `appDir` configuration as well. We discussed a while ago adding the following user flow: - `create-next-app --js, --javascript` creates a JS project - `create-next-app --ts, --typescript` creates a TS project - `create-next-app [name]` (no `--js, --ts`) prompts the user to choose either JS or TS, with TS selected by default. ### Review Adding support for appDir and refactoring the templates brought the pain-of-review up a bit, but it's not so bad when broken into increments. The original 8-file diff is here: https://github.com/ctjlewis/next.js/commit/1f47d9b0bf5b2c59dce893ca6634c1a9bfd3dd19 And the PR that brought the diff up to 59 files (mostly owed to `app` template dirs and file structure refactors): https://github.com/ctjlewis/next.js/commit/bd3ae4afd31f787dd41df2c6ab2e8145deef2138 ([PR link](https://github.com/ctjlewis/next.js/pull/3/files)) ### Demo https://user-images.githubusercontent.com/1657236/198586216-4691ff4c-48d4-4c6c-b7c1-705c38dd0194.mov Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-10-31 06:43:39 +01:00
// Copy `next-env.d.ts` to any example that is typescript
next-env.d.ts note in templates (#27983) Hello! I was using `npx create-next-app --ts` to quickly bootstrap a basic next.js project with Typescript. It bothered me that I got git diff just from running `npm run build` inside the project, because the new notice in the `next-env.d.ts` file. ![image](https://user-images.githubusercontent.com/13413409/129115266-80e00bf3-78aa-40be-bd0f-a18aaa448a68.png) So I went ahead and updated the `next-env.d.ts` file in [`packages/create-next-app/templates/typescript`](https://github.com/oBusk/next.js/blob/fb67ce9864f3561bd8883092d215960040402aa7/packages/create-next-app/templates/typescript/next-env.d.ts) to be exactly how the file looks after running once. (https://github.com/vercel/next.js/commit/7417ecc09c6b44fb4ebfdf6acd13cbcec784a44e) Then I realized that I could probably do the same for all the `next-env.d.ts` that are spread out in the many examples, to make running those examples after cloning them feel a bit smoother. (https://github.com/vercel/next.js/commit/fb67ce9864f3561bd8883092d215960040402aa7) > However I skipped the [`with-typescript-graphql`](https://github.com/vercel/next.js/tree/40f85f6d95b3f69421bbf13cced68754e009eed4/examples/with-typescript-graphql) example since that [`next-env.d.ts`](https://github.com/vercel/next.js/blob/40f85f6d95b3f69421bbf13cced68754e009eed4/examples/with-typescript-graphql/next-env.d.ts#L4-L9) actually has changes and I couldn't even run `yarn build` in that example, so I'm not sure what will happen with the `next-env.d.ts`. Someone who _gets_ that example will have to fix it I suppose.
2021-08-12 22:36:53 +02:00
const tsconfigPath = path.join(root, 'tsconfig.json')
if (fs.existsSync(tsconfigPath)) {
fs.copyFileSync(
feat(create-next-app): JS/TS prompt (with appDir support); enhanced testing (#42012) Resubmitting this PR following this comment from Tim. This work has been done already and we can build off of it to get this in faster. > Just to be clear we're planning to rework create-next-app to give you the option to choose between JavaScript or TypeScript so it'll solve this request. For `app` right now it'll stay TypeScript till that is implemented. > > _Originally posted by @timneutkens in https://github.com/vercel/next.js/discussions/41745#discussioncomment-3985833_ --- I added the `--ts, --typescript` flag to `create-next-app` in https://github.com/vercel/next.js/pull/24655, and since then I have seen it used very frequently, including in recent issues (such as https://github.com/vercel/next.js/issues/33314) and most Next.js tutorials on YouTube. I noticed the template logic added in this PR was also used to add the `appDir` configuration as well. We discussed a while ago adding the following user flow: - `create-next-app --js, --javascript` creates a JS project - `create-next-app --ts, --typescript` creates a TS project - `create-next-app [name]` (no `--js, --ts`) prompts the user to choose either JS or TS, with TS selected by default. ### Review Adding support for appDir and refactoring the templates brought the pain-of-review up a bit, but it's not so bad when broken into increments. The original 8-file diff is here: https://github.com/ctjlewis/next.js/commit/1f47d9b0bf5b2c59dce893ca6634c1a9bfd3dd19 And the PR that brought the diff up to 59 files (mostly owed to `app` template dirs and file structure refactors): https://github.com/ctjlewis/next.js/commit/bd3ae4afd31f787dd41df2c6ab2e8145deef2138 ([PR link](https://github.com/ctjlewis/next.js/pull/3/files)) ### Demo https://user-images.githubusercontent.com/1657236/198586216-4691ff4c-48d4-4c6c-b7c1-705c38dd0194.mov Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-10-31 06:43:39 +01:00
getTemplateFile({ template, mode: 'ts', file: 'next-env.d.ts' }),
next-env.d.ts note in templates (#27983) Hello! I was using `npx create-next-app --ts` to quickly bootstrap a basic next.js project with Typescript. It bothered me that I got git diff just from running `npm run build` inside the project, because the new notice in the `next-env.d.ts` file. ![image](https://user-images.githubusercontent.com/13413409/129115266-80e00bf3-78aa-40be-bd0f-a18aaa448a68.png) So I went ahead and updated the `next-env.d.ts` file in [`packages/create-next-app/templates/typescript`](https://github.com/oBusk/next.js/blob/fb67ce9864f3561bd8883092d215960040402aa7/packages/create-next-app/templates/typescript/next-env.d.ts) to be exactly how the file looks after running once. (https://github.com/vercel/next.js/commit/7417ecc09c6b44fb4ebfdf6acd13cbcec784a44e) Then I realized that I could probably do the same for all the `next-env.d.ts` that are spread out in the many examples, to make running those examples after cloning them feel a bit smoother. (https://github.com/vercel/next.js/commit/fb67ce9864f3561bd8883092d215960040402aa7) > However I skipped the [`with-typescript-graphql`](https://github.com/vercel/next.js/tree/40f85f6d95b3f69421bbf13cced68754e009eed4/examples/with-typescript-graphql) example since that [`next-env.d.ts`](https://github.com/vercel/next.js/blob/40f85f6d95b3f69421bbf13cced68754e009eed4/examples/with-typescript-graphql/next-env.d.ts#L4-L9) actually has changes and I couldn't even run `yarn build` in that example, so I'm not sure what will happen with the `next-env.d.ts`. Someone who _gets_ that example will have to fix it I suppose.
2021-08-12 22:36:53 +02:00
path.join(root, 'next-env.d.ts')
)
}
feat(cli): support examples without `package.json` (#37910) Previously our CLI assumed that when using an `--example` flag, the example contains a `package.json` file. There are examples though, like `with-docker-compose` which does not have one. In that case, we can simply clone the directory and show a success message. <details> <summary> Full list of examples without <code>package.json</code>: </summary> <ul> <li>custom-server</li> <li>page-transitions</li> <li>parameterized-routing</li> <li>reproduction-template</li> <li>with-chakra-ui-typescript</li> <li>with-cookie-auth</li> <li>with-docker-compose</li> <li>with-dotenv</li> <li>with-facebook-chat-plugin</li> <li>with-firebase-authentication</li> <li>with-firebase-authentication-serverless</li> <li>with-glamorous</li> <li>with-global-stylesheet</li> <li>with-global-stylesheet-simple</li> <li>with-graphql-faunadb</li> <li>with-markdown</li> <li>with-material-ui</li> <li>with-next-auth</li> <li>with-next-i18next</li> <li>with-next-multilingual</li> <li>with-next-routes</li> <li>with-now-env</li> <li>with-pretty-url-routing</li> <li>with-prisma</li> <li>with-redux-toolkit</li> <li>with-redux-toolkit-typescript</li> <li>with-sentry-simple</li> <li>with-strict-csp-hash</li> <li>with-styled-jsx-postcss</li> <li>with-sw-precache</li> <li>with-typescript-styled-components</li> <li>with-universal-configuration-build-time</li> <li>with-universal-configuration-runtime</li> </ul> </details> Fixes #37884 In a follow-up PR, we can try to detect if an example contains a README.md file only, and if the example was moved, we could either try getting it from the new location or at least show a better message. (Eg.: using a magic comment that we can parse) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
2022-06-23 19:28:14 +02:00
hasPackageJson = fs.existsSync(packageJsonPath)
if (hasPackageJson) {
console.log('Installing packages. This might take a couple of minutes.')
console.log()
feat(cli): support examples without `package.json` (#37910) Previously our CLI assumed that when using an `--example` flag, the example contains a `package.json` file. There are examples though, like `with-docker-compose` which does not have one. In that case, we can simply clone the directory and show a success message. <details> <summary> Full list of examples without <code>package.json</code>: </summary> <ul> <li>custom-server</li> <li>page-transitions</li> <li>parameterized-routing</li> <li>reproduction-template</li> <li>with-chakra-ui-typescript</li> <li>with-cookie-auth</li> <li>with-docker-compose</li> <li>with-dotenv</li> <li>with-facebook-chat-plugin</li> <li>with-firebase-authentication</li> <li>with-firebase-authentication-serverless</li> <li>with-glamorous</li> <li>with-global-stylesheet</li> <li>with-global-stylesheet-simple</li> <li>with-graphql-faunadb</li> <li>with-markdown</li> <li>with-material-ui</li> <li>with-next-auth</li> <li>with-next-i18next</li> <li>with-next-multilingual</li> <li>with-next-routes</li> <li>with-now-env</li> <li>with-pretty-url-routing</li> <li>with-prisma</li> <li>with-redux-toolkit</li> <li>with-redux-toolkit-typescript</li> <li>with-sentry-simple</li> <li>with-strict-csp-hash</li> <li>with-styled-jsx-postcss</li> <li>with-sw-precache</li> <li>with-typescript-styled-components</li> <li>with-universal-configuration-build-time</li> <li>with-universal-configuration-runtime</li> </ul> </details> Fixes #37884 In a follow-up PR, we can try to detect if an example contains a README.md file only, and if the example was moved, we could either try getting it from the new location or at least show a better message. (Eg.: using a magic comment that we can parse) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
2022-06-23 19:28:14 +02:00
await install(root, null, { packageManager, isOnline })
console.log()
}
} else {
/**
feat(create-next-app): JS/TS prompt (with appDir support); enhanced testing (#42012) Resubmitting this PR following this comment from Tim. This work has been done already and we can build off of it to get this in faster. > Just to be clear we're planning to rework create-next-app to give you the option to choose between JavaScript or TypeScript so it'll solve this request. For `app` right now it'll stay TypeScript till that is implemented. > > _Originally posted by @timneutkens in https://github.com/vercel/next.js/discussions/41745#discussioncomment-3985833_ --- I added the `--ts, --typescript` flag to `create-next-app` in https://github.com/vercel/next.js/pull/24655, and since then I have seen it used very frequently, including in recent issues (such as https://github.com/vercel/next.js/issues/33314) and most Next.js tutorials on YouTube. I noticed the template logic added in this PR was also used to add the `appDir` configuration as well. We discussed a while ago adding the following user flow: - `create-next-app --js, --javascript` creates a JS project - `create-next-app --ts, --typescript` creates a TS project - `create-next-app [name]` (no `--js, --ts`) prompts the user to choose either JS or TS, with TS selected by default. ### Review Adding support for appDir and refactoring the templates brought the pain-of-review up a bit, but it's not so bad when broken into increments. The original 8-file diff is here: https://github.com/ctjlewis/next.js/commit/1f47d9b0bf5b2c59dce893ca6634c1a9bfd3dd19 And the PR that brought the diff up to 59 files (mostly owed to `app` template dirs and file structure refactors): https://github.com/ctjlewis/next.js/commit/bd3ae4afd31f787dd41df2c6ab2e8145deef2138 ([PR link](https://github.com/ctjlewis/next.js/pull/3/files)) ### Demo https://user-images.githubusercontent.com/1657236/198586216-4691ff4c-48d4-4c6c-b7c1-705c38dd0194.mov Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-10-31 06:43:39 +01:00
* If an example repository is not provided for cloning, proceed
* by installing from a template.
*/
feat(create-next-app): JS/TS prompt (with appDir support); enhanced testing (#42012) Resubmitting this PR following this comment from Tim. This work has been done already and we can build off of it to get this in faster. > Just to be clear we're planning to rework create-next-app to give you the option to choose between JavaScript or TypeScript so it'll solve this request. For `app` right now it'll stay TypeScript till that is implemented. > > _Originally posted by @timneutkens in https://github.com/vercel/next.js/discussions/41745#discussioncomment-3985833_ --- I added the `--ts, --typescript` flag to `create-next-app` in https://github.com/vercel/next.js/pull/24655, and since then I have seen it used very frequently, including in recent issues (such as https://github.com/vercel/next.js/issues/33314) and most Next.js tutorials on YouTube. I noticed the template logic added in this PR was also used to add the `appDir` configuration as well. We discussed a while ago adding the following user flow: - `create-next-app --js, --javascript` creates a JS project - `create-next-app --ts, --typescript` creates a TS project - `create-next-app [name]` (no `--js, --ts`) prompts the user to choose either JS or TS, with TS selected by default. ### Review Adding support for appDir and refactoring the templates brought the pain-of-review up a bit, but it's not so bad when broken into increments. The original 8-file diff is here: https://github.com/ctjlewis/next.js/commit/1f47d9b0bf5b2c59dce893ca6634c1a9bfd3dd19 And the PR that brought the diff up to 59 files (mostly owed to `app` template dirs and file structure refactors): https://github.com/ctjlewis/next.js/commit/bd3ae4afd31f787dd41df2c6ab2e8145deef2138 ([PR link](https://github.com/ctjlewis/next.js/pull/3/files)) ### Demo https://user-images.githubusercontent.com/1657236/198586216-4691ff4c-48d4-4c6c-b7c1-705c38dd0194.mov Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-10-31 06:43:39 +01:00
await installTemplate({
appName,
root,
template,
mode,
packageManager,
isOnline,
feat(cli): introduce `--tailwind` flag (#46927) ### What? This PR introduces a new `--tailwind` flag to the `create-next-app` CLI, to make it easier to bootstrap a Next.js app with Tailwind CSS pre-configured. This is going to be the **default**. To opt-out of Tailwind CSS, you can use the `--no-tailwind` flag. ### Why? Tailwind CSS is one of the most popular styling solutions right now, and we would like to make it easier to get started. Currently, the closest you can come to this is by running `pnpm create next-app -e with-tailwindcss` which will clone the https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss example. But that example is not configured for the App Router. This PR will let you add Tailwind CSS to both `app/`, `pages/`, and start out with TypeScript or JavaScript via the CLI prompts. (Some community feedback https://twitter.com/dev_jonaskaas/status/1632367991827443713, https://twitter.com/samselikoff/status/1634662473331617794) ### How? We are adding 4 new templates to the CLI bundle. > Note: The styling is not pixel-perfect compared to the current templates (using CSS modules) to require fewer overrides, but I tried to match it as close as possible. Here are a few screenshots: <details> <summary><b>Current, light</b></summary> <img src="https://user-images.githubusercontent.com/18369201/224733372-9dba86fe-9191-471d-ad9f-ab904c47f544.png"/> </details> <details> <summary><b>Tailwind (new), light</b></summary> <img src="https://user-images.githubusercontent.com/18369201/224733610-038d9d0f-634d-4b69-b5c2-a5056b56760c.png"/> </details> <details> <summary><b>Current, dark, responsive</b></summary> <img src="https://user-images.githubusercontent.com/18369201/224733790-9b4d730c-0336-4dbe-bc10-1cae1d7fd145.png"/> </details> <details> <summary><b>Tailwind (new), dark, responsive</b></summary> <img src="https://user-images.githubusercontent.com/18369201/224734375-28384bbc-2c3a-4125-8f29-c102f3b7aa1d.png"/> </details> #### For reviewers This introduces 4 new templates, with a very similar code base to the original ones. To keep the PR focused, I decided to copy over duplicate code, but we could potentially create a shared folder for files that are the same across templates to somewhat reduce the CLI size. Not sure if it's worth it, let me know. Probably fine for now, but something to consider if we are adding more permutations in the future. --- ~Work remaining:~ - [x] app+ts - [x] layout - [x] dark mode - [x] media queries - [x] animations - [x] app+js - [x] pages+ts - [x] pages+js - [x] prompt/config - [x] deprecate Tailwind CSS example in favor of CLI - [x] update docs - [x] add test - [x] add [Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) Closes NEXT-772 Related #45814, #44286
2023-03-16 16:06:27 +01:00
tailwind,
Add prompt for ESLint to CNA (#42218) Following up https://github.com/vercel/next.js/pull/42012 this adds an additional prompt for include ESLint config/dependencies or not. As discussed, this also removes the slow down from doing separate `dependencies` and `devDependencies` installs since this separation is no longer required now that we have `output: 'standalone'` which ensures only actual necessary dependency files are used for production builds. <details> <summary>Before</summary> https://user-images.githubusercontent.com/22380829/198953290-116b422d-4359-4aa9-9d82-b3265fde7b3f.mp4 </details> <details> <summary>After</summary> https://user-images.githubusercontent.com/22380829/198953347-20dbf897-92b3-45ea-a9d2-cfb61622251d.mp4 </details> ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
2022-10-31 16:51:50 +01:00
eslint,
srcDir,
importAlias,
})
}
if (tryGitInit(root)) {
console.log('Initialized a git repository.')
console.log()
}
let cdpath: string
if (path.join(originalDirectory, appName) === appPath) {
cdpath = appName
} else {
cdpath = appPath
}
console.log(`${green('Success!')} Created ${appName} at ${appPath}`)
feat(cli): support examples without `package.json` (#37910) Previously our CLI assumed that when using an `--example` flag, the example contains a `package.json` file. There are examples though, like `with-docker-compose` which does not have one. In that case, we can simply clone the directory and show a success message. <details> <summary> Full list of examples without <code>package.json</code>: </summary> <ul> <li>custom-server</li> <li>page-transitions</li> <li>parameterized-routing</li> <li>reproduction-template</li> <li>with-chakra-ui-typescript</li> <li>with-cookie-auth</li> <li>with-docker-compose</li> <li>with-dotenv</li> <li>with-facebook-chat-plugin</li> <li>with-firebase-authentication</li> <li>with-firebase-authentication-serverless</li> <li>with-glamorous</li> <li>with-global-stylesheet</li> <li>with-global-stylesheet-simple</li> <li>with-graphql-faunadb</li> <li>with-markdown</li> <li>with-material-ui</li> <li>with-next-auth</li> <li>with-next-i18next</li> <li>with-next-multilingual</li> <li>with-next-routes</li> <li>with-now-env</li> <li>with-pretty-url-routing</li> <li>with-prisma</li> <li>with-redux-toolkit</li> <li>with-redux-toolkit-typescript</li> <li>with-sentry-simple</li> <li>with-strict-csp-hash</li> <li>with-styled-jsx-postcss</li> <li>with-sw-precache</li> <li>with-typescript-styled-components</li> <li>with-universal-configuration-build-time</li> <li>with-universal-configuration-runtime</li> </ul> </details> Fixes #37884 In a follow-up PR, we can try to detect if an example contains a README.md file only, and if the example was moved, we could either try getting it from the new location or at least show a better message. (Eg.: using a magic comment that we can parse) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
2022-06-23 19:28:14 +02:00
if (hasPackageJson) {
console.log('Inside that directory, you can run several commands:')
console.log()
console.log(cyan(` ${packageManager} ${useYarn ? '' : 'run '}dev`))
feat(cli): support examples without `package.json` (#37910) Previously our CLI assumed that when using an `--example` flag, the example contains a `package.json` file. There are examples though, like `with-docker-compose` which does not have one. In that case, we can simply clone the directory and show a success message. <details> <summary> Full list of examples without <code>package.json</code>: </summary> <ul> <li>custom-server</li> <li>page-transitions</li> <li>parameterized-routing</li> <li>reproduction-template</li> <li>with-chakra-ui-typescript</li> <li>with-cookie-auth</li> <li>with-docker-compose</li> <li>with-dotenv</li> <li>with-facebook-chat-plugin</li> <li>with-firebase-authentication</li> <li>with-firebase-authentication-serverless</li> <li>with-glamorous</li> <li>with-global-stylesheet</li> <li>with-global-stylesheet-simple</li> <li>with-graphql-faunadb</li> <li>with-markdown</li> <li>with-material-ui</li> <li>with-next-auth</li> <li>with-next-i18next</li> <li>with-next-multilingual</li> <li>with-next-routes</li> <li>with-now-env</li> <li>with-pretty-url-routing</li> <li>with-prisma</li> <li>with-redux-toolkit</li> <li>with-redux-toolkit-typescript</li> <li>with-sentry-simple</li> <li>with-strict-csp-hash</li> <li>with-styled-jsx-postcss</li> <li>with-sw-precache</li> <li>with-typescript-styled-components</li> <li>with-universal-configuration-build-time</li> <li>with-universal-configuration-runtime</li> </ul> </details> Fixes #37884 In a follow-up PR, we can try to detect if an example contains a README.md file only, and if the example was moved, we could either try getting it from the new location or at least show a better message. (Eg.: using a magic comment that we can parse) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
2022-06-23 19:28:14 +02:00
console.log(' Starts the development server.')
console.log()
console.log(cyan(` ${packageManager} ${useYarn ? '' : 'run '}build`))
feat(cli): support examples without `package.json` (#37910) Previously our CLI assumed that when using an `--example` flag, the example contains a `package.json` file. There are examples though, like `with-docker-compose` which does not have one. In that case, we can simply clone the directory and show a success message. <details> <summary> Full list of examples without <code>package.json</code>: </summary> <ul> <li>custom-server</li> <li>page-transitions</li> <li>parameterized-routing</li> <li>reproduction-template</li> <li>with-chakra-ui-typescript</li> <li>with-cookie-auth</li> <li>with-docker-compose</li> <li>with-dotenv</li> <li>with-facebook-chat-plugin</li> <li>with-firebase-authentication</li> <li>with-firebase-authentication-serverless</li> <li>with-glamorous</li> <li>with-global-stylesheet</li> <li>with-global-stylesheet-simple</li> <li>with-graphql-faunadb</li> <li>with-markdown</li> <li>with-material-ui</li> <li>with-next-auth</li> <li>with-next-i18next</li> <li>with-next-multilingual</li> <li>with-next-routes</li> <li>with-now-env</li> <li>with-pretty-url-routing</li> <li>with-prisma</li> <li>with-redux-toolkit</li> <li>with-redux-toolkit-typescript</li> <li>with-sentry-simple</li> <li>with-strict-csp-hash</li> <li>with-styled-jsx-postcss</li> <li>with-sw-precache</li> <li>with-typescript-styled-components</li> <li>with-universal-configuration-build-time</li> <li>with-universal-configuration-runtime</li> </ul> </details> Fixes #37884 In a follow-up PR, we can try to detect if an example contains a README.md file only, and if the example was moved, we could either try getting it from the new location or at least show a better message. (Eg.: using a magic comment that we can parse) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
2022-06-23 19:28:14 +02:00
console.log(' Builds the app for production.')
console.log()
console.log(cyan(` ${packageManager} start`))
feat(cli): support examples without `package.json` (#37910) Previously our CLI assumed that when using an `--example` flag, the example contains a `package.json` file. There are examples though, like `with-docker-compose` which does not have one. In that case, we can simply clone the directory and show a success message. <details> <summary> Full list of examples without <code>package.json</code>: </summary> <ul> <li>custom-server</li> <li>page-transitions</li> <li>parameterized-routing</li> <li>reproduction-template</li> <li>with-chakra-ui-typescript</li> <li>with-cookie-auth</li> <li>with-docker-compose</li> <li>with-dotenv</li> <li>with-facebook-chat-plugin</li> <li>with-firebase-authentication</li> <li>with-firebase-authentication-serverless</li> <li>with-glamorous</li> <li>with-global-stylesheet</li> <li>with-global-stylesheet-simple</li> <li>with-graphql-faunadb</li> <li>with-markdown</li> <li>with-material-ui</li> <li>with-next-auth</li> <li>with-next-i18next</li> <li>with-next-multilingual</li> <li>with-next-routes</li> <li>with-now-env</li> <li>with-pretty-url-routing</li> <li>with-prisma</li> <li>with-redux-toolkit</li> <li>with-redux-toolkit-typescript</li> <li>with-sentry-simple</li> <li>with-strict-csp-hash</li> <li>with-styled-jsx-postcss</li> <li>with-sw-precache</li> <li>with-typescript-styled-components</li> <li>with-universal-configuration-build-time</li> <li>with-universal-configuration-runtime</li> </ul> </details> Fixes #37884 In a follow-up PR, we can try to detect if an example contains a README.md file only, and if the example was moved, we could either try getting it from the new location or at least show a better message. (Eg.: using a magic comment that we can parse) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
2022-06-23 19:28:14 +02:00
console.log(' Runs the built app in production mode.')
console.log()
console.log('We suggest that you begin by typing:')
console.log()
console.log(cyan(' cd'), cdpath)
console.log(` ${cyan(`${packageManager} ${useYarn ? '' : 'run '}dev`)}`)
feat(cli): support examples without `package.json` (#37910) Previously our CLI assumed that when using an `--example` flag, the example contains a `package.json` file. There are examples though, like `with-docker-compose` which does not have one. In that case, we can simply clone the directory and show a success message. <details> <summary> Full list of examples without <code>package.json</code>: </summary> <ul> <li>custom-server</li> <li>page-transitions</li> <li>parameterized-routing</li> <li>reproduction-template</li> <li>with-chakra-ui-typescript</li> <li>with-cookie-auth</li> <li>with-docker-compose</li> <li>with-dotenv</li> <li>with-facebook-chat-plugin</li> <li>with-firebase-authentication</li> <li>with-firebase-authentication-serverless</li> <li>with-glamorous</li> <li>with-global-stylesheet</li> <li>with-global-stylesheet-simple</li> <li>with-graphql-faunadb</li> <li>with-markdown</li> <li>with-material-ui</li> <li>with-next-auth</li> <li>with-next-i18next</li> <li>with-next-multilingual</li> <li>with-next-routes</li> <li>with-now-env</li> <li>with-pretty-url-routing</li> <li>with-prisma</li> <li>with-redux-toolkit</li> <li>with-redux-toolkit-typescript</li> <li>with-sentry-simple</li> <li>with-strict-csp-hash</li> <li>with-styled-jsx-postcss</li> <li>with-sw-precache</li> <li>with-typescript-styled-components</li> <li>with-universal-configuration-build-time</li> <li>with-universal-configuration-runtime</li> </ul> </details> Fixes #37884 In a follow-up PR, we can try to detect if an example contains a README.md file only, and if the example was moved, we could either try getting it from the new location or at least show a better message. (Eg.: using a magic comment that we can parse) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
2022-06-23 19:28:14 +02:00
}
console.log()
}