You will need yarn
package mananger to be installed globally to run this project. Follow the instructions on https://yarnpkg.com/en/docs/install to install yarn
if it is not already installed on your machine.
Once installed you can verify it by running yarn -v
on terminal. It should return whatever is the latest version mentioned on https://yarnpkg.com/en/docs/install.
Once yarn is installed run the following:
make deps
There are two possible ways to setup Avni Webapp for developement:
- You can setup the webapp in a way that it directly connects to the hosted API server so you don't have to setup local postgres database and Java API server. This is an easy way to get started as you don't have to worry about having to install Java and API Server. Also this will consume less resources on your system as you are not running API server.
- You can setup local postgres database and API server also locally and connect the webapp to that server. This is more difficult as it involves having to install Postgres, Java and running Java API Server.
make start-with-staging
- Start your Java Server. For this refer to product developement setup document.
- Run
make start
in avni-webapp directory. - It will assume whatever user you started the Java Server with since we don't do authentication when running the server locally. If you want to change the user then restart the webapp after setting environment variable
REACT_APP_DEV_ENV_USER
to user you want. E.g. start the server likeREACT_APP_DEV_ENV_USER=ihmp-admin make start
.
- Please make sure that your code follows guidelines given in https://avni.readme.io/v2.0/docs/contribution-guide.
- There are multiple apps inside this repository
- Admin (Allow admins to do admin work like creating organisations, users, locations)
- App Designer (Allow admins to design the app)
- Reports (Allow admins to download longitudnal reports)
- Translations (Allow admins to upload translations)
- Data Entry App (Allow users to do data entry using web based app)
- Folders per route/feature (See https://marmelab.com/blog/2015/12/17/react-directory-structure.html)
- Reducers and actions in 'ducks' structure (See https://github.com/erikras/ducks-modular-redux). This is not applicable for App Designer as it does not use Redux.
- We use Prettier for javascript/jsx formatting. You can use your IDE/Editor specific Plugin to format code using Prettier. Alternatively there is also a command
make prettier-all
that will format all files in src folder using Prettier. And there also is a git precommit hook that formats staged files using prettier before commiting.
All commits are built and tested and deployed to staging if tests succeed. Build status can be seen at https://circleci.com/gh/OpenCHS/openchs-webapp. Please run tests using make test
before you push your code so you don't end up breaking things unnecessarily.