recipes-manager-UI

User Interface to manage recipes with recipes-manager. How to use the UI in k8s together with all related components, is explained here: Deployment.

Getting Started - Basic Deployment and Configuration

Before you start, ensure that npm is installed.

1. Get the Code

   git clone https://github.com/ottenwbe/recipes-manager-ui.git
   

2. Configure the strings of the App. A strings.json file is used to configure the texts displayed in the UI. Configuration happens at build time.

   {
       "appName": "theAppName",
       "pageHeader" : {"sub" : "theSubHeader"},
       "footer" : {"text": "theFooter"},
       "welcome" : "theWelcomeText",
       "welcomesSub" : "theWelcomeSub"
   }

3. Start the app with npm

   npm i
   npm run build
   npm start

4. Open http://localhost:3000 to view it in the browser. Note, the app assumes that recipes-manager runs already

Development

This project was bootstrapped with Create React App and migrated to Next.js.

Start

`npm run dev`

Runs the app in the development mode.
Open [http://localhost:3000](http:// localhost:3000) to view it in the browser. The page will reload if you make edits
You will also see any lint errors in the console.

Test

NOTE: REQUIRES REWORK

`npm test`

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Build

Build App

`npm run build`

Builds the app for production to the .next folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Build Docker Container

docker build -t "recipes-manager-ui:SNAPSHOT" -f Dockerfile .

While building the docker container, all dpendencies are installed. The app, however, is built when starting the container to reflect changes to the environment variables.

Build Scripts

All build scripts are found in scripts directory.

.
├── docker_buildx.sh 
├── make_docker_for_minikube.sh
├── make_snapshot.sh
└── push_docker.sh

• docker_buildx.sh <should_push>

  Opinionated way to build the docker image for arm and amd64. This multi-arch build it relies on buildx. The version is determined by a git tag and written to package.json (e.g., 0.1.0) as well as tagged to the docker image (e.g., v0.1.0). It is tailored for the CI/CD pipelines.

• make_docker_for_minikube.sh

  Builds a container with a development tag and pushes it to a local minikube registry.

Release Process

Read the current version:

node -p -e "require('./package.json').version"

Fix the version in the repository, i.e., with semver.

semver $(node -p -e "require('./package.json').version") -i minor

Then simply tag the git repository with the next version. This triggers the release pipeline.

git tag v1.2.3
git push origin v1.2.3

Disclaimer

I created this project for the purpose of educating myself and personal use. If you are interested in the outcome, feel free to contribute; this work is published under the MIT license.