Deploying on Heroku Java app with Angular2 fronend - java

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!

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

Related

Angular2: Install external library using npm through Maven

Am building an Angular2 SpringBoot application which I need to deploy directly to a container like tomcat like a war file. Am able to successfully do that by install npm pluging in maven like:
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.0</version>
<configuration>
<workingDirectory>${angular.project.location}</workingDirectory>
<installDirectory>${angular.project.nodeinstallation}</installDirectory>
</configuration>
<executions>
<!-- It will install nodejs and npm -->
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v9.2.0</nodeVersion>
<npmVersion>5.6.0</npmVersion>
</configuration>
</execution>
<!-- It will execute command "npm install" inside "/e2e-angular2" directory -->
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<!-- It will execute command "npm build" inside "/e2e-angular2" directory
to clean and create "/dist" directory -->
<execution>
<id>npm build</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
</plugin>
Now, am also using Ng2Charts library to build highcharts on UI. I can simply run npm install ng2charts and would be good to go but I want to install these during mvn clean install because I don't want to create an added npm dependency on production.
Is there a way I can install these libraries using maven?
I tried something line:
<execution>
<id>ng2charts</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
But it gives me error saying:
[ERROR] [0m[1m[31mERROR in src/app/app.module.ts(48,5): Error during template compile of 'AppModule'[39m[22m[0m
[ERROR] [0m[1m[31m Could not resolve ng2-charts relative to /Users/user/Documents/workspace/MyPortal/src/frontend/src/app/app.module.ts..[39m[22m[0m
[ERROR] [0m[1m[31msrc/app/chart/chart.component.ts(5,20): error TS2307: Cannot find module 'jquery'.[39m[22m[0m
[ERROR] [0m[1m[31msrc/app/app.module.ts(23,30): error TS2307: Cannot find module 'ng2-charts'.[39m[22m[0m
[ERROR] [0m[1m[31m[39m[22m[0m.............
Please guide.
After a lot of research, i figured out a way to include external dependencies in Angular. We just need to update package.json file:
"dependencies": {
"ng2-charts": "^1.1.0",
"jquery": "^3.3.1"
}
This loads the libraries.

javafx-maven-plugin Updates Wrong Folder

There are two different javafx applications using javafx-maven-plugin to generate native windows installer. In both applications the installers are generated and can be seen at target\jfx\native .
When the first app installer setup installation process is started, setup shows files are copied in C:\Users\Yunus\AppData\Local\CooperativeERP.
The problem is when the second application installation process is started it goes to the same folder and updates some files which makes first app installed unusable.
Plugin Maven XML is as follows:
<plugin>
<groupId>com.zenjava</groupId>
<artifactId>javafx-maven-plugin</artifactId>
<version>8.6.0</version>
<configuration>
<mainClass>re.iprocu.coperativeerp.MainApp</mainClass>
<bundleArguments>
<licenseFile>termsOfService.rtf</licenseFile>
</bundleArguments>
<additionalAppResources>src/main/additionalAppResources</additionalAppResources><!-- name does not matter, it's just some folder :D -->
<!-- DO SHOW DEBUG-OUTPUT -->
<verbose>true</verbose>
</configuration>
<executions>
<execution>
<!-- required before build-native -->
<id>create-jfxjar</id>
<phase>package</phase>
<goals>
<goal>build-jar</goal>
</goals>
</execution>
<execution>
<id>create-native</id>
<phase>package</phase>
<goals>
<goal>build-native</goal>
</goals>
</execution>
</executions>
</plugin>
What should i do to make the two setup install as different application and not to get to each others way.
Found out that zen java maven plugin uses a Main class package as unique identifier for application, and in this particular case both application had the same package name.
Changing package for one application solved my problem.

Maven zip artifact copy, unzip and rename

I have a maven module which is packaged as a zip with naming my-artifact-1.0-SNAPSHOT.zip using maven-shade-plugin.
Once the artifact has been installed into local maven repo, I need:
Copy zip to configured local folder.
Unzip archive.
Rename unzipped folder from my-artifact-1.0-SNAPSHOT to my-artifact.
This process should be cross-platform working on Windows, Linux, MacOS machines.
I read that it could be accomplished by using:
maven-dependency-plugin plus another plugin
maven-groovy-plugin
What would the best way to implement such a flow? Any examples are very appreciated.
No need for antrun in my opinion, the maven-dependency-plugin should do the trick:
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<executions>
<execution>
<id>unpack</id>
<phase>validate</phase>
<goals>
<goal>unpack</goal>
</goals>
<configuration>
<artifactItems>
<artifactItem>
<groupId>[your.group.id]</groupId>
<artifactId>my-artifact-1.0-SNAPSHOT</artifactId>
<version>[your.version]</version>
<type>zip</type>
<outputDirectory>${project.basedir}/my-artifact/</outputDirectory>
</artifactItem>
</artifactItems>
</configuration>
</execution>
</executions>
</plugin>
Regards,
Tom
You have a maven plugin that can execute Ant-Tasks. This tasks let you execute a lot of works. For example, to unzip a file:
<plugins>
<plugin>
<artifactId>maven-antrun-plugin</artifactId>
<version>1.8</version>
<executions>
<execution>
<phase>generate-resources</phase>
<configuration>
<tasks>
<unzip src="path/to/zip/file.zip" dest="path/to/unzip" />
</tasks>
</configuration>
<goals>
<goal>run</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
You can check all availables task in the apache ant page (see references).
Reference:
https://ant.apache.org/manual/Tasks

Heroku unable to access jetty-runner jar file

I'm deploying a Spring MVC app to Heroku using jetty-runner.jar, but I get an error in the deployment.
The Heroku logs only show:
Error: unable to access jarfile target/dependency/jetty-runner.jar
State changed from starting to crashed
Process exited with status 1
However, the app is working correctly if I run it locally using either:
heroku local web -f Procfile.windows
or
java -jar target\dependency\jetty-runner.jar target\*.war
The file under "target/dependency/jetty-runner.jar" is created correctly in my computer when running the "mvn package" command.
My Procfile looks like this:
web: java $JAVA_OPTS -jar target/dependency/jetty-runner.jar --port $PORT target/*.war
My pom.xml file and project code are located in:
https://github.com/gfigueroa/nlp-tools-spring-heroku
ADDITIONAL DETAILS
I ran the command heroku run ls target after deploying and it only shows the .war file. The dependency folder was not created when deploying, even though it was when I packaged my project locally.
Your maven-clean-plugin is deleting the jar file in dependency directory and other required directories when you try to build your app on Heroku.
You can either remove the maven-clean-plugin in the pom.xml or you can modify it.
Best option is to remove the plugin below in pom.xml
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<version>2.5</version>
<executions>
<execution>
<id>clean-jar-artifacts</id>
<phase>install</phase>
<goals><goal>clean</goal></goals>
<configuration>
<excludeDefaultDirectories>true</excludeDefaultDirectories>
<filesets>
<fileset>
<directory>target</directory>
<excludes>
<exclude>*.war</exclude>
</excludes>
</fileset>
</filesets>
</configuration>
</execution>
</executions>
</plugin>
Or you can exclude the dependency/*.jar from deleting by simply adding the <exclude>..</exclude> tags as specified below. But this option might delete other required folders which are necessary for deploying the app successfully. So I would not recommend this.
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<version>2.5</version>
<executions>
<execution>
<id>clean-jar-artifacts</id>
<phase>install</phase>
<goals>
<goal>clean</goal>
</goals>
<configuration>
<excludeDefaultDirectories>true</excludeDefaultDirectories>
<filesets>
<fileset>
<directory>target</directory>
<excludes>
<exclude>*.war</exclude>
<exclude>dependency/*.jar</exclude>
</excludes>
</fileset>
</filesets>
</configuration>
</execution>
</executions>
</plugin>
Look at this page for more information.
I had the similar problem , until I add into pom.xml file with latest jetty-runner (org.eclipse.jetty)
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<version>2.3</version>
<executions>
<execution>
<phase>package</phase>
<goals><goal>copy</goal></goals>
<configuration>
<artifactItems>
<artifactItem>
<groupId>org.eclipse.jetty</groupId>
<artifactId>jetty-runner</artifactId>
<version>9.4.4.v20170414</version>
<destFileName>jetty-runner.jar</destFileName>
</artifactItem>
</artifactItems>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
Procfile contains only:
web: java $JAVA_OPTS -jar target/dependency/jetty-runner.jar --port $PORT target/*.war

Install Android SDK during Maven build

I am trying to automate testing for my Android app using Maven and Robolectric. The problem that I have is that I won't be running the tests on my local machine and the Android SDK won't be installed on the machine running the tests. I have used the maven-dependency-plugin to grab the sdk from our repository and unpacked it in the process resources phase, the problem is that this occurs after the need to access the files. When I try to use the apk packaging it never gets to the SDK download because it can't find the SDK. So my question is this: Is it possible to trigger this download before anything else happens in the build? If anybody has any light to shed on how to properly install the sdk at build time it would be much appreciated. Let me know if I can add any additional information.
Both Robolectric and maven-android-plugin both need SDK. Android plug-in requires build tools/adb while Robolectric needs the corresponding android.jar.
So, you'll have to create maven tasks/goals for:
Download SDK zip from some url.
Unpack the zip on test machine, in a directory.
update the android.sdk.path property of POM, to point to sdk directory.
Some snippets I found, might help:
Download:
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>wagon-maven-plugin</artifactId>
<version>1.0-beta-3</version>
<executions>
<execution>
<id>download-android-sdk</id>
<phase>pre-integration-test</phase>
<goals>
<goal>download-single</goal>
</goals>
<configuration>
<url>http://dowloadsite.com/<url>
<fromFile>/downloads/sdk.zip</fromFile>
<toDir>${project.build.directory}/sdk</toDir>
</configuration>
</execution>
</executions>
</plugin>
Unpack:
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-antrun-plugin</artifactId>
<version>1.6</version>
<executions>
<execution>
<id>unpack-sdk</id>
<phase>pre-integration-test</phase>
<configuration>
<tasks>
<unzip src="${project.build.directory}/sdk/sdk.zip" dest="${project.build.directory}/sdk/" />
</tasks>
</configuration>
<goals>
<goal>run</goal>
</goals>
</execution>
</executions>
</plugin>

Categories

Resources