Skip to content

Commit c9d0ae1

Browse files
inpercimainpercima
committed
build(): merge backend and frontend in the build process
1 parent 9e93ac4 commit c9d0ae1

File tree

8 files changed

+376
-79
lines changed

8 files changed

+376
-79
lines changed

‎Dockerfile‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
FROM node:22-alpine AS build-js
1+
FROM node:22-alpine AS build-build-frontend
22

33
# see https://github.com/nodejs/docker-node/blob/master/docs/BestPractices.md#non-root-user
44
ENV USER=node
@@ -12,7 +12,7 @@ COPY --chown=${USER} Gruntfile.js ./
1212
COPY --chown=${USER} src/main/resources/public/js ./src/main/resources/public/js
1313
RUN npm run --silent grunt-build
1414

15-
FROM gradle:7-jdk17-alpine AS build-java
15+
FROM gradle:7-jdk17-alpine AS build-backend
1616

1717
ENV USER=gradle
1818
USER ${USER}
@@ -22,7 +22,7 @@ WORKDIR /home/gradle/app
2222
COPY --chown=${USER} build.gradle .
2323
COPY --chown=${USER} src ./src
2424
RUN rm -f src/main/resources/public/js/*.js
25-
COPY --chown=${USER} --from=build-js /home/node/build/resources/main/public/js/app.min.js ./src/main/resources/public/js/
25+
COPY --chown=${USER} --from=build-build-frontend /home/node/build/resources/main/public/js/app.min.js ./src/main/resources/public/js/
2626

2727
RUN gradle --info assemble
2828

@@ -47,7 +47,7 @@ USER ${USER}
4747
WORKDIR /home/${USER}
4848

4949
COPY --chown=${USER} dewac_175m_600.crf.ser.gz .
50-
COPY --chown=${USER} --from=build-java /home/gradle/app/build/libs/*.jar ./app.jar
50+
COPY --chown=${USER} --from=build-backend /home/gradle/app/build/libs/*.jar ./app.jar
5151

5252
EXPOSE 8080
5353

‎README.md‎

Lines changed: 60 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,57 @@
11
# lvz-viz
22

3-
![GitHub license](https://img.shields.io/github/license/CodeforLeipzig/lvz-viz.svg)
3+
<div align="center">
44

5+
![GitHub license](https://img.shields.io/github/license/CodeforLeipzig/lvz-viz.svg)
56
[![Java CI with Gradle](https://github.com/CodeforLeipzig/lvz-viz/actions/workflows/java_ci.yml/badge.svg)](https://github.com/CodeforLeipzig/lvz-viz/actions/workflows/java_ci.yml)
67
[![Node CI](https://github.com/CodeforLeipzig/lvz-viz/actions/workflows/node_ci.yml/badge.svg)](https://github.com/CodeforLeipzig/lvz-viz/actions/workflows/node_ci.yml)
7-
88
[![Maintainability](https://qlty.sh/gh/CodeforLeipzig/projects/lvz-viz/maintainability.svg)](https://qlty.sh/gh/CodeforLeipzig/projects/lvz-viz)
99
[![Code Coverage](https://qlty.sh/gh/CodeforLeipzig/projects/lvz-viz/coverage.svg)](https://qlty.sh/gh/CodeforLeipzig/projects/lvz-viz)
1010

11+
</div>
12+
1113
## Intro
1214

1315
Visualization of [LVZ police ticker](https://www.lvz.de/Leipzig/Polizeiticker/Polizeiticker-Leipzig).
1416

1517
The official website is hosted at <https://lvz-viz.leipzig.codefor.de>
1618
by [OK Lab Leipzig](http://codefor.de/projekte/2014-07-01-le-lvz_polizeiticker_visualisierung.html).
1719

20+
## Prerequisites
21+
22+
### Java
23+
24+
* `jdk 17` or higher
25+
26+
We recommand the usage of [The Software Development Kit Manager](https://sdkman.io/).
27+
28+
### Node and pnpm
29+
30+
* `node 22.20.0` or higher
31+
32+
We recommand the usage of [Node Version Manager](https://github.com/nvm-sh/nvm).
33+
34+
* `pnpm 10.27.0` or higher
35+
36+
Check out the [installation instructions](https://pnpm.io/installation).
37+
38+
### Angular CLI
39+
40+
* `@angular/cli 21.0.4` or higher
41+
42+
Install @angular/cli by running:
43+
44+
```bash
45+
pnpm install -g @angular/cli@21
46+
```
47+
48+
### Docker (when running services within docker)
49+
50+
* `docker 28.0.2` or higher
51+
1852
## Usage
1953

20-
Build and run the app with [npm](https://www.npmjs.com), [Grunt](http://gruntjs.com/) and [Gradle](https://gradle.org).
54+
Build and run the app with [pnpm](https://pnpm.io) and [Gradle](https://gradle.org).
2155

2256
The crawling and indexing of new articles is activated by default.
2357
It can be delayed by setting the startup parameter `--app.initialDelay=<time in ms>` to a high value (e.g. `1800000` for 30 minutes)
@@ -28,27 +62,30 @@ or by setting an environment variable via `export SPRING_PROFILES_ACTIVE=<profil
2862

2963
Please use the `prod` profile for production systems with a dedicated data volume (see `docker-compose.prod.yml`).
3064

31-
### npm and Grunt
65+
### Read more
3266

33-
Use appropriate node and npm version via [nvm](https://github.com/nvm-sh/nvm#nvmrc).
67+
Check the documentation for each module.
3468

35-
```bash
36-
nvm use
37-
```
69+
For frontend check [lvz-viz - Frontend](./frontend/README.md).
70+
71+
For docker check [lvz-viz - Docker](./README_docker.md).
3872

39-
Download client js dependencies with npm and package them with Grunt.
73+
### Set node version
74+
75+
Use appropriate node and pnpm version via [nvm](https://github.com/nvm-sh/nvm#nvmrc).
4076

4177
```bash
42-
npm install --no-progress
43-
npm run grunt-build
78+
nvm use
4479
```
4580

46-
### Gradle
81+
### Starting development
82+
83+
#### Gradle
4784

4885
For local development and testing you need to startup elasticsearch via [docker-compose](https://docs.docker.com/compose/).
4986

5087
```bash
51-
docker-compose up -d elasticsearch
88+
docker compose up -d elasticsearch
5289
```
5390

5491
You can build and test an executable jar with gradle.
@@ -77,42 +114,25 @@ export SPRING_PROFILES_ACTIVE=local
77114
./gradlew bootRun
78115
```
79116

80-
### Docker
117+
### Running backend and frontend together
81118

82-
You can build and run the app within a Docker container.
119+
For development you can use two separate terminals for starting backend and frontend separately.
120+
For further information, please refer to the README files.
83121

84-
Required version for the multi-stage build: Docker 19.03+
122+
You could also use following command in root folder to start development in one single terminal:
123+
Run the following command to install:
85124

86125
```bash
87-
-- Build or rebuild services
88-
docker-compose build
89-
-- Create and start containers
90-
docker-compose up -d
91-
```
126+
# install dependencies
127+
pnpm install
92128

93-
```bash
94-
-- Build services and start containers with dev profile
95-
docker-compose -f docker-compose.yml -f docker-compose.dev.yml up -d --build
96-
```
97-
98-
```bash
99-
-- Build services and start containers with prod profile
100-
docker-compose -f docker-compose.yml -f docker-compose.prod.yml up -d --build
101-
```
102-
103-
```bash
104-
-- View output from containers
105-
docker-compose logs -f
106-
```
107-
108-
```bash
109-
-- Stop and remove containers, networks, images, and volumes
110-
docker-compose down
129+
# start both development server
130+
pnpm start
111131
```
112132

113133
## Maintenance
114134

115135
```bash
116-
-- Display dependency updates
136+
# display dependency updates
117137
./gradlew dependencyUpdates
118138
```

‎README_docker.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# lvz-viz - Docker
2+
3+
You can build and run the app within a Docker container.
4+
Required version for the multi-stage build: Docker 19.03+.
5+
6+
## Getting started
7+
8+
Create an environment file for `docker` and `docker compose` and check the [configuration](#configuration).
9+
10+
```bash
11+
cp default.env .env
12+
```
13+
14+
## Configuration
15+
16+
### Table of contents
17+
18+
* [IMAGE](#image)
19+
* [VERSION](#version)
20+
* [ES_VERSION](#es_version)
21+
22+
### `IMAGE`
23+
24+
Defines the base image to use for lvz-viz.
25+
26+
* default: `sepe81/lvz-viz`
27+
* type: `string`
28+
29+
### `VERSION`
30+
31+
Defines the version of the image to use for lvz-viz.
32+
33+
* default: `2.6.0`
34+
* type: `string`
35+
36+
### `ES_VERSION`
37+
38+
Defines the version of elasticsearch.
39+
40+
* default: `6.8.23`
41+
* type: `string`
42+
43+
## Usage
44+
45+
```bash
46+
# build or rebuild services
47+
docker compose build
48+
# create and start containers
49+
docker compose up -d
50+
```
51+
52+
```bash
53+
# build services and start containers with dev profile
54+
docker compose -f docker-compose.yml -f docker-compose.dev.yml up -d --build
55+
```
56+
57+
```bash
58+
# build services and start containers with prod profile
59+
docker compose -f docker-compose.yml -f docker-compose.prod.yml up -d --build
60+
```
61+
62+
```bash
63+
# view output from containers
64+
docker compose logs -f
65+
```
66+
67+
```bash
68+
# stop and remove containers, networks, images, and volumes
69+
docker compose down
70+
```

.env renamed to default.env

File renamed without changes.

‎frontend/README.md‎

Lines changed: 11 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,28 @@
1-
# LVZ Polizeiticker
1+
# lvz-viz - Frontend
22

3-
[![MIT license](https://img.shields.io/badge/license-MIT-blue.svg)](../LICENSE)
4-
5-
Visualization of LVZ police ticker.
6-
7-
## Prerequisites
8-
9-
### Angular CLI
10-
11-
* `@angular/cli 21.0.4` or higher
12-
13-
### Node, npm or pnpm
14-
15-
* `node 22.20.0` or higher in combination with
16-
* `npm 10.9.3` or higher or
17-
* `pnpm 10.26.1` or higher, used in this repository
3+
The UI of LVZ police ticker.
184

195
## Getting started
206

217
```bash
22-
# clone project
23-
git clone
24-
cd lvz-viz
8+
# all commands used in ./frontend
9+
cd frontend
2510

2611
# install tools and frontend dependencies
2712
pnpm install
2813
```
2914

30-
Create environment files for `development mode` and `production mode`.
15+
Create an environment file for `development mode`.
3116

3217
```bash
3318
cp src/environments/environment.ts src/environments/environment.dev.ts
34-
cp src/environments/environment.ts src/environments/environment.prod.ts
3519
```
3620

37-
**Note**: These files will not be under version control but listed in .gitignore.
21+
**Note**: This file will not be under version control but listed in .gitignore.
3822

3923
## Usage
4024

41-
### Recommendation
42-
43-
It is recommended to use a server to get full access of all angular.
44-
For the other options your app should run on a server which you like.
45-
46-
### Run in development mode
25+
### Use mock data (if working with mock data)
4726

4827
If you want to work with mock data, start the mock server in a separate terminal, reachable on [http://localhost:3000/](http://localhost:3000/).
4928

@@ -54,6 +33,8 @@ Update your `environment.dev.ts` file `api` to `http://localhost:3000/`.
5433
pnpm run mock
5534
```
5635

36+
### Run in development mode
37+
5738
```bash
5839
# build, reachable on http://localhost/app/path/to/dist/
5940
pnpm run build:dev
@@ -98,6 +79,7 @@ Change for `production mode` the option `production` to `true`.
9879

9980
Defines the URL to the backend.
10081
If you want to work with mock data, use [http://localhost:3000/](http://localhost:3000/).
82+
If you want to work with backend data, use [http://localhost:4200/api/](http://localhost:4200/api/).
10183

10284
* default: `./api/`
10385
* type: `string`
@@ -106,7 +88,7 @@ If you want to work with mock data, use [http://localhost:3000/](http://localhos
10688

10789
Application-wide title of the app, displayed in title and toolbar.
10890

109-
* default: `LVZ Polizeiticker`
91+
* default: `LVZ-Polizeiticker`
11092
* type: `string`
11193

11294
### `production`

‎frontend/package.json‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
{
2-
"author": "",
2+
"author": "Marcel Hendrich <[email protected]>",
33
"contributors": [
4-
{
5-
"name": "Marcel Hendrich",
6-
"email": "[email protected]"
7-
}
4+
"Marcel Hendrich <[email protected]>"
85
],
96
"dependencies": {
107
"@angular-slider/ngx-slider": "21.0.0",
@@ -58,5 +55,5 @@
5855
"mock": "json-server --watch db.json",
5956
"start": "ng serve -o --configuration=development"
6057
},
61-
"version": "2.1.0-SNAPSHOT"
58+
"version": "2.5.0"
6259
}

‎package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"author": "Marcel Hendrich <[email protected]>",
3+
"contributors": [
4+
"Marcel Hendrich <[email protected]>"
5+
],
6+
"description": "Development mode: concurrently load of backend and frontend",
7+
"devDependencies": {
8+
"concurrently": "9.2.1"
9+
},
10+
"engines": {
11+
"node": ">=22.20.0"
12+
},
13+
"homepage": "https://lvz-viz.leipzig.codefor.de",
14+
"license": "GPL",
15+
"name": "lvz-viz",
16+
"private": true,
17+
"repository": "https://github.com/CodeforLeipzig/lvz-viz",
18+
"scripts": {
19+
"start": "concurrently \"export SPRING_PROFILES_ACTIVE=local && ./gradlew bootRun\" \"cd frontend && pnpm start\""
20+
},
21+
"version": "2.5.0"
22+
}

0 commit comments

Comments
 (0)