使用Angular2 fronend在Heroku Java应用程序上进行部署

Question

i was faced with a problem, during deploying Java based app with Angular 2 fronend.

My app needs to be installed with NodeJs and it's "npm install" to fetch all it's dependencies from package.json. And only than with maven. Angular2 app is located in java webapp folder. I saw buildpacks to install it. But they dont work. For example this one

https://github.com/Vincit/heroku-buildpack-java-nodejs

It searches for *.ts files in the root, but not in the "webapp" java folder. Is there some smart buildpacks for task like that, or others convinient ways to do it simply?

Thank you in advance!

Answer 1

You can do this with Heroku's support for multiple buildpacks on an app . In short, run:

$ heroku buildpacks:clear
$ heroku buildpacks:add heroku/nodejs
$ heroku buildpacks:add heroku/java

In your case, the situation is probably very similar to this JHipster example , which uses Node.js and angular. There are a few things to consider:

• The Heroku Node.js buildpack will not install devDependencies by default . You either need to move them to dependencies or set the config var NPM_CONFIG_PRODUCTION=false .
• If you don't need your node_modules directory or Node.js runtime at runtime, it will make your app huge. You can use Maven to remove them.

Here's an example:

<plugin>
  <artifactId>maven-clean-plugin</artifactId>
  <version>2.5</version>
  <executions>
    <execution>
      <id>clean-build-artifacts</id>
      <phase>install</phase>
      <goals><goal>clean</goal></goals>
      <configuration>
        <excludeDefaultDirectories>true</excludeDefaultDirectories>
        <filesets>
          <fileset>
            <directory>node_modules</directory>
          </fileset>
          <fileset>
            <directory>.heroku/node</directory>
          </fileset>
        </filesets>
      </configuration>
    </execution>
  </executions>
</plugin>

This is described in more detail in the JHipster post .

Answer 2

I use this plugin:

https://github.com/eirslett/frontend-maven-plugin

<plugin>
   <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.0</version>
    <executions>
      <execution>
       <id>install node and npm</id>
       <goals>
        <goal>install-node-and-npm</goal>
       </goals>
       <configuration>
        <nodeVersion>v4.4.3</nodeVersion>
        <npmVersion>3.8.3</npmVersion>                                    
       </configuration>
     </execution>
     <execution>
      <id>npm install</id>
       <goals>
        <goal>npm</goal>
       </goals>
      <configuration>
        <arguments>--strict-ssl=false install</arguments>
      </configuration>
      </execution>                            
      <execution>
      <id>npm build prod</id>
      <goals>
       <goal>npm</goal>
      </goals>
     <configuration>
    <arguments>run build.prod</arguments>
    </configuration>
    </execution>
   </executions>
  </plugin>

npm build.prod is my gulp task to build for prod deployment and is specified as a script in my package.json (I'm using the angular 2 seed): https://github.com/mgechev/angular-seed

I had to create a task to copy to a place for my java app to use the files statically:

import * as gulp from 'gulp';
let gnf = require('gulp-npm-files');
let resourceDest = 'src/main/resources/public';

export = () => {

        gulp.src('**', {cwd:'./dist/prod'}).pipe(gulp.dest(resourceDest));
        gulp.src(gnf(), {base:'./'}).pipe(gulp.dest(resourceDest));


};

This copies my compiled angular 2 javascript into src/main/resources/public