2020-05-28 10:23:10 +02:00
|
|
|
/* eslint-disable import/no-extraneous-dependencies */
|
2020-05-26 18:39:18 +02:00
|
|
|
import retry from 'async-retry'
|
2023-07-26 20:16:13 +02:00
|
|
|
import { red, green, cyan } from 'picocolors'
|
2019-07-19 21:55:30 +02:00
|
|
|
import fs from 'fs'
|
|
|
|
import path from 'path'
|
2020-02-27 16:32:33 +01:00
|
|
|
import {
|
|
|
|
downloadAndExtractExample,
|
|
|
|
downloadAndExtractRepo,
|
2020-05-26 18:39:18 +02:00
|
|
|
getRepoInfo,
|
2022-06-23 19:28:14 +02:00
|
|
|
existsInRepo,
|
2020-05-26 18:39:18 +02:00
|
|
|
hasRepo,
|
2020-02-27 16:32:33 +01:00
|
|
|
RepoInfo,
|
|
|
|
} from './helpers/examples'
|
2020-07-10 03:29:03 +02:00
|
|
|
import { makeDir } from './helpers/make-dir'
|
2019-11-11 06:42:51 +01:00
|
|
|
import { tryGitInit } from './helpers/git'
|
2019-07-19 21:55:30 +02:00
|
|
|
import { install } from './helpers/install'
|
|
|
|
import { isFolderEmpty } from './helpers/is-folder-empty'
|
|
|
|
import { getOnline } from './helpers/is-online'
|
2020-08-19 19:09:34 +02:00
|
|
|
import { isWriteable } from './helpers/is-writeable'
|
2022-03-04 00:49:24 +01:00
|
|
|
import type { PackageManager } from './helpers/get-pkg-manager'
|
2019-07-19 21:55:30 +02:00
|
|
|
|
2022-10-31 06:43:39 +01:00
|
|
|
import {
|
|
|
|
getTemplateFile,
|
|
|
|
installTemplate,
|
|
|
|
TemplateMode,
|
|
|
|
TemplateType,
|
|
|
|
} from './templates'
|
|
|
|
|
2020-05-26 18:39:18 +02:00
|
|
|
export class DownloadError extends Error {}
|
|
|
|
|
2019-07-19 21:55:30 +02:00
|
|
|
export async function createApp({
|
|
|
|
appPath,
|
2022-03-04 00:49:24 +01:00
|
|
|
packageManager,
|
2019-07-19 21:55:30 +02:00
|
|
|
example,
|
2020-02-27 16:32:33 +01:00
|
|
|
examplePath,
|
2021-05-07 10:08:16 +02:00
|
|
|
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,
|
2022-10-31 16:51:50 +01:00
|
|
|
eslint,
|
2023-05-03 02:28:31 +02:00
|
|
|
appRouter,
|
2023-01-10 00:41:12 +01:00
|
|
|
srcDir,
|
2023-01-14 01:51:25 +01:00
|
|
|
importAlias,
|
2019-07-19 21:55:30 +02:00
|
|
|
}: {
|
|
|
|
appPath: string
|
2022-03-04 00:49:24 +01:00
|
|
|
packageManager: PackageManager
|
2019-07-19 21:55:30 +02:00
|
|
|
example?: string
|
2020-02-27 16:32:33 +01:00
|
|
|
examplePath?: string
|
2022-10-22 23:18:39 +02:00
|
|
|
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
|
2022-10-31 16:51:50 +01:00
|
|
|
eslint: boolean
|
2023-05-03 02:28:31 +02:00
|
|
|
appRouter: boolean
|
2023-01-10 00:41:12 +01:00
|
|
|
srcDir: boolean
|
2023-01-14 01:51:25 +01:00
|
|
|
importAlias: string
|
2020-05-10 23:51:47 +02:00
|
|
|
}): Promise<void> {
|
2020-02-27 16:32:33 +01:00
|
|
|
let repoInfo: RepoInfo | undefined
|
2022-10-31 06:43:39 +01:00
|
|
|
const mode: TemplateMode = typescript ? 'ts' : 'js'
|
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'
|
2020-02-27 16:32:33 +01:00
|
|
|
|
2019-07-19 21:55:30 +02:00
|
|
|
if (example) {
|
2020-02-27 16:32:33 +01:00
|
|
|
let repoUrl: URL | undefined
|
|
|
|
|
|
|
|
try {
|
|
|
|
repoUrl = new URL(example)
|
2021-09-16 18:06:57 +02:00
|
|
|
} catch (error: any) {
|
2020-02-27 16:32:33 +01:00
|
|
|
if (error.code !== 'ERR_INVALID_URL') {
|
|
|
|
console.error(error)
|
|
|
|
process.exit(1)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (repoUrl) {
|
|
|
|
if (repoUrl.origin !== 'https://github.com') {
|
|
|
|
console.error(
|
2023-07-26 20:16:13 +02:00
|
|
|
`Invalid URL: ${red(
|
2020-02-27 16:32:33 +01:00
|
|
|
`"${example}"`
|
|
|
|
)}. Only GitHub repositories are supported. Please use a GitHub URL and try again.`
|
|
|
|
)
|
|
|
|
process.exit(1)
|
|
|
|
}
|
|
|
|
|
2020-04-06 15:57:19 +02:00
|
|
|
repoInfo = await getRepoInfo(repoUrl, examplePath)
|
2020-02-27 16:32:33 +01:00
|
|
|
|
|
|
|
if (!repoInfo) {
|
|
|
|
console.error(
|
2023-07-26 20:16:13 +02:00
|
|
|
`Found invalid GitHub URL: ${red(
|
2020-02-27 16:32:33 +01:00
|
|
|
`"${example}"`
|
|
|
|
)}. Please fix the URL and try again.`
|
|
|
|
)
|
|
|
|
process.exit(1)
|
|
|
|
}
|
|
|
|
|
|
|
|
const found = await hasRepo(repoInfo)
|
|
|
|
|
|
|
|
if (!found) {
|
|
|
|
console.error(
|
2023-07-26 20:16:13 +02:00
|
|
|
`Could not locate the repository for ${red(
|
2020-02-27 16:32:33 +01:00
|
|
|
`"${example}"`
|
|
|
|
)}. Please check that the repository exists and try again.`
|
|
|
|
)
|
|
|
|
process.exit(1)
|
|
|
|
}
|
2020-05-26 18:39:18 +02:00
|
|
|
} else if (example !== '__internal-testing-retry') {
|
2022-06-23 19:28:14 +02:00
|
|
|
const found = await existsInRepo(example)
|
2020-02-27 16:32:33 +01:00
|
|
|
|
|
|
|
if (!found) {
|
|
|
|
console.error(
|
2023-07-26 20:16:13 +02:00
|
|
|
`Could not locate an example named ${red(
|
2020-02-27 16:32:33 +01:00
|
|
|
`"${example}"`
|
2021-07-07 13:12:58 +02:00
|
|
|
)}. It could be due to the following:\n`,
|
2023-07-26 20:16:13 +02:00
|
|
|
`1. Your spelling of example ${red(
|
2021-07-07 13:12:58 +02:00
|
|
|
`"${example}"`
|
|
|
|
)} might be incorrect.\n`,
|
2022-04-29 14:39:17 +02:00
|
|
|
`2. You might not be connected to the internet or you are behind a proxy.`
|
2020-02-27 16:32:33 +01:00
|
|
|
)
|
|
|
|
process.exit(1)
|
|
|
|
}
|
2019-07-19 21:55:30 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const root = path.resolve(appPath)
|
2020-08-19 19:09:34 +02:00
|
|
|
|
|
|
|
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)
|
|
|
|
}
|
|
|
|
|
2019-07-19 21:55:30 +02:00
|
|
|
const appName = path.basename(root)
|
|
|
|
|
|
|
|
await makeDir(root)
|
|
|
|
if (!isFolderEmpty(root, appName)) {
|
|
|
|
process.exit(1)
|
|
|
|
}
|
|
|
|
|
2022-03-04 00:49:24 +01:00
|
|
|
const useYarn = packageManager === 'yarn'
|
2019-07-19 21:55:30 +02:00
|
|
|
const isOnline = !useYarn || (await getOnline())
|
|
|
|
const originalDirectory = process.cwd()
|
|
|
|
|
2023-07-26 20:16:13 +02:00
|
|
|
console.log(`Creating a new Next.js app in ${green(root)}.`)
|
2019-07-19 21:55:30 +02:00
|
|
|
console.log()
|
|
|
|
|
|
|
|
process.chdir(root)
|
|
|
|
|
2022-06-23 19:28:14 +02:00
|
|
|
const packageJsonPath = path.join(root, 'package.json')
|
|
|
|
let hasPackageJson = false
|
|
|
|
|
2019-07-19 21:55:30 +02:00
|
|
|
if (example) {
|
2021-05-07 10:08:16 +02:00
|
|
|
/**
|
|
|
|
* If an example repository is provided, clone it.
|
|
|
|
*/
|
2020-05-26 18:39:18 +02:00
|
|
|
try {
|
|
|
|
if (repoInfo) {
|
|
|
|
const repoInfo2 = repoInfo
|
|
|
|
console.log(
|
2023-07-26 20:16:13 +02:00
|
|
|
`Downloading files from repo ${cyan(
|
2020-05-26 18:39:18 +02:00
|
|
|
example
|
|
|
|
)}. This might take a moment.`
|
|
|
|
)
|
|
|
|
console.log()
|
|
|
|
await retry(() => downloadAndExtractRepo(root, repoInfo2), {
|
|
|
|
retries: 3,
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
console.log(
|
2023-07-26 20:16:13 +02:00
|
|
|
`Downloading files for example ${cyan(
|
2020-05-26 18:39:18 +02:00
|
|
|
example
|
|
|
|
)}. This might take a moment.`
|
|
|
|
)
|
|
|
|
console.log()
|
|
|
|
await retry(() => downloadAndExtractExample(root, example), {
|
|
|
|
retries: 3,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
} catch (reason) {
|
2021-09-16 18:06:57 +02:00
|
|
|
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 + ''
|
|
|
|
)
|
2020-02-27 16:32:33 +01:00
|
|
|
}
|
2022-10-31 06:43:39 +01:00
|
|
|
// Copy `.gitignore` if the application did not provide one
|
2019-11-11 06:42:51 +01:00
|
|
|
const ignorePath = path.join(root, '.gitignore')
|
|
|
|
if (!fs.existsSync(ignorePath)) {
|
|
|
|
fs.copyFileSync(
|
2022-10-31 06:43:39 +01:00
|
|
|
getTemplateFile({ template, mode, file: 'gitignore' }),
|
2019-11-11 06:42:51 +01:00
|
|
|
ignorePath
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-10-31 06:43:39 +01:00
|
|
|
// Copy `next-env.d.ts` to any example that is typescript
|
2021-08-12 22:36:53 +02:00
|
|
|
const tsconfigPath = path.join(root, 'tsconfig.json')
|
|
|
|
if (fs.existsSync(tsconfigPath)) {
|
|
|
|
fs.copyFileSync(
|
2022-10-31 06:43:39 +01:00
|
|
|
getTemplateFile({ template, mode: 'ts', file: 'next-env.d.ts' }),
|
2021-08-12 22:36:53 +02:00
|
|
|
path.join(root, 'next-env.d.ts')
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
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()
|
2019-07-19 21:55:30 +02:00
|
|
|
|
2022-06-23 19:28:14 +02:00
|
|
|
await install(root, null, { packageManager, isOnline })
|
|
|
|
console.log()
|
|
|
|
}
|
2019-07-19 21:55:30 +02:00
|
|
|
} else {
|
2021-05-07 10:08:16 +02:00
|
|
|
/**
|
2022-10-31 06:43:39 +01:00
|
|
|
* If an example repository is not provided for cloning, proceed
|
2021-05-07 10:08:16 +02:00
|
|
|
* by installing from a template.
|
|
|
|
*/
|
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,
|
2022-10-31 16:51:50 +01:00
|
|
|
eslint,
|
2023-01-10 00:41:12 +01:00
|
|
|
srcDir,
|
2023-01-14 01:51:25 +01:00
|
|
|
importAlias,
|
2019-07-19 21:55:30 +02:00
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2019-11-11 06:42:51 +01:00
|
|
|
if (tryGitInit(root)) {
|
|
|
|
console.log('Initialized a git repository.')
|
|
|
|
console.log()
|
|
|
|
}
|
|
|
|
|
2019-07-19 21:55:30 +02:00
|
|
|
let cdpath: string
|
|
|
|
if (path.join(originalDirectory, appName) === appPath) {
|
|
|
|
cdpath = appName
|
|
|
|
} else {
|
|
|
|
cdpath = appPath
|
|
|
|
}
|
|
|
|
|
2023-07-26 20:16:13 +02:00
|
|
|
console.log(`${green('Success!')} Created ${appName} at ${appPath}`)
|
2022-06-23 19:28:14 +02:00
|
|
|
|
|
|
|
if (hasPackageJson) {
|
|
|
|
console.log('Inside that directory, you can run several commands:')
|
|
|
|
console.log()
|
2023-07-26 20:16:13 +02:00
|
|
|
console.log(cyan(` ${packageManager} ${useYarn ? '' : 'run '}dev`))
|
2022-06-23 19:28:14 +02:00
|
|
|
console.log(' Starts the development server.')
|
|
|
|
console.log()
|
2023-07-26 20:16:13 +02:00
|
|
|
console.log(cyan(` ${packageManager} ${useYarn ? '' : 'run '}build`))
|
2022-06-23 19:28:14 +02:00
|
|
|
console.log(' Builds the app for production.')
|
|
|
|
console.log()
|
2023-07-26 20:16:13 +02:00
|
|
|
console.log(cyan(` ${packageManager} start`))
|
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()
|
2023-07-26 20:16:13 +02:00
|
|
|
console.log(cyan(' cd'), cdpath)
|
|
|
|
console.log(` ${cyan(`${packageManager} ${useYarn ? '' : 'run '}dev`)}`)
|
2022-06-23 19:28:14 +02:00
|
|
|
}
|
2019-07-19 21:55:30 +02:00
|
|
|
console.log()
|
|
|
|
}
|