Deploying on Heroku Java app with Angular2 fronend

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.

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