Testing loading KMZ files on a LeafletJS web map.
KMZ file source: [link]
Preview: https://ciatph.github.io/webmap-kmz
The following dependecies are used for this project. Feel free to experiment using other dependencies and versions.
- Windows 64-bit OS
- nvm version 1.1.9 (for Windows)
- NodeJS 16.19.1 installed using nvm
- node v16.19.1
- npm v8.19.3
- NodeJS modules (installed via npm) are available for each app directory.
- client, webserver and webserver-kmz
-
Clone this repository.
git clone https://github.com/ciatph/webmap-kmz.git -
Install dependencies on all app directories.
npm install -
Run the localhost static website:
npm run client:dev -
Edit the contents of the localhost web map on
/client/app/main.js -
View available NPM scripts in the Available Scripts section for more information.
We can use Docker to run dockerized client and server apps for local development and production mode. The following methods require Docker and Docker compose correctly installed and set up on your development machine.
The following dependencies are used to build and run the image. Please feel feel free to use other OS and versions as needed.
- Ubuntu 22.04.1
- Docker version 23.0.1, build a5eeb1
- Docker Compose v2.16.0
Edit any of the files under /client/app or /webserver/src after running step no. 2.
# 1. Build the client and webserver-kmz containers for localhost development.
docker compose -f docker-compose.dev.yml build
# 2. Create and start the development client and webserver-kmz containers
docker compose -f docker-compose.dev.yml up
# 3. Stop and remove the development containers, networks, images and volumes
docker compose -f docker-compose.dev.yml down
The following docker-compose commands build small client and webserver-kmz images targeted for creating optimized dockerized apps running on self-managed production servers. An Nginx service serves the frontend client on port 3000. The webserver-kmz, running on a separate Nodejs service, is also served by the client's Nginx service in a reverse proxy on port 3002. Hot reload is not available when editing source codes from /client/src or /server/src.
# 1. Build the client and webserver-kmz containers for production deployment.
docker compose -f docker-compose.prod.yml build
# 2. Create and start the production client and webserver-kmz containers.
docker compose -f docker-compose.prod.yml up
# 3. Stop and remove the production containers, networks, images and volumes
docker compose -f docker-compose.prod.yml down
Installs nodejs dependencies on the /client, /webserver and /webserver-kmz directories.
Builds the client app to the /dist directory and runs it on the production web server.
This script automatically runs the npm run client:build script.
Run the simple localhost static website on development mode with live reload using webpack.
Build the simple localhost static website for production mode using webpack.
Built files are placed in the /dist directory.
Check lint errors on the /client directory.
Fix lint errors on the /client directory.
Run the KMZ express server in development load with live reload using nodemon.
Run the KMZ express server for production mode.
Check lint errors on the /webserver-kmz directory.
Fix lint errors on the /webserver-kmz directory.
Check lint errors on the /webserver directory.
Fix lint errors on the /webserver directory.
Check lint errors on the client, webserver and webserver-kmz directories.
Fix lint errors on the client, webserver and webserver-kmz directories.
@ciatph
20230224