Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Vite commands to CLI --help #8939

Merged
merged 2 commits into from
Feb 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/grumpy-beers-sneeze.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@remix-run/dev": patch
---

Add Vite commands to Remix CLI `--help` output
47 changes: 43 additions & 4 deletions packages/remix-dev/__tests__/cli-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,8 @@ describe("remix CLI", () => {

Usage:
$ remix init [projectDir]
$ remix vite:build [projectDir]
$ remix vite:dev [projectDir]
$ remix build [projectDir]
$ remix dev [projectDir]
$ remix routes [projectDir]
Expand All @@ -93,8 +95,31 @@ describe("remix CLI", () => {
--help, -h Print this help message and exit
--version, -v Print the CLI version and exit
--no-color Disable ANSI colors in console output
\`vite:build\` Options (Passed through to Vite):
--assetsInlineLimit Static asset base64 inline threshold in bytes (default: 4096) (number)
--clearScreen Allow/disable clear screen when logging (boolean)
--config, -c Use specified config file (string)
--emptyOutDir Force empty outDir when it's outside of root (boolean)
--logLevel, -l Info | warn | error | silent (string)
--minify Enable/disable minification, or specify minifier to use (default: "esbuild") (boolean | "terser" | "esbuild")
--mode, -m Set env mode (string)
--profile Start built-in Node.js inspector
--sourcemapClient Output source maps for client build (default: false) (boolean | "inline" | "hidden")
--sourcemapServer Output source maps for server build (default: false) (boolean | "inline" | "hidden")
\`build\` Options:
--sourcemap Generate source maps for production
\`vite:dev\` Options (Passed through to Vite):
--clearScreen Allow/disable clear screen when logging (boolean)
--config, -c Use specified config file (string)
--cors Enable CORS (boolean)
--force Force the optimizer to ignore the cache and re-bundle (boolean)
--host Specify hostname (string)
--logLevel, -l Info | warn | error | silent (string)
--mode, -m Set env mode (string)
--open Open browser on startup (boolean | string)
--port Specify port (number)
--profile Start built-in Node.js inspector
--strictPort Exit if specified port is already in use (boolean)
\`dev\` Options:
--command, -c Command used to run your app server
--manual Enable manual mode
Expand All @@ -104,7 +129,11 @@ describe("remix CLI", () => {
\`init\` Options:
--no-delete Skip deleting the \`remix.init\` script
\`routes\` Options:
--config, -c Use specified Vite config file (string)
--json Print the routes as JSON
\`reveal\` Options:
--config, -c Use specified Vite config file (string)
--no-typescript Generate plain JavaScript files

Values:
- projectDir The Remix project directory
Expand All @@ -119,18 +148,26 @@ describe("remix CLI", () => {

$ remix init

Build your project:
Build your project (Vite):

$ remix vite:build

Run your project locally in development (Vite):

$ remix vite:dev

Build your project (Classic compiler):

$ remix build
$ remix build --sourcemap
$ remix build my-app

Run your project locally in development:
Run your project locally in development (Classic compiler):

$ remix dev
$ remix dev -c "node ./server.js"

Start your server separately and watch for changes:
Start your server separately and watch for changes (Classic compiler):

# custom server start command, for example:
$ remix watch
Expand All @@ -143,13 +180,15 @@ describe("remix CLI", () => {
$ remix routes
$ remix routes my-app
$ remix routes --json
$ remix routes --config vite.remix.config.ts

Reveal the used entry point:

$ remix reveal entry.client
$ remix reveal entry.server
$ remix reveal entry.client --no-typescript
$ remix reveal entry.server --no-typescript"
$ remix reveal entry.server --no-typescript
$ remix reveal entry.server --config vite.remix.config.ts"
`);
});
});
Expand Down
49 changes: 46 additions & 3 deletions packages/remix-dev/cli/run.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ ${colors.logoBlue("R")} ${colors.logoGreen("E")} ${colors.logoYellow(

${colors.heading("Usage")}:
$ remix init [${colors.arg("projectDir")}]
$ remix vite:build [${colors.arg("projectDir")}]
$ remix vite:dev [${colors.arg("projectDir")}]
$ remix build [${colors.arg("projectDir")}]
$ remix dev [${colors.arg("projectDir")}]
$ remix routes [${colors.arg("projectDir")}]
Expand All @@ -20,8 +22,31 @@ ${colors.logoBlue("R")} ${colors.logoGreen("E")} ${colors.logoYellow(
--help, -h Print this help message and exit
--version, -v Print the CLI version and exit
--no-color Disable ANSI colors in console output
\`vite:build\` Options (Passed through to Vite):
--assetsInlineLimit Static asset base64 inline threshold in bytes (default: 4096) (number)
--clearScreen Allow/disable clear screen when logging (boolean)
--config, -c Use specified config file (string)
--emptyOutDir Force empty outDir when it's outside of root (boolean)
--logLevel, -l Info | warn | error | silent (string)
--minify Enable/disable minification, or specify minifier to use (default: "esbuild") (boolean | "terser" | "esbuild")
--mode, -m Set env mode (string)
--profile Start built-in Node.js inspector
--sourcemapClient Output source maps for client build (default: false) (boolean | "inline" | "hidden")
--sourcemapServer Output source maps for server build (default: false) (boolean | "inline" | "hidden")
\`build\` Options:
--sourcemap Generate source maps for production
\`vite:dev\` Options (Passed through to Vite):
--clearScreen Allow/disable clear screen when logging (boolean)
--config, -c Use specified config file (string)
--cors Enable CORS (boolean)
--force Force the optimizer to ignore the cache and re-bundle (boolean)
--host Specify hostname (string)
--logLevel, -l Info | warn | error | silent (string)
--mode, -m Set env mode (string)
--open Open browser on startup (boolean | string)
--port Specify port (number)
--profile Start built-in Node.js inspector
--strictPort Exit if specified port is already in use (boolean)
\`dev\` Options:
--command, -c Command used to run your app server
--manual Enable manual mode
Expand All @@ -31,7 +56,11 @@ ${colors.logoBlue("R")} ${colors.logoGreen("E")} ${colors.logoYellow(
\`init\` Options:
--no-delete Skip deleting the \`remix.init\` script
\`routes\` Options:
--config, -c Use specified Vite config file (string)
--json Print the routes as JSON
\`reveal\` Options:
--config, -c Use specified Vite config file (string)
--no-typescript Generate plain JavaScript files

${colors.heading("Values")}:
- ${colors.arg("projectDir")} The Remix project directory
Expand All @@ -46,18 +75,30 @@ ${colors.logoBlue("R")} ${colors.logoGreen("E")} ${colors.logoYellow(

$ remix init

${colors.heading("Build your project")}:
${colors.heading("Build your project (Vite)")}:

$ remix vite:build

${colors.heading("Run your project locally in development (Vite)")}:

$ remix vite:dev

${colors.heading("Build your project (Classic compiler)")}:

$ remix build
$ remix build --sourcemap
$ remix build my-app

${colors.heading("Run your project locally in development")}:
${colors.heading(
"Run your project locally in development (Classic compiler)"
)}:

$ remix dev
$ remix dev -c "node ./server.js"

${colors.heading("Start your server separately and watch for changes")}:
${colors.heading(
"Start your server separately and watch for changes (Classic compiler)"
)}:

# custom server start command, for example:
$ remix watch
Expand All @@ -70,13 +111,15 @@ ${colors.logoBlue("R")} ${colors.logoGreen("E")} ${colors.logoYellow(
$ remix routes
$ remix routes my-app
$ remix routes --json
$ remix routes --config vite.remix.config.ts

${colors.heading("Reveal the used entry point")}:

$ remix reveal entry.client
$ remix reveal entry.server
$ remix reveal entry.client --no-typescript
$ remix reveal entry.server --no-typescript
$ remix reveal entry.server --config vite.remix.config.ts
`;

/**
Expand Down