Skip to content

Commit 9c898d9

Browse files
jonashacktjonashackt
committed
#11: Dynamic setting of frontend port for accessing the backend now completely with features of frontend-maven-plugin and Maven
1 parent 4944330 commit 9c898d9

File tree

6 files changed

+78
-9
lines changed

6 files changed

+78
-9
lines changed

‎README.md

+52-3
Original file line numberDiff line numberDiff line change
@@ -423,7 +423,7 @@ Frontend needs to know the Port of our Spring Boot backend API, which is [automa
423423

424424
> You can [try out your Heroku app locally](https://devcenter.heroku.com/articles/heroku-local)! Just create a .env-File with all your Environment variables and run `heroku local`!
425425
426-
To access the Heroku set port, we need to configure the used port inside our Vue.js application dynamically instead of hard-coded. This can be easily achieved with the help of enviroment variables, which can be added to the [dev.env.js](https://github.com/jonashackt/spring-boot-vuejs/blob/master/frontend/config/dev.env.js) and [prod.env.js](https://github.com/jonashackt/spring-boot-vuejs/blob/master/frontend/config/prod.env.js) files. Let´s do this with the variable `API_PORT`:
426+
To access the Heroku set port, we need to configure the used port inside our Vue.js application dynamically instead of hard-coded. This can be easily achieved with the help of enviroment variables, which can be added to the [dev.env.js](https://github.com/jonashackt/spring-boot-vuejs/blob/master/frontend/config/dev.env.js), [test.env.js](https://github.com/jonashackt/spring-boot-vuejs/blob/master/frontend/config/test.env.js) and [prod.env.js](https://github.com/jonashackt/spring-boot-vuejs/blob/master/frontend/config/prod.env.js) files. Let´s do this with the variable `API_PORT`:
427427

428428
```
429429
module.exports = {
@@ -445,12 +445,61 @@ If you want, have a look at [Service.vue](https://github.com/jonashackt/spring-b
445445

446446
#### Using dynamic Heroku port in Vue.js frontend
447447

448-
Now as we need to dynamically configure the Port Heroku will set, we need to access this in the webpack build, which is our only chance to get to know the concrete port Heroku is using for our application. As []this great post states](https://codeburst.io/accessing-heroku-config-variables-in-your-vue-webpack-app-145afb32dd67) we need to configure our [package.json](https://github.com/jonashackt/spring-boot-vuejs/blob/master/frontend/package.json) to do a post install step with `"postinstall": "npm run build"` and let webpack override the enviroment variables in our configuration files like dev.env.js:
448+
Now as we need to dynamically configure the Port Heroku will set, we need to access this in the webpack build, which is our only chance to get to know the concrete port Heroku is using for our application. As we use the [frontend-maven-plugin](https://github.com/eirslett/frontend-maven-plugin), we need to somehow pass the Heroku Port through this plugin to webpack, since we don´t run webpack or npm commands manually ourselfs somewhere.
449+
450+
The possibilty to [configure Environment variables in the frontend-maven-plugin](https://github.com/eirslett/frontend-maven-plugin/wiki#environment-variables) does the trick: In the `Build and minify static files` section, where `npm run build` is executed, we add the following configuration to the plugin:
451+
452+
```
453+
<environmentVariables>
454+
<SERVER_PORT>${server.port}</SERVER_PORT>
455+
</environmentVariables>
456+
```
457+
458+
The variable `server.port` inherits the magic then.
459+
460+
Because we locally don´t want to have extra hassles with setting and unsetting Environment variables for ports and want simply use port `8088` for accessing our backend, we need to be able to set a default value. This is done through the following property:
461+
462+
```
463+
<properties>
464+
...
465+
<!-- default port, that will be replaced in the static Vue.js files for accessing the Spring Boot backend -->
466+
<server.port>8088</server.port>
467+
</properties>
468+
```
469+
470+
Now, if the environment variable `PORT=7000` is defined for example (you can try this locally e.g. on a Mac with `export PORT=7000`), the variable `server.port` should instead change to 7000. Because we sadly don´t have the Spring Boot like `${VARIABLE:-default}` notation in Maven, we need to use the [<activation> feature of Maven profiles](https://stackoverflow.com/a/40756182/4964553). With this, we are able to check, if a Environment variable is set:
449471

450472
```
451-
API_PORT: JSON.stringify(process.env.PORT)
473+
<profiles>
474+
<profile>
475+
<id>HerokuPort</id>
476+
<activation>
477+
<property>
478+
<name>env.PORT</name>
479+
</property>
480+
</activation>
481+
<properties>
482+
<!-- Override the default SERVER_PORT, e.g. if PORT environment variable is set
483+
- which is mostly the case on Heroku etc. -->
484+
<server.port>${env.PORT}</server.port>
485+
</properties>
486+
</profile>
487+
</profiles>
452488
```
453489

490+
And as we can access environment variables in Maven through `${env.VARIABLE_NAME}` (see https://stackoverflow.com/a/10463133/4964553), we just use `${env.PORT}` in case the Maven profile activation feature found the `PORT` environment variable.
491+
492+
Now we´re able to use our newly set Environment Variable SERVER_PORT inside our `dev.env.js`, `test.env.js` and `prod.env.js`:
493+
494+
```
495+
API_PORT: JSON.stringify(process.env.SERVER_PORT)
496+
```
497+
498+
Now our App is finally able to use the dynamically set port! You may have a look onto the Developer Console when accessing the [Service.vue](https://github.com/jonashackt/spring-boot-vuejs/blob/master/frontend/src/components/Service.vue) and see the output of the port:
499+
500+
501+
502+
454503

455504
# Links
456505

‎frontend/config/dev.env.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@ var prodEnv = require('./prod.env')
33

44
module.exports = merge(prodEnv, {
55
NODE_ENV: '"development"',
6-
API_PORT: JSON.stringify(process.env.PORT)
6+
API_PORT: JSON.stringify(process.env.SERVER_PORT)
77
})

‎frontend/config/prod.env.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
module.exports = {
22
NODE_ENV: '"production"',
3-
API_PORT: JSON.stringify(process.env.PORT)
3+
API_PORT: JSON.stringify(process.env.SERVER_PORT)
44
}

‎frontend/config/test.env.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@ var devEnv = require('./dev.env')
33

44
module.exports = merge(devEnv, {
55
NODE_ENV: '"testing"',
6-
API_PORT: JSON.stringify(process.env.PORT)
6+
API_PORT: JSON.stringify(process.env.SERVER_PORT)
77
})

‎frontend/package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@
1111
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
1212
"e2e": "node test/e2e/runner.js",
1313
"test": "npm run unit && npm run e2e",
14-
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
15-
"postinstall": "npm run build"
14+
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
1615
},
1716
"dependencies": {
1817
"axios": "^0.16.2",

‎frontend/pom.xml

+22-1
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,26 @@
1313
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
1414
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
1515
<java.version>1.8</java.version>
16+
<!-- default port, that will be replaced in the static Vue.js files for accessing the Spring Boot backend -->
17+
<server.port>8088</server.port>
1618
</properties>
1719

20+
<profiles>
21+
<profile>
22+
<id>HerokuPort</id>
23+
<activation>
24+
<property>
25+
<name>env.PORT</name>
26+
</property>
27+
</activation>
28+
<properties>
29+
<!-- Override the default SERVER_PORT, e.g. if PORT environment variable is set
30+
- which is mostly the case on Heroku etc. -->
31+
<server.port>${env.PORT}</server.port>
32+
</properties>
33+
</profile>
34+
</profiles>
35+
1836
<build>
1937
<plugins>
2038
<plugin>
@@ -77,7 +95,10 @@
7795
</goals>
7896
<configuration>
7997
<arguments>run build</arguments>
80-
</configuration>
98+
<environmentVariables>
99+
<SERVER_PORT>${server.port}</SERVER_PORT>
100+
</environmentVariables>
101+
</configuration>
81102
</execution>
82103
</executions>
83104
</plugin>

0 commit comments

Comments
 (0)