Hortus Web Application

Gardening planner web application part of the Hortus project.

Architecture

This web application is based on React and run as a Docker service. It communicate via HTTP with the Hortus API service.

Technologies, languages, frameworks

• Docker
• NPM
• Typescript
• React
• React Router
• Semantic UI React

Requirements

• Docker
• NPM for development

Usage

This application is part of a Docker stack. see: Hortus project to run the project.

Development

To run the application the Hortus API service also need to be running in order to retreve the data.

Run with NPM

If the API service is up and running, create an .env file and fill it accordingly with the API service configuration.

REACT_APP_API_URL=http://localhost:3333

Run the application

npm run start

Go to http://localhost:3000

Test with NPM

To implement

npm run tests

Build and run with Docker

Build the image, see: Dockerfile.

To be able to use environment variable in the Docker container an .env file with the desired variable must be present. see. environment.sh, Dockerfile and public/index.html

docker build . -t alexandrelamberty/hortus-web-app:{tag}

Run the image, specify the ports mapping, environment variables file and network to join.

docker run -p 3000:3000 --network=hortus_default --env-file .env --name hortus-web-app -d alexandrelamberty/hortus-web-app:{tag}

Push to Docker Hub

Automated with GitHub Action, see: docker.yml

docker tag alexandrelamberty/hortus-web:{tag} alexandrelamberty/hortus-web:{tag}
docker push alexandrelamberty/hortus-web:{tag}