Spring boot + angular 2 Heroku deployment

Question

I have a big issue. I'm trying to deploy Spring Boot + Angular 2 web app on heroku but don't know how to do it. I tried several things including:

Making a .war file and deploying it to heroku (source here)
Deploying project as standard java application (source here)

but none of these worked. The first attempt didn't work because I constatly got 404 not found, and the second one didn't work due to, I think, some jar file wasn't found in the location which was described in the Procfile. Can anyone give me a link, an example, or write a step by step instruction how to achieve this. Thank you.

score 5 · Accepted Answer · answered Jun 29 '17 at 18:08

5

The most simple way to do it:

run ng build in angular 2 project root (if you are using angular-cli) and copy the content of dist folder to src/main/resources/static/.
create Procfile (for maven):

web: java $JAVA_OPTS -Dserver.port=$PORT -jar target/*.jar
commit and push changes.

Also, you need spring-boot-starter-web present in dependencies. Which has embedded tomcat and automatically configured to serve static content from the static folder.

answered Jun 29 '17 at 18:08

Ihor Rybak

3,091
2
25
32

The problem here is that my dist folder doesn't get generated. – kantagara Jun 29 '17 at 19:44
@kantagara, If you generated an angular project with [angular-cli](https://cli.angular.io/) everything should work. Run: ng new project_new --ng4 – Ihor Rybak Jun 29 '17 at 19:55
@kantagara also you may find [this](https://youtu.be/k8r76d8QzXs?t=39m41s) useful. – Ihor Rybak Jun 29 '17 at 20:19
Thank you so much for your solution. I couldn't find the exact cause why my dist folder didn't get generated, so I created brand new angular project, installed all the required dependencies and transfered all of my source files to that project. After that i run ng build and it generated the dist folder. The next problem I had was not getting any 404 not found error from spring, but I handled that with the solution described here https://stackoverflow.com/questions/38516667/springboot-angular2-how-to-handle-html5-urls . – kantagara Jun 30 '17 at 17:43

score 3 · Answer 2 · answered Jun 29 '17 at 20:49

If you deploy your app as a standard Java application, you can combine it with the Node.js buildpack to run ng build during the Heroku build.

$ heroku buildpacks:add heroku/nodejs
$ heroku buildpacks:add heroku/java
$ git push heroku master

The Node.js buildpack will detect your package.json, install Node.js and run npm. Then the Java build can proceed as normal.

There is a guide for doing something very similar but with Grunt: Using Grunt with Java and Maven to Automate JavaScript Tasks

score 1 · Answer 3 · answered Jun 29 '17 at 18:59

1

Use JHipster: https://jhipster.github.io

Once installed, run:

$ yo jhipster

Then run

$ yo jhipster:heroku

answered Jun 29 '17 at 18:59

codefinger

10,088
7
39
51

Thanks. But honestly this looks like way too much work for an exisiting project to get deployed. Or am I wrong? – kantagara Jun 29 '17 at 19:45

Spring boot + angular 2 Heroku deployment

3 Answers3