A project to show POC of 3D open pit mine model's volume computation in ReactTS + DeckGL Web app for CrystallBall company. Backend is comprise of Django + Geoserver + Postgres.
Demo GIF here:
Frontend:
Backend:
In the project directory, you can either prepare below for local developments:
- Node.js
- Docker Desktop + wsl2 (Ubuntu recommended)
Runs the app in the development mode. Open http://localhost:3000/ to view it in the browser.
npm install
npm run dev
The page will reload if you make edits. You will also see any lint errors in the console.
The Vite Checker is constantly checking if any typing issues exist in
our TypeScript codes by prompting messages in runtime.
To fix all formatting and linting using prettier:
npm run format
To see if any errors prevent production build compilation:
npm run build
To define env, create an .env file:
VITE_APP_API_BASE_PATH: The backend api to point to, for example http://localhost:8000/api
VITE_APP_API_GEOSERVER: Point to http://localhost:8080/geoserver/
To ensure that we test consistent with the latest backend changes, we grab the latest apis via its provided OpenAPI 3.0 spec.
Command below will ensure that we have up-to-date mocks of the backend. Run it inside the frontend container, which already has the Java runtime the generator needs:
docker compose exec deckglgis npm run generate-api
The backend must be up on the full profile, since the generator reads its live schema.
It defaults to http://volumeapi:8000/swagger.json. That alias exists because Django rejects
the underscore in the volume_api service name as an invalid host header.
To point somewhere else, for example when running against a backend on your host, override the url:
OPENAPI_URL=http://localhost:8000/swagger.json npm run generate-api
If you have Docker Desktop or relavant installed on your machine, you can run:
docker-compose up --build
docker compose exec deckglgis npx prettier --cache --write .
First fetch the backend as submodule:
git submodule init
git submodule update --update
To update/create new and push commits under submodule:
git push origin HEAD:main
Then, make sure you create appropriate env files for both frontend and backend, in their respective folder and run full profile build:
docker-compose --profile full up --build
--profile full is required so backend services (volume_api, geoserver, postgres) are included.
To stop everything:
docker compose --profile full down
That does not wipe data.
To drop the database as well:
docker compose --profile full down -v
rm -rf volume_api/Data/*