UD-Viz is a 3-package JavaScript framework for creating web applications for visualizing and interacting with geospatial 3D urban data. Code is open source on licence LGPL 2.1 (LICENSE.md).
UD-Viz Packages:
Index
UD-Viz (repo)
├── bin # Global NodeJS development and deployment
├── docs # Developer and User documentation
├── packages # Packages folder
| ├── browser # UD-Viz Browser-side framework
| ├── shared # UD-Viz shared Browser+Node framework
| ├── node # UD-Viz Node-side framework
├── .eslintrc.js # Linting rules and configuration
├── .gitignore # Files/folders ignored by Git
├── .prettierrc # Formatting rules
├── travis.yml # Continuous integration entrypoint
├── favicon.ico # Examples landing page icon
├── index.html # Examples landing page entrypoint
├── package-lock.json # Latest npm package installation file
├── package.json # Global npm project description
├── Readme.md # It's a me, Mario!
├── style.css # Examples landing page style
For the node/npm installation instructions refer here
UD-Viz has been reported to work with versions:
- node version 16.X
- npm version: 8.X
Clone the UD-Viz repository and install requirements with npm
git clone https://github.com/VCityTeam/UD-Viz.git
cd UD-Viz
npm install # resolve dependencies based on the package.json (and package-lock.json if it exists)
npm run link-local # use the local code instead of the modules published on npm
To quickly build and locally host the examples landing page which links to several UD-Viz example applications.
npm run start
After running go to localhost:8000.
Refer to this Readme to re-generate it and for more information.
Developing UD-Viz applications requires knowledge about :
VSCode is recommended.
When using Visual Studio Code, you can install the following extentions to make your life easier:
- eslint - allows you e.g. to automatically fix the coding style e.g. when saving a file.
- Prettier - JS, JSON, CSS, and HTML formatter.
- Mintlify - AI-powered documentation generator. (may require rewriting by a human)
As configured, the coding style requires a Linux style newline characters which might be overwritten in Windows environments
(both by git
and/or your editor) to become CRLF
. When such changes happen eslint will warn about "incorrect" newline characters
(which can always be fixed with npm run eslint-fix
but this process quickly gets painful).
In order to avoid such difficulties, the recommended pratice
consists in
- setting git's
core.autocrlf
tofalse
(e.g. withgit config --global core.autocrlf false
) - configure your editor/IDE to use Unix-style endings
For Windows users:
In order to use scripts that launch a shell script with Powershell:
npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"
Script | Description |
---|---|
npm run clean |
Remove files and folders generated by npm install and the npm run build-* script such as ./node_modules , package-lock.json , and ./dist |
npm run reset |
Reinstalls npm dependencies. This script runs npm run clean and npm install command |
npm run link-local |
Create local aliases to packages (browser, shared and node ) to avoid using relative paths in the package.json. See link documentation for more information. To delete these aliases you can run npm prune |
npm run build-shared |
Call the build command of the shared package |
npm run build-browser |
Call the build command of the browser package |
npm run build-node |
Call the build command of the node package |
npm run debug-examples |
Launch a watcher and server for debugging the examples. See here for more information |
npm run eslint |
Run the linter. See here for more information |
npm run eslint-quiet |
Run the linter without displaying warnings, only errors |
npm run eslint-fix |
Run the linter and attempt to fix errors and warning automatically |
npm run test |
Build the 3 packages and tests shared, browser scripts and examples html. Uses this test script |
npm run assert-code |
Run npm run eslint and npm run test . Also ran by CI. See here for more information |
npm run pre-publish |
Change version in all package.json ( eg npm run pre-publish x.x.x ). See this script |
npm run docs-shared |
Generate the JSDOC shared package documentation |
npm run docs-browser |
Generate the JSDOC browser package documentation |
npm run docs-node |
Generate the JSDOC node package documentation |
npm run docs-home |
Generate the JSDOC documentation landing page |
npm run docs |
Run npm run docs-shared , npm run docs-browser , npm run docs-node , and npm run docs-home |
npm run dev-docs |
Launch a watcher for generating and debugging the documentation. See here for more information |
npm run host |
host the bundle with an express server. http://locahost:8000/ |
npm run start |
Run npm run build-browser and npm run host |
The browser package contains several "example" applications that showcase different UD-Viz components and serve as templates for creating demos with UD-Viz.
npm run debug-examples
It run debugExamples.js:
- Run an ExpressAppWrapper
- Run a watched routine buildDebugBrowser.js with nodemon.
Each time origin/master branch is impacted by changes, Travis CI is triggered. It does a set of jobs describe in travis.yml.
Jobs list :
npm run assert-code
: Run linter, build bundles and run testsnpm audit --audit-level=moderate
: Npm native command (npm-audit) which check packages dependencies vulnerabilities.remark -u validate-links .
: Command of the package remark-validate-links which check dead link in markdown.
For information on the accepted coding style, submitting Issues, and submitting Pull Requests see Contributing.md
For creating a new release see ReleasePublish.md