Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prodyna/marcel_knowhow_frontend
https://github.com/prodyna/marcel_knowhow_frontend
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/prodyna/marcel_knowhow_frontend
- Owner: PRODYNA
- Created: 2023-07-27T14:53:15.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-06T00:22:16.000Z (about 1 year ago)
- Last Synced: 2024-11-30T21:45:25.840Z (about 1 month ago)
- Language: TypeScript
- Size: 16.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
```
__ __ _ _____ _ _
| \/ | __ _ _ __ ___ ___| | | ___| __ ___ _ __ | |_ ___ _ __ __| |
| |\/| |/ _` | '__/ __/ _ \ | | |_ | '__/ _ \| '_ \| __/ _ \ '_ \ / _` |
| | | | (_| | | | (_| __/ | | _|| | | (_) | | | | || __/ | | | (_| |
|_| |_|\__,_|_| \___\___|_| |_| |_| \___/|_| |_|\__\___|_| |_|\__,_|
```
Marcel Knowhow Frontend Project
===============================
This project holds the frontend for the Marcel Knowhow session.
It is a responsive React Frontend with Material UI and can be exectuted with Vite.
The frontend is responsive for mobile devices and desktops.
# Dependency to Main Project
This project depends indirectly on the main project
[Marcel Knowhow Main](https://github.com/PRODYNA/marcel_knowhow_main).
The main project holds a script to create and distribute AI generated images to this frontend
project (into the folder `./assets/images/ai_generated`).
# Local Development Setup
## Dependencies
- If you have not pnpm installed, please do so with `npm install -g pnpm`.
- Install all project dependencies with `pnpm install`.
## Local Vite Development Server
Provide a local `.env` file with the following content to set the local backend endpoint:
```
VITE_APP_API_URL=http://localhost:8000
```
This file is ignored by git.
Afterwards run the server with `pnpm run dev`.
Hit 'q' to stop the dev server.
# Docker image
## Local Docker Evnironment
Build the docker image for local docker compose environment with:
```bash
BACKEND_ENDPOINT=http://localhost:8000
docker buildx build \
--build-arg VITE_APP_API_URL=$BACKEND_ENDPOINT \
-t marcel_knowhow_frontend \
.
```
## Continuous Integration and Devlivery with GitHub Actions
The project comes with a GitHub Actions workflow to build and push the image to the Azure Container Registry (see `./.github/workflows/frontend.yaml`).
To use push a new image to the Azure Container Registry set the three secrets in Github:
- REGISTRY_LOGIN_SERVER
- REGISTRY_USERNAME
- REGISTRY_PASSWORD
## Image for Azure Container Registry and Azure Container Apps Service
Build the docker image with:
```bash
BACKEND_ENDPOINT=https://marcel-knowhow-backend.wonderfulbeach-9704a689.westus2.azurecontainerapps.io/
docker buildx build \
--platform linux/amd64 \
--build-arg VITE_APP_API_URL=$BACKEND_ENDPOINT \
-t jnicontainerregistry.azurecr.io/marcel_knowhow_frontend \
.
```
Use `docker push jnicontainerregistry.azurecr.io/marcel_knowhow_frontend:latest` to push the image to the Azure Container Registry.
# Azure Container Apps Service
- Set the Container app name to `marcel-knowhow-frontend`.
- Choose the latest backend image from the AZR.
- Select **0.25 vCPU, 0.5 GB RAM** for CPU and Memory.
- Enable Ingress
- Accept trafffic from anywhere
- Set the Target port to `80`