0
# Frontend Cleanup
1

2
The `clean-frontend` and `dance` goals reset the frontend development environment by removing generated files and dependencies.
3

4
## Goal Configuration
5

6
```xml { .api }
7
<goal>clean-frontend</goal>
8
<!-- Alternative Easter egg goal -->
9
<goal>dance</goal>
10
<!-- Default phase: pre-clean -->
11
```
12

13
Both goals perform identical cleanup operations. The `dance` goal is a playful alias for `clean-frontend`.
14

15
## Purpose
16

17
These goals clean the frontend environment by removing:
18
- `node_modules` directory
19
- `pnpm-lock.yaml` file
20
- `package-lock.json` file
21
- Vaadin dependencies from `package.json`
22
- Generated frontend folders
23
- Build artifacts and temporary files
24

25
## Usage Examples
26

27
### Basic Cleanup
28

29
```xml
30
<plugin>
31
  <groupId>com.vaadin</groupId>
32
  <artifactId>vaadin-maven-plugin</artifactId>
33
  <version>24.9.0</version>
34
  <executions>
35
    <execution>
36
      <goals>
37
        <goal>clean-frontend</goal>
38
      </goals>
39
    </execution>
40
  </executions>
41
</plugin>
42
```
43

44
### Integration with Maven Clean Lifecycle
45

46
```xml
47
<plugin>
48
  <groupId>com.vaadin</groupId>
49
  <artifactId>vaadin-maven-plugin</artifactId>
50
  <version>24.9.0</version>
51
  <executions>
52
    <execution>
53
      <phase>pre-clean</phase>
54
      <goals>
55
        <goal>clean-frontend</goal>
56
      </goals>
57
    </execution>
58
  </executions>
59
</plugin>
60
```
61

62
### Using the Easter Egg Goal
63

64
```xml
65
<execution>
66
  <goals>
67
    <goal>dance</goal>  <!-- Same as clean-frontend but more fun! -->
68
  </goals>
69
</execution>
70
```
71

72
## Cleanup Operations
73

74
### Files and Directories Removed
75

76
```
77
project-root/
78
├── node_modules/           (entire directory)
79
├── pnpm-lock.yaml         (if using pnpm)
80
├── package-lock.json      (if using npm)
81
├── yarn.lock              (if using yarn)
82
└── src/main/frontend/
83
    └── generated/         (generated files)
84
```
85

86
### Package.json Cleanup
87

88
The goal removes Vaadin-specific dependencies from `package.json`:
89
- Dependencies added by `@NpmPackage` annotations
90
- Generated script entries
91
- Build tool configurations
92
- Vaadin-specific metadata
93

94
Original user-defined dependencies remain intact.
95

96
## Command Line Execution
97

98
```bash
99
# Standard cleanup
100
mvn flow:clean-frontend
101

102
# Easter egg cleanup (same functionality)
103
mvn flow:dance
104

105
# Full clean with Maven lifecycle
106
mvn clean  # (if plugin configured in pre-clean phase)
107

108
# Force cleanup even with errors
109
mvn flow:clean-frontend -Dvaadin.ignoreErrors=true
110
```
111

112
## When to Use Cleanup Goals
113

114
### Development Issues
115

116
Use cleanup when experiencing:
117
- Dependency resolution conflicts
118
- Outdated or corrupted `node_modules`
119
- Build tool version mismatches
120
- Stale generated files causing errors
121

122
### Workflow Scenarios
123

124
```bash
125
# Reset after major dependency changes
126
mvn flow:clean-frontend
127
mvn flow:prepare-frontend
128

129
# Clean CI/CD pipeline
130
mvn flow:clean-frontend
131
mvn flow:build-frontend -Dvaadin.ciBuild=true
132

133
# Switch package managers
134
mvn flow:clean-frontend
135
# Configure plugin for different package manager (pnpm/npm)
136
mvn flow:prepare-frontend
137
```
138

139
## Integration with Other Goals
140

141
### Clean -> Prepare -> Build Workflow
142

143
```xml
144
<plugin>
145
  <groupId>com.vaadin</groupId>
146
  <artifactId>vaadin-maven-plugin</artifactId>
147
  <version>24.9.0</version>
148
  <executions>
149
    <execution>
150
      <id>clean-frontend</id>
151
      <phase>pre-clean</phase>
152
      <goals>
153
        <goal>clean-frontend</goal>
154
      </goals>
155
    </execution>
156
    <execution>
157
      <id>prepare-frontend</id>
158
      <phase>process-resources</phase>
159
      <goals>
160
        <goal>prepare-frontend</goal>
161
      </goals>
162
    </execution>
163
    <execution>
164
      <id>build-frontend</id>
165
      <phase>process-classes</phase>
166
      <goals>
167
        <goal>build-frontend</goal>
168
      </goals>
169
    </execution>
170
  </executions>
171
</plugin>
172
```
173

174
### Conditional Cleanup
175

176
Use Maven profiles for conditional cleanup:
177

178
```xml
179
<profiles>
180
  <profile>
181
    <id>clean-frontend</id>
182
    <activation>
183
      <property>
184
        <name>clean.frontend</name>
185
      </property>
186
    </activation>
187
    <build>
188
      <plugins>
189
        <plugin>
190
          <groupId>com.vaadin</groupId>
191
          <artifactId>vaadin-maven-plugin</artifactId>
192
          <version>24.9.0</version>
193
          <executions>
194
            <execution>
195
              <goals>
196
                <goal>clean-frontend</goal>
197
              </goals>
198
            </execution>
199
          </executions>
200
        </plugin>
201
      </plugins>
202
    </build>
203
  </profile>
204
</profiles>
205
```
206

207
Activate with:
208
```bash
209
mvn compile -Pclean-frontend
210
# or
211
mvn compile -Dclean.frontend=true
212
```
213

214
## Troubleshooting
215

216
### Permission Issues
217

218
```
219
Error: Cannot delete files in node_modules
220
Solution: Ensure proper file permissions, run as administrator if needed on Windows
221
```
222

223
### Locked Files
224

225
```
226
Error: Cannot delete locked files
227
Solution: Stop development server, close IDE, ensure no processes are using node_modules
228
```
229

230
### Partial Cleanup
231

232
```
233
Warning: Some files could not be removed
234
Solution: Manually remove problematic files/directories, check for file system issues
235
```
236

237
## Advanced Cleanup Scenarios
238

239
### Corporate Development
240

241
In corporate environments with restricted file systems:
242

243
```xml
244
<configuration>
245
  <!-- Clean to temporary directory first -->
246
  <tempCleanupDirectory>${java.io.tmpdir}/vaadin-cleanup</tempCleanupDirectory>
247
</configuration>
248
```
249

250
### Multi-Module Projects
251

252
For Maven multi-module projects:
253

254
```bash
255
# Clean all modules
256
mvn flow:clean-frontend -pl .,module1,module2
257

258
# Clean only specific modules
259
mvn flow:clean-frontend -pl frontend-module
260
```
261

262
### Automated Cleanup in CI/CD
263

264
```bash
265
#!/bin/bash
266
# CI cleanup script
267
mvn flow:clean-frontend || true  # Continue on errors
268
rm -rf node_modules pnpm-lock.yaml package-lock.json  # Force cleanup
269
mvn flow:prepare-frontend
270
mvn flow:build-frontend -Dvaadin.ciBuild=true
271
```
272

273
## The "Dance" Goal Easter Egg
274

275
The `dance` goal is identical to `clean-frontend` but adds a playful element to the build process. It was added as an Easter egg for developers who prefer more colorful build commands:
276

277
```bash
278
mvn flow:dance  # ✨ Same as clean-frontend but with more style! ✨
279
```
280

281
This is a hidden feature mentioned in the source code comments as "This is the hidden `vaadin:dance` to clean up the frontend files."