How does maven (running under dev profile) include the javascript files inside index.html?

问题

I haven't used jhipster since version 2.0 and I'm currently playing catch-up with version #4.0.6. When I try to build the initial app through "./mvnw" (with default dev maven profile) from the command line, the application javascript files are not added to the index.html (so that page comes up blank in my browser when I try http://localhost:8080). Could someone please explain me the normal chain of events which normally lead maven (running with the dev profile) to include the application javascript files into index.html ? Thank you very much in advance for your help. Best Regards kbjp

回答1:

Our workflow is as below, yarn or npm will be used based on choice

When you generate an app the files are generated and at the end it triggers yarn install task
The postInstall script in package.json is triggered after yarn install, this step calls webpack:build task
Now you should have all files generated and compiled into the www folder inside target or build folder based on build tool selected
Now running mvnw or gradlew will launch the backend and should be available at localhost:8080 this should also serve the frontend compiled from above steps
Now if you start making changes nothing will be reflected as its not compiled so you need to either run webpack:build:dev manually after changes or have yarn start running with live reload

Either you didn't let the postInstall script run or you deleted the target folder

You can also force maven to run webpack task while starting by passing the webpack profile like mvnw -Pdev,webpack

回答2:

I just ran into this issue, though I am using gradle. Deepu's answer resolved everything for me too. To force gradle to run the webpackBuildDev task (which builds the missing www directory) after a clean, I've added this:

processResources {
  doLast {
    if (!new File("$buildDir/www").exists()) webpackBuildDev.exec()
  }
}

Presumably this achieves the same thing as the frontend-maven-plugin.

回答3:

The single command to build the web assets (images, html, typescript, etc.) is

yarn webpack:build

This command will put the web assets where they need to be, i.e. build/www

回答4:

Deppu's answer covers the main conceptual aspect well. I'd like to add my two cents based on running into similar problem specifically with Maven. We know the default preferred JHipster style is to use two terminals, one with ./mvnw and one terminal with yarn start.

However, with our project we sometimes are just focussed on some backend work and run ./mvnw in single terminal and expect the front-end to always be there for use. Though for whatever reasons (eclipse or maven clean steps etc.) the front-end built artefacts may not be present in /target/www always.

So to ensure when we run ./mvnw in single terminal and always have the front-end built, I updated the maven dev profile as follows. Basically added the front-end build plugin invoking yarn install (this transitively runs yarn run webpack:build step as part of script already without running dev server) and test . This worked for me.

<profile>
    <id>dev</id>
    <activation>
        <activeByDefault>true</activeByDefault>
    </activation>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-undertow</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <configuration>
                    <warSourceDirectory>src/main/webapp/</warSourceDirectory>
                </configuration>
            </plugin>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>${frontend-maven-plugin.version}</version>
                <executions>
                    <execution>
                        <id>install node and yarn</id>
                        <goals>
                            <goal>install-node-and-yarn</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>${node.version}</nodeVersion>
                            <yarnVersion>${yarn.version}</yarnVersion>
                        </configuration>
                    </execution>
                    <execution>
                        <id>yarn install</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>webpack build test</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <phase>test</phase>
                        <configuration>
                            <arguments>run webpack:test</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
    <properties>
        <!-- log configuration -->
        <logback.loglevel>DEBUG</logback.loglevel>
        <!-- default Spring profiles -->
        <spring.profiles.active>dev${profile.no-liquibase}</spring.profiles.active>
    </properties>
</profile>

来源：https://stackoverflow.com/questions/42432902/how-does-maven-running-under-dev-profile-include-the-javascript-files-inside-i

标签

jhipster