Skip to content

Commit

Permalink
Local network setup (#93)
Browse files Browse the repository at this point in the history
* externalize baseUrl via dotenv

to allow local network device access - esp. mobile

* some first mobile layout imporvements

* expand local network setup to include OAUTH2

* add Build and Git info to the log and acutator

* fix integration tests by spring profile use
  • Loading branch information
wisskirchenj authored Mar 26, 2024
1 parent b432432 commit e02eaeb
Show file tree
Hide file tree
Showing 25 changed files with 302 additions and 211 deletions.
2 changes: 2 additions & 0 deletions .idea/.gitignore

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions .idea/runConfigurations/FlashcardsApplication.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions .idea/runConfigurations/Flashcards_DEVMODE.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion .idea/runConfigurations/Flashcards_client.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions docker/arch/compose_amd.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ services:
- '8000:8000'
environment:
MONGO_HOST: flashcards-mongodb
SPRING_SECURITY_OAUTH2_AUTHORIZATIONSERVER_CLIENT_CLIENT_1_REGISTRATION_REDIRECT_URIS:
'http://${HOST_IP:-127.0.0.1}:8080/login/oauth2/code/spring'
LOGGING_LEVEL_ORG_SPRINGFRAMEWORK_SECURITY: INFO # switch to TRACE for debugging
depends_on:
- mongodb
networks:
Expand Down
3 changes: 3 additions & 0 deletions docker/arch/compose_arm.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ services:
- '8000:8000'
environment:
MONGO_HOST: flashcards-mongodb
SPRING_SECURITY_OAUTH2_AUTHORIZATIONSERVER_CLIENT_CLIENT_1_REGISTRATION_REDIRECT_URIS:
'http://${HOST_IP:-127.0.0.1}:8080/login/oauth2/code/spring'
LOGGING_LEVEL_ORG_SPRINGFRAMEWORK_SECURITY: INFO # switch to TRACE for debugging
depends_on:
- mongodb
networks:
Expand Down
1 change: 1 addition & 0 deletions frontend/.env
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
VITE_BASE_URL=http://${HOST_IP:-127.0.0.1}:8080/api
25 changes: 24 additions & 1 deletion frontend/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,34 @@
|         `shared` | Feature-shared pages, components, composables |
|         `App.vue` | Main Vue component |
|         `main.ts` | Entry point of the application |
|         `vite.config.js` | Vite configuration file |
|     `index.html` | HTML landing page for the application |
|     `package.json` | Contains npm dependencies and scripts |
|     `README.md` | This file, contains information about the project |
|     `tsconfig.json` | TypeScript configuration file |
|     `vite.config.ts` | Vite configuration file |

## Setting Vue Base URL to private IP
To allow access from other devices in your private network - esp. by your mobile, you need to set your private IP address
as the environment variable HOST_IP. An easy way to do this from inside IntelliJ IDEA is to set the environment variable
in the Run/Debug configuration. Go to Run -> Edit Configurations and specify `HOST_IP=your-private-ip-address` in the
Environment variables field for the Flashcards-Client and FlashcardApplication configurations. For the latter, it is
picked up by docker compose to define the redirect-uri for the OAuth2 login.
If no HOST_IP is set, the default value used is `127.0.0.1`, the loopback address to localhost as before.

To find out your private IP address, you can use the following command in the terminal (**MacOS**):
```shell
ipconfig getifaddr en0
```
For **Windows**, you can use the ipconfig command. This will display a list of all network interfaces and their IP addresses.
The IP address for the interface you're interested in (usually labeled "IPv4 Address") is your local IP address.

For **Linux**, you can use the `hostname -I` command to get your IP address.

**Note**, that your mobile must be connected to the same network as your computer running the Vue app (e.g. served by the same WLAN router).
Also the Oauth2 redirect does not work for the mobile, as the auth_server listens on localhost, which is not accessible from the mobile.
So mobile access is in this local setup limited to the DEV mode (where the auth_server is not used) - unless you run the auth_server on
a separate device in the same network.

## Project setup

```
Expand Down
Loading

0 comments on commit e02eaeb

Please sign in to comment.