Can't deploy vaadin 14 App to Heroku

General
1

Hi,
i downloaded new Spring Boot starter App from vaadin homepage. Locally it’s running fine. Now i want to push this app to heroku cloud. To do this i followed this blogpost: https://vaadin.com/learn/tutorials/cloud-deployment/heroku#_configuring_the_project_for_github

Heroku has problems with the devDependencies and can’t build the application:

-----> Pruning devDependencies
       npm ERR! code ENOENT
       npm ERR! syscall access
       npm ERR! path node_modules/@vaadin/flow-deps
       npm ERR! errno -2
       npm ERR! enoent ENOENT: no such file or directory, access 'node_modules/@vaadin/flow-deps'
       npm ERR! enoent This is related to npm not being able to find a file.
       npm ERR! enoent 
       
       npm ERR! A complete log of this run can be found in:
       npm ERR!     /tmp/npmcache.eO8Ea/_logs/2020-05-11T18_12_13_485Z-debug.log
-----> Build failed

Package.json looks like this:

{
  "name": "no-name",
  "license": "UNLICENSED",
  "dependencies": {
    "@polymer/polymer": "3.2.0",
    "@webcomponents/webcomponentsjs": "^2.2.10",
    "@vaadin/flow-deps": "./target/frontend"
  },
  "devDependencies": {
    "webpack": "4.42.0",
    "webpack-cli": "3.3.10",
    "webpack-dev-server": "3.9.0",
    "webpack-babel-multi-target-plugin": "2.3.3",
    "copy-webpack-plugin": "5.1.0",
    "webpack-merge": "4.2.2",
    "raw-loader": "3.0.0",
    "compression-webpack-plugin": "3.0.1",
    "terser": "4.6.7"
  },
  "vaadinAppPackageHash": "b388d24267e75a27f78c1bb4c0dfcf6ccd37886abcd20c3b663b839c8362ad50"
}

This: “@vaadin/flow-deps”: “./target/frontend” seems to be the problem, because target folder isn’t pushed to git and therefore heroku doesn’t know the path.
Someone solved this or got an idea?

regards

2

Hi,

what is the content of your heroku-settings.xl and Procfile?

BR,

Anastasia

3

Vaadin 14.1 generates stuff into target/frontend when mvn vaadin:prepare-frontend is called. So the files should be generated properly on Heroku, when the build is run.

Sometimes the files just aren’t generated, or things are just missing randomly. In such case try doing the Vaadin Cleanup: delete node_modules, webpack*.js and package*.json files, build for production, then commit generated webpack.config.js and package*.js.

The thing with Heroku is that you need to keep in mind to build for production mode, i.e. to activate the production profile. With Heroku build you can only achieve that by custom Maven settings.xml file. Please see https://stackoverflow.com/questions/61730385/cannot-deploy-vaadin-java-spring-app-to-heroku/61730935#61730935 for more tips and details.

You can also try Vaadin 14.2 (currently 14.2.0.beta1) which is able to download node+npm automatically, and no longer uses the target/frontend folder.

4

Hi,

thank you for fast response. Here is further configuration:

Heroku-Settings:

<?xml version="1.0" encoding="UTF-8"?>
<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">

    <!-- activate by setting the MAVEN_SETTINGS_PATH config var to heroku-settings.xml in Heroku project settings tab.
    See https://devcenter.heroku.com/articles/using-a-custom-maven-settings-xml for more details.
     -->

    <activeProfiles>
        <activeProfile>production</activeProfile>
        <activeProfile>npm</activeProfile>
    </activeProfiles>
</settings>

Procfile:
web: java -jar target/networker-1.0-SNAPSHOT.jar $PORT

You can finde the files here, if it is easier to check config: https://github.com/sebi5000/networker

5

It’s solved - thank you! I have to delete the nodjs buildpack on heroku. Installed it a time ago and this seems to bring up trouble. Delete it and it works!