0
# Development Integration
1

2
Local development support with serverless invoke local, serverless-offline integration, watch capabilities, and debugging tools for efficient serverless development workflows.
3

4
## Capabilities
5

6
### Local Function Invocation
7

8
Enhanced local function invocation with automatic webpack compilation and watch mode support.
9

10
```bash { .api }
11
# Local invocation commands
12
sls invoke local --function <name>                    # Invoke function locally with webpack
13
sls invoke local --function <name> --watch           # Invoke with watch mode
14
sls invoke local --function <name> --skip-build     # Skip webpack compilation
15
sls invoke local --function <name> --webpack-use-polling <ms>  # Enable polling mode
16
sls invoke local --function <name> --data <json>    # Pass data to function
17
sls invoke local --function <name> --path <file>    # Load data from file
18

19
# Global invoke options
20
--stage <stage>                                       # Set deployment stage
21
--region <region>                                    # Set AWS region  
22
--log                                               # Show logs
23
--docker                                           # Use Docker for invocation
24
```
25

26
**Usage Examples:**
27

28
```bash
29
# Basic local invocation
30
sls invoke local --function hello
31

32
# Invoke with data and watch mode
33
sls invoke local --function api --data '{"key": "value"}' --watch
34

35
# Invoke with file input and polling
36
sls invoke local --function processor --path test-data.json --webpack-use-polling 1000
37

38
# Skip build for faster iterations
39
sls invoke local --function quick-test --skip-build
40
```
41

42
### Watch Mode Development
43

44
Real-time compilation and execution with file system watching for rapid development cycles.
45

46
```javascript { .api }
47
/**
48
 * Watch mode configuration and behavior
49
 */
50
interface WatchModeOptions {
51
  enabled: boolean;                   // Enable/disable watch mode
52
  usePolling: boolean;               // Use polling instead of filesystem events
53
  pollingInterval: number;           // Polling interval in milliseconds (default: 3000)
54
  ignored: string[];                 // Patterns to ignore during watch
55
  watchOptions: {                    // Webpack watch options
56
    aggregateTimeout: number;        // Delay before rebuilding (default: 300ms)
57
    poll: boolean | number;          // Polling configuration
58
    ignored: RegExp | string[];      // Files/directories to ignore
59
  };
60
}
61
```
62

63
**Usage Examples:**
64

65
```bash
66
# Standard watch mode
67
sls invoke local --function api --watch
68

69
# Watch with custom polling for Docker/VM environments
70
sls invoke local --function api --watch --webpack-use-polling 2000
71

72
# Watch specific function during development
73
sls invoke local --function userHandler --watch --data '{"userId": "123"}'
74
```
75

76
When watch mode is active:
77
- File changes trigger automatic recompilation
78
- Function is re-invoked with the same parameters
79
- Compilation errors are displayed in real-time
80
- Process continues until manually stopped
81

82
### Serverless Offline Integration
83

84
Seamless integration with serverless-offline plugin for local API Gateway simulation.
85

86
```bash { .api }
87
# Serverless offline commands with webpack
88
sls offline start                                    # Start offline server with webpack
89
sls offline start --webpack-no-watch               # Disable webpack watch mode
90
sls offline start --skip-build                     # Skip initial webpack build  
91
sls offline start --port <port>                    # Custom port for offline server
92
sls offline start --host <host>                    # Custom host binding
93

94
# Offline-specific webpack options
95
--webpack-no-watch                                  # Disable automatic webpack watch
96
--skip-build                                       # Skip webpack compilation entirely
97
```
98

99
**Usage Examples:**
100

101
```bash
102
# Start offline development server
103
sls offline start
104

105
# Start without webpack watch (manual rebuilds)
106
sls offline start --webpack-no-watch
107

108
# Quick start without initial build
109
sls offline start --skip-build
110

111
# Custom port with webpack watch
112
sls offline start --port 4000
113
```
114

115
Integration behavior:
116
- Automatic webpack compilation before starting offline server
117
- Watch mode enabled by default for live reloading
118
- Webpack errors prevent offline server startup
119
- Hot reloading of function code during development
120

121
### Run Command Integration
122

123
Enhanced serverless run command with webpack compilation and watch support.
124

125
```bash { .api }
126
# Run command with webpack integration
127
sls run                                             # Run function locally with webpack
128
sls run --watch                                     # Run with watch mode enabled
129
sls run --function <name>                          # Run specific function
130
sls run --data <json>                              # Pass data to function
131
sls run --path <file>                              # Load data from file
132

133
# Run-specific options
134
--watch                                            # Enable watch mode for run command
135
--stage <stage>                                    # Set deployment stage  
136
--region <region>                                  # Set AWS region
137
```
138

139
**Usage Examples:**
140

141
```bash
142
# Run function with webpack
143
sls run --function processData
144

145
# Run with watch mode for development
146
sls run --function api --watch
147

148
# Run with input data
149
sls run --function calculator --data '{"operation": "add", "numbers": [1, 2, 3]}'
150
```
151

152
Run command features:
153
- Individual function packaging disabled automatically
154
- Webpack compilation before execution
155
- Watch mode for continuous development
156
- Access to full Serverless context
157

158
### Step Functions Offline Integration
159

160
Support for serverless-step-functions-offline plugin with webpack compilation.
161

162
```bash { .api }
163
# Step Functions offline integration
164
sls step-functions-offline start                    # Start step functions offline with webpack
165

166
# Integration hooks
167
before:step-functions-offline:start                 # Webpack preparation hook
168
```
169

170
**Usage Examples:**
171

172
```bash
173
# Start step functions offline development
174
sls step-functions-offline start
175
```
176

177
The plugin automatically:
178
- Compiles functions before step functions offline startup
179
- Prepares webpack build context for step function execution
180
- Ensures all functions are available for step function workflows
181

182
### Development Environment Detection
183

184
Automatic detection of local development environment for conditional webpack configuration.
185

186
```javascript { .api }
187
/**
188
 * Development environment detection
189
 */
190
const slsw = require('serverless-webpack');
191

192
// Available in webpack configuration
193
slsw.lib.webpack.isLocal: boolean;  // True when running locally
194

195
/**
196
 * Local environment triggers:
197
 * - sls invoke local
198
 * - sls offline start  
199
 * - sls run
200
 * - sls step-functions-offline start
201
 */
202
```
203

204
**Usage Examples:**
205

206
```javascript
207
// webpack.config.js - Environment-specific configuration
208
const slsw = require('serverless-webpack');
209

210
module.exports = {
211
  entry: slsw.lib.entries,
212
  target: 'node',
213
  mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
214
  
215
  // Development optimizations
216
  devtool: slsw.lib.webpack.isLocal ? 'eval-source-map' : 'source-map',
217
  
218
  optimization: {
219
    minimize: !slsw.lib.webpack.isLocal
220
  },
221
  
222
  // Environment-specific externals
223
  externals: slsw.lib.webpack.isLocal ? [] : ['aws-sdk']
224
};
225
```
226

227
### Debugging and Inspection
228

229
Development tools for debugging webpack compilation and function execution.
230

231
```bash { .api }
232
# Debug webpack compilation
233
export SLS_DEBUG=*                                 # Enable debug output
234
sls invoke local --function <name>
235

236
# Inspect webpack output
237
sls webpack --out debug-build                      # Custom output directory
238
ls -la debug-build/                               # Inspect compiled files
239

240
# Preserve webpack output for inspection
241
custom:
242
  webpack:
243
    keepOutputDirectory: true                      # Keep .webpack directory
244
```
245

246
**Usage Examples:**
247

248
```bash
249
# Debug webpack compilation issues
250
export SLS_DEBUG=*
251
sls invoke local --function problematic-function
252

253
# Inspect webpack bundle contents
254
sls webpack compile --out inspection
255
find inspection -name "*.js" -exec head -20 {} \;
256

257
# Debug with preserved output
258
sls invoke local --function test --log
259
ls -la .webpack/service/
260
```
261

262
### Hot Reloading Support
263

264
Hot reloading capabilities for rapid development cycles.
265

266
```javascript { .api }
267
/**
268
 * Hot reloading configuration
269
 */
270
interface HotReloadOptions {
271
  watchMode: boolean;                 // Enable webpack watch mode
272
  liveReload: boolean;               // Enable live reloading
273
  hotModuleReplacement: boolean;     // Enable HMR (limited support)
274
  restartOnChange: boolean;          // Restart process on changes
275
}
276
```
277

278
**Usage Examples:**
279

280
```bash
281
# Hot reloading with invoke local
282
sls invoke local --function api --watch
283
# Changes to source files trigger automatic recompilation and re-invocation
284

285
# Hot reloading with offline
286
sls offline start
287
# Changes trigger recompilation and server restart
288
```
289

290
Hot reloading behavior:
291
- File changes detected by webpack watch
292
- Automatic recompilation on changes
293
- Function re-invocation or server restart
294
- Error display without process termination
295

296
### Development Workflow Optimization
297

298
Best practices and optimizations for development workflows.
299

300
```javascript { .api }
301
/**
302
 * Development workflow optimization techniques
303
 */
304
interface DevWorkflowOptions {
305
  skipBuild: boolean;                // Skip webpack build for faster iteration
306
  cacheEnabled: boolean;             // Enable webpack caching
307
  parallelBuilds: boolean;           // Enable parallel compilation
308
  sourceMapType: string;             // Source map type for debugging
309
}
310
```
311

312
**Usage Examples:**
313

314
```javascript
315
// webpack.config.js - Development optimizations
316
const slsw = require('serverless-webpack');
317

318
module.exports = {
319
  entry: slsw.lib.entries,
320
  target: 'node',
321
  
322
  // Faster development builds
323
  mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
324
  devtool: slsw.lib.webpack.isLocal ? 'eval-cheap-module-source-map' : 'source-map',
325
  
326
  // Webpack 5 caching for faster rebuilds
327
  cache: slsw.lib.webpack.isLocal ? {
328
    type: 'filesystem',
329
    buildDependencies: {
330
      config: [__filename]
331
    }
332
  } : false,
333
  
334
  optimization: {
335
    minimize: false,  // Disable minification in development
336
    removeAvailableModules: false,
337
    removeEmptyChunks: false,
338
    splitChunks: false
339
  }
340
};
341
```
342

343
```yaml
344
# serverless.yml - Development configuration
345
custom:
346
  webpack:
347
    concurrency: 1                    # Reduce memory usage during development
348
    keepOutputDirectory: true         # Preserve build output for inspection
349
```
350

351
### Testing Integration
352

353
Integration with testing frameworks and test execution workflows.
354

355
```bash { .api }
356
# Testing with webpack compilation
357
sls invoke local --function testHandler --path test/fixtures/input.json
358

359
# Test-specific build configurations
360
NODE_ENV=test sls webpack compile
361
```
362

363
**Usage Examples:**
364

365
```bash
366
# Run tests against compiled functions
367
sls webpack compile
368
npm test
369

370
# Test individual functions
371
sls invoke local --function userService --path test/user-test-data.json
372

373
# Integration testing with offline
374
sls offline start --stage test &
375
npm run integration-tests
376
```
377

378
### Error Handling and Recovery
379

380
Development-friendly error handling and recovery mechanisms.
381

382
```javascript { .api }
383
/**
384
 * Development error handling
385
 */
386
interface DevErrorHandling {
387
  continueOnError: boolean;          // Continue watch mode on compilation errors
388
  errorOverlay: boolean;            // Display error overlay
389
  logLevel: 'error' | 'warn' | 'info' | 'verbose'; // Logging verbosity
390
  stackTraceLimit: number;          // Stack trace depth
391
}
392
```
393

394
**Usage Examples:**
395

396
```bash
397
# Verbose error reporting
398
export SLS_DEBUG=*
399
sls invoke local --function problematic --log
400

401
# Continue development despite errors  
402
sls invoke local --function api --watch
403
# Watch continues even if compilation fails
404
```
405

406
Development error features:
407
- Detailed webpack compilation errors
408
- Stack traces with source map support
409
- Non-fatal error handling in watch mode
410
- Clear error messages with suggested fixes
411

412
### Performance Monitoring
413

414
Development performance monitoring and optimization tools.
415

416
```javascript { .api }
417
/**
418
 * Development performance monitoring
419
 */
420
interface DevPerformanceMetrics {
421
  compilationTime: number;           // Webpack compilation duration
422
  bundleSize: number;               // Output bundle size
423
  moduleCount: number;              // Number of processed modules
424
  rebuildTime: number;              // Incremental rebuild time
425
}
426
```
427

428
**Usage Examples:**
429

430
```bash
431
# Monitor compilation performance
432
time sls webpack compile
433

434
# Analyze bundle size
435
sls webpack compile --out analysis
436
ls -lah analysis/
437

438
# Monitor watch rebuild performance
439
sls invoke local --function api --watch
440
# Displays rebuild times in watch mode
441
```
442

443
Performance monitoring includes:
444
- Compilation time tracking
445
- Bundle size analysis
446
- Module resolution timing
447
- Memory usage monitoring
448
- Incremental build performance