0
# CLI Options
1

2
Command-line options for controlling development server behavior, build analysis tools, and debugging features during `start` and `build` commands.
3

4
## Capabilities
5

6
### Development Server Options  
7

8
CLI flags that control development server behavior and features.
9

10
```javascript { .api }
11
interface DevelopmentServerOptions {
12
  /**
13
   * Enable HTTPS in development server
14
   * Generates and uses self-signed certificates automatically
15
   * @commands ['start']
16
   */
17
  '--https'?: boolean;
18
  
19
  /**
20
   * Disable hot reload functionality
21
   * Prevents automatic browser refresh on file changes
22
   * @commands ['start']
23
   */
24
  '--disable-reload'?: boolean;
25
  
26
  /**
27
   * Disable mock server
28
   * Prevents API mocking functionality from starting
29
   * @commands ['start']
30
   */
31
  '--disable-mock'?: boolean;
32
  
33
  /**
34
   * Disable automatic browser opening
35
   * Prevents browser from opening automatically on server start
36
   * @commands ['start']
37
   */
38
  '--disable-open'?: boolean;
39
  
40
  /**
41
   * Disable assets processing
42
   * Skips asset processing for faster development builds
43
   * @commands ['start']
44
   */
45
  '--disable-assets'?: boolean;
46
  
47
  /**
48
   * Enable debug runtime
49
   * Enables additional debugging information and runtime checks
50
   * @commands ['start']
51
   */
52
  '--debug-runtime'?: boolean;
53
}
54
```
55

56
**Usage Examples:**
57

58
```bash
59
# Start development server with HTTPS
60
npm start -- --https
61

62
# Start with hot reload disabled
63
npm start -- --disable-reload
64

65
# Start without opening browser
66
npm start -- --disable-open
67

68
# Start with multiple options
69
npm start -- --https --disable-mock --debug-runtime
70
```
71

72
### Build Analysis Options
73

74
CLI flags for analyzing and debugging build output and bundle composition.
75

76
```javascript { .api }
77
interface BuildAnalysisOptions {
78
  /**
79
   * Enable webpack bundle analyzer
80
   * Opens interactive bundle size analysis in browser
81
   * @commands ['start', 'build']
82
   */
83
  '--analyzer'?: boolean;
84
  
85
  /**
86
   * Specify port for bundle analyzer
87
   * Sets custom port for analyzer server (default: 8888)
88
   * @commands ['start', 'build']
89
   */
90
  '--analyzer-port'?: number;
91
}
92
```
93

94
**Usage Examples:**
95

96
```bash
97
# Analyze bundle during development
98
npm start -- --analyzer
99

100
# Analyze production build
101
npm run build -- --analyzer
102

103
# Use custom analyzer port
104
npm run build -- --analyzer --analyzer-port 9999
105
```
106

107
### Build Mode Options
108

109
CLI flags for controlling build modes and behavior.
110

111
```javascript { .api }
112
interface BuildModeOptions {
113
  /**
114
   * Set build mode
115
   * Controls environment-specific build optimizations
116
   * @commands ['start', 'build']
117
   */
118
  '--mode'?: 'development' | 'production' | string;
119
}
120
```
121

122
**Usage Examples:**
123

124
```bash
125
# Set specific build mode
126
npm start -- --mode development
127

128
# Production mode for debugging
129
npm run build -- --mode production
130
```
131

132
## CLI Option Implementation Details
133

134
### HTTPS Option
135

136
When `--https` flag is used, the system automatically:
137

138
- Generates self-signed SSL certificates using mkcert
139
- Configures development server to use HTTPS protocol  
140
- Sets up proper certificate trust for local development
141
- Enables secure connections for testing PWA features
142

143
```javascript
144
// Internal implementation reference
145
const httpsConfig = {
146
  key: fs.readFileSync(keyPath),
147
  cert: fs.readFileSync(certPath),
148
  ca: fs.readFileSync(caPath)
149
};
150
```
151

152
### Bundle Analyzer Option
153

154
When `--analyzer` flag is used, the system:
155

156
- Integrates webpack-bundle-analyzer plugin
157
- Starts analyzer server on specified port (default: 8888)
158
- Generates interactive treemap visualization
159
- Provides detailed bundle size analysis and optimization suggestions
160

161
### Hot Reload Control
162

163
When `--disable-reload` flag is used:
164

165
- Disables webpack-dev-server hot module replacement
166
- Prevents automatic browser refresh on file changes
167
- Useful for debugging or when working with external tools
168

169
### Mock Server Control
170

171
When `--disable-mock` flag is used:
172

173
- Skips webpack-dev-mock setup
174
- Disables API endpoint mocking functionality
175
- Allows connection to real backend services during development
176

177
### Debug Runtime
178

179
When `--debug-runtime` flag is used:
180

181
- Enables additional console logging
182
- Provides detailed build process information
183
- Includes timing information for build steps
184
- Useful for troubleshooting build issues
185

186
## Integration with Build Configuration
187

188
CLI options integrate seamlessly with user configuration options:
189

190
```javascript
191
// CLI options override user config when specified
192
module.exports = {
193
  // User config sets default
194
  mock: true,
195
  
196
  // --disable-mock CLI flag overrides this setting
197
  // Final effective value: false (when CLI flag used)
198
};
199
```
200

201
## Command Applicability
202

203
Each CLI option is restricted to specific commands:
204

205
- **Start-only options**: `--https`, `--disable-reload`, `--disable-mock`, `--disable-open`, `--disable-assets`, `--debug-runtime`
206
- **Build-only options**: None currently
207
- **Universal options**: `--analyzer`, `--analyzer-port`, `--mode`
208

209
```bash
210
# Valid usage
211
npm start -- --https          # ✓ https works with start
212
npm run build -- --analyzer   # ✓ analyzer works with build
213

214
# Invalid usage would be ignored
215
npm run build -- --https      # ✗ https ignored in build command
216
```