/central-frontend

Vue.js based frontend for ODK Central

Primary LanguageJavaScriptApache License 2.0Apache-2.0

ODK Central Frontend

Platform License Build status

ODK Central Frontend uses Vue.js to provide the frontend for ODK Central. It is currently under development.

Setting up your development environment

First, install Node.js 12+.

Next, install dependencies by running npm install.

Install NGINX. Depending on your operating system and how you install NGINX, you may need to change the absolute paths in the development nginx.conf.

You will also need to set up ODK Central Backend.

Running in development

Follow these instructions to run ODK Central Frontend in development. For deploying to production, see the next section.

First, run ODK Central Backend. If you haven't already, you will need to create a user using an ODK Central Backend command line script. You will probably also want to promote that user to a sitewide administrator. See the ODK Central Backend readme for more information.

Next, build ODK Central Frontend files for development by running npm run dev. The files will be outputted to dist/. As you update the source code, the files will be automatically rebuilt.

Finally, run NGINX by changing the working directory to the root directory of the repository, then typing the following:

nginx -c "$PWD/nginx.conf" -p "$PWD/dist/"

We specify -p "$PWD/dist/" so that relative paths in nginx.conf are relative to dist/.

NGINX effectively places ODK Central Frontend and ODK Central Backend at the same origin, avoiding cross-origin requests.

ODK Central Frontend will be available on port 8989.

Some ODK Central Frontend functionality requires HTTPS, for example, downloading files from ODK Central Backend. To access this functionality in development, one option is to use ngrok. By default, ODK Central Frontend is available on port 8989, so you can run ngrok http 8989 to expose a temporary HTTPS URL that you can use. Some functionality additionally requires you to specify the HTTPS URL to ODK Central Backend, for example, getting a form in ODK Collect. To do so, set the default.env.domain property in config/default.json to the HTTPS URL, then restart the ODK Central Backend server if it is already running.

Deploying to production

To build ODK Central Frontend files for production with minification, run npm run build. The files will be outputted to dist/. For more details on this command, see the documentation for Vue CLI.

Note that this repository's nginx.conf is for development only.

For more information on deploying to production, see the ODK Central repository.

Testing

To run unit tests, type npm run test.

For linting, run npm run lint. We use rules based on the Airbnb JavaScript style guide.