Skip to content

Commit

Permalink
Merge pull request #1314 from openkfw/1313-update-developer-setup
Browse files Browse the repository at this point in the history
doc:Update dev setup
  • Loading branch information
egdmrsy authored Feb 22, 2023
2 parents 393fbdd + 23422cf commit 3f59453
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 56 deletions.
68 changes: 55 additions & 13 deletions api/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

98 changes: 55 additions & 43 deletions docs/developer/developer-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,18 +53,49 @@ This document describes how to set up your environment to start developing and d

### Working on Windows

If you are using a Windows operating system, we suggest using the Windows Subsystem for Linux, for the installation please read [this guide](https://nickjanetakis.com/blog/setting-up-docker-for-windows-and-wsl-to-work-flawlessly). Because our setup was tested on WSL 1 and not on WSL 2, we suggest using WSL 1. However, if you want to use WSL 2, you can try by following [these steps](https://docs.microsoft.com/en-us/windows/wsl/install-win10).
If you are using a Windows operating system, we suggest using the Windows Subsystem for Linux. Our setup was tested on both versions of WSL (1 and 2 with Ubuntu as Distribution), but we suggest using WSL 2 due to the increased performance over WSL 1. More information about the two versions [WSL1 and WSL2 Comparison](https://learn.microsoft.com/en-us/windows/wsl/compare-versions). If you don't have the WSL setup on your Windows machine already, you can install it by following [this guide](https://docs.microsoft.com/en-us/windows/wsl/install-win10) by Microsoft. For older builds of Windows, which require manual installation, please follow [this guide](https://learn.microsoft.com/en-us/windows/wsl/install-manual).

### Updating and Upgrading Linux packages

Since Windows does not automatically upgrade the Linux packages, it is recommended to run the following command (for Ubuntu and Debian) in your Linux distro.

```bash
sudo apt update && sudo apt upgrade
```

### Windows Terminal (Optional)

We recommend working with the Windows Terminal. You can install it from the Microsoft Store application. It works very well with the WSL.

### Git

Git already comes preinstalled with Linux Distributions on WSL. We highly recommend you to create an SSH key via following commands and add it to your GitHub.

```bash
ssh-keygen -t ed25519 -C "[email protected]"
```

If you directly pressed Enter during File prompt while generating new key, your public key file should be located under ~/.ssh/id_ed25519.pub by default.

Copy the contents of this file and add it to your GitHub account. For more information, please check the "Adding a new SSH key to your account" section on [this guide](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account) by GitHub.

### Docker/Docker-Compose

The easiest way to setup the application on your machine is via Docker and Docker-Compose. To install these components, please follow the official documentation:
The easiest way to setup the application on your machine is via Docker and Docker-Compose. For installing Docker, follow the "Install using the repository" section of the following guide. (For Ubuntu)

- [Docker](https://docs.docker.com/engine/install/ubuntu/)

> Docker installation comes already bundled with Docker compose in new versions. One important thing to pay attention here is that the bash command is not docker-compose, but without the hyphen:
```bash
docker compose
```

- [Docker](https://docs.docker.com/engine/installation/)
- [Docker Compose](https://docs.docker.com/compose/install/#install-compose)
> This will be relevant in the Development Setup section down below.
### Node.js / npm

Follow the official instructions on how to setup [node.js/npm](https://nodejs.org/en/download/).
Follow [this guide](https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl) to install Node.js/npm on WSL via the package manager.

### TypeScript

Expand All @@ -78,7 +109,7 @@ Clone the repository from Github:

- SSH:

Follow the instructions on how to setup your [SSH-connection](https://help.github.com/en/articles/connecting-to-github-with-ssh)
If you haven't done the SSH setup so far, please follow the instructions on how to setup your [SSH-connection](https://help.github.com/en/articles/connecting-to-github-with-ssh)

```bash
git clone https://github.com/openkfw/TruBudget.git
Expand All @@ -90,15 +121,15 @@ git clone https://github.com/openkfw/TruBudget.git
git clone https://github.com/openkfw/TruBudget.git
```

### IDE
### IDE

For coding, we recommend the use of Visual Studio Code, which you can find [here](https://code.visualstudio.com/).

To ensure that the code is formatted properly we recommend following extensions for VS Code:

- aaron-bond.better-comments

- CoenraadS.bracket-pair-colorizer
- CoenraadS.bracket-pair-colorizer (deprecated, this extension is now built-in to VS-Code)

- dbaeumer.vscode-eslint †

Expand All @@ -108,17 +139,13 @@ To ensure that the code is formatted properly we recommend following 

- pmneo.tsimporter

- rbbit.typescript-hero
- rbbit.typescript-hero (deprecated, no longer maintained)

- xabikos.JavaScriptSnippets

- esbenp.prettier-vscode

:::note

† Have a look [here](https://thesoreon.com/blog/how-to-set-up-eslint-with-typescript-in-vs-code) to learn more about how to set up es-lint for validating TypeScript in VSCode

:::
> † Have a look [here](https://thesoreon.com/blog/how-to-set-up-eslint-with-typescript-in-vs-code) to learn more about how to set up es-lint for validating TypeScript in VSCode
### Chrome Developer Tools

Expand Down Expand Up @@ -159,16 +186,16 @@ bash setupGitSecrets.sh

All projects in TruBudget (blockchain, api, frontend, etc) have a docker-compose file that can be used to start the project with. In order to start the projects, some environment variables must be set. In order to make this easier, there are some files containing the environment variables called `.env_example` in each project directory. To use these environemnt variables, simply copy the `.env.example` file and rename it to `.env`.

:::caution
Do **NOT** use other additional ways to set environment variables like inline env-variables or env-variables defined by 'export'. Why? - Because these env-variables will overwrite each which makes it very hard to find mistakes.
:::
> Do **NOT** use other additional ways to set environment variables like inline env-variables or env-variables defined by 'export'. Why? - Because these env-variables will overwrite each which makes it very hard to find mistakes.
## Development Setup

If you want to start developing on Trubudget, you need to setup the application locally. This guide tells you how to start the blockchain, start the API, load up some test data and start the frontend.

### Dockerized Application (recommended)

> If you have installed Docker by following the above guide, then there is one extra step you have to do until this is fixed later. The scripts/development/start-dev.sh script file uses the "docker-compose" command. However within your installation, the command is "docker compose". Until the script is modified to take this into consideration, you are required to change the "docker-compose" commands in the script to "docker compose" locally. Using the IDE or nano/vim, change every "docker-compose" to "docker compose" before you start the script. Do NOT push these changes to the repository as this is only meant for local development.
This is the fastest way you can run **all services** needed for development. Everything is started in one command:

1. in root directory execute: `bash scripts/development/start-dev.sh --slim` or `bash scripts/development/start-dev.sh --full`
Expand Down Expand Up @@ -198,9 +225,7 @@ Docker Compose ensures that services are communicating and have correct environm

You can inspect each container individually: `docker logs --follow CONTAINER`. Where _CONTAINER_ represents name of the service that can be found in the `.yml` file.

:::note
Hot reloading with docker requires a lot of processing power (due to docker volumes). If you experience huge delays while hot-reloading, you should start the services you need by yourself without docker.
:::
> Hot reloading with docker requires a lot of processing power (due to docker volumes). If you experience huge delays while hot-reloading, you should start the services you need by yourself without docker.
### TruBudget Services

Expand Down Expand Up @@ -344,18 +369,13 @@ npm start

The frontend should then be availaible at http://localhost:3000

:::caution
If you change the port of the api you may have to consider to change the proxy port in the `package.json` accordingly.
:::

:::note
You do not need to run every project separately if you are developing on a single one. Just do following:

1. go to a desired folder (e.g. _/api_)
2. copy `.env.example` file and rename it to `.env`
3. run `bash startDev.sh` in the folder to start dependent project(s)
> If you change the port of the api you may have to consider to change the proxy port in the `package.json` accordingly.
:::
> You do not need to run every project separately if you are developing on a single one. Just do following:
>
> 1. go to a desired folder (e.g. _/api_)
> 2. copy `.env.example` file and rename it to `.env`
> 3. run `bash startDev.sh` in the folder to start dependent project(s)
#### Provisioning (Optional)

Expand Down Expand Up @@ -422,13 +442,9 @@ npm start

The service is then available either on the host and port set by the environment variable or `localhost:8888` by default.

:::note
in order to access the excel export service from the UI, you should start the frontend with some additional environment variables as mentioned in the excel-export section of the [frontend README.md](https://github.com/openkfw/TruBudget/blob/main/frontend/README.md#Excel-Export-Service) file.
:::
> in order to access the excel export service from the UI, you should start the frontend with some additional environment variables as mentioned in the excel-export section of the [frontend README.md](https://github.com/openkfw/TruBudget/blob/main/frontend/README.md#Excel-Export-Service) file.
:::note
Another way to start the excel export service is in a docker container. Using the docker-compose file in the excel-export folder will build the whole application including api, blockchain, frontend and excel-export service at the same time.
:::
> Another way to start the excel export service is in a docker container. Using the docker-compose file in the excel-export folder will build the whole application including api, blockchain, frontend and excel-export service at the same time.
#### Email-Notification (Optional)

Expand All @@ -454,9 +470,7 @@ Before running the tests you should make sure that the application is started (i

#### Setup

:::note
If you are using WSL on Windows check out [this setup](https://nickymeuleman.netlify.app/blog/gui-on-wsl2-cypress) to run cypress in WSL.
:::
> If you are using WSL on Windows check out [this setup](https://nickymeuleman.netlify.app/blog/gui-on-wsl2-cypress) to run cypress in WSL.
To setup a new TruBudget instance with Docker-Compose, run following command (recommended):

Expand Down Expand Up @@ -487,9 +501,7 @@ or through the Cypress frontend under settings.

For further information see the [README.md](https://github.com/openkfw/TruBudget/blob/main/e2e-test/README.md) of /e2e-test

:::note
The .env file is needed.
:::
> The .env file is needed.
### Unit Tests

Expand Down

0 comments on commit 3f59453

Please sign in to comment.