3.9 KiB
For Developers
Development Quickstart
- Make a fork of the WebODM repository
- Clone your repository in a directory
- Create a new branch:
git checkout -b branchname
. - Setup a development environment either with docker or natively.
- Commit the changes:
git commit -a -m "describe your changes"
- Push the changes to your repository:
git push origin branchname
- Create a pull request
We don't have many rules. Follow the guidelines indicated in the Contributing document, be nice to others and you'll do great! :)
Setup a Development Environment
There are two ways to setup a development environment. The easiest one is to use docker.
Once you have a development environment, read about the project overview and get hacking!
Docker Setup
Follow the Getting Started instructions, then run:
./webodm.sh start --dev
That's it! You can modify any of the files, including SASS and React.js files. Changes will be reflected in the running WebODM instance automatically.
Native Setup
If you can follow the instructions to run WebODM natively, you should be able to make changes to the code directly.
Run Unit Tests
We think testing is a necessary part of delivering robust software. We try to achieve complete test coverage for backend code and at a minimum robust smoke testing for frontend code.
To run the unit tests, simply type:
./webodm.sh test
Project Overview
Backend
The backend is based mainly on Django and Django REST Framework.
We don't use much of Django's templating system, except for the Administration
and Processing Nodes
sections. Instead we use Django to expose an API, which we then tie to a React.js app.
Directories of interest are listed as follow:
Directory | Description |
---|---|
/app |
Main application, includes the UI components, API, tests and backend logic. |
/nodeodm |
Application that bridges the communication between WebODM and NodeODM. Includes its own unit tests and models. |
/webodm |
Django's main project directory. Setting files are here. |
Frontend
We use a React.js app (ES6 syntax) and SCSS for various UI components such as the dashboard. We use webpack to build intermediate components into a static bundle.
Directories of interest are listed as follow:
Directory | Description |
---|---|
/app/templates/app |
Location of Django templates. While we don't use them a lot, we use them for a few pages and as a glue to bootstrap the React code. |
/app/static/app/js |
Location of Javascript files for all UI components. |
/app/static/app/js/components |
We try to separate components for reusability into various React components. Each component is stored here. |
/app/static/app/js/css |
Each component should have its own SCSS file. Those files are stored here. |
/app/static/app/js/main.jsx
is the entry point for the UI. If you wonder how we tie Django and React.js together, this is the file to look at to begin your search.
Documentation
We use Slate to generate our documentation. See their project's wiki for information about making changes to the documentation.
Documentation can be changed by modifying the files in /slate/source/includes
.