OpenDroneMap-WebODM/slate/source/includes/_fordevelopers.md

For Developers

Development Quickstart

1. Make a fork of the WebODM repository
2. Clone your repository in a directory
3. Create a new branch: git checkout -b branchname.
4. Setup a development environment either with docker or natively.
5. Commit the changes: git commit -a -m "describe your changes"
6. Push the changes to your repository: git push origin branchname
7. 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:

./devenv.sh start

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:

./devenv.sh runtests

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.