# Setup your environment

This section will allow you to install a proper local environment step by step.

## VSCode

### Install VSCode

Installation for VSCode can be found [here](https://code.visualstudio.com/).

### Extensions

Some of our projects might contain a `/.vscode/extensions.json` to recommand specific extesions. But here is a list of general important extensions to install:

- [Clipboard Manager](https://marketplace.visualstudio.com/items?itemName=EdgardMessias.clipboard-manager)
- [ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [GitLens - Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
- [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner)
- [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest)
- [Markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [SonarLint](https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode)
- [TabOut](https://marketplace.visualstudio.com/items?itemName=albert.TabOut)
- [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

Optional extensions:

- CSS Peek
- Auto Rename Tag
- indent-rainbow
- Liveshare (pair programming extension)

### User settings

Open the project with VSCode and add the following code into `.vscode/settings.json`:

```json
{
  "breadcrumbs.enabled": true,
  "editor.snippetSuggestions": "top",
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "window.zoomLevel": 0,
  "gitlens.advanced.messages": {
    "suppressShowKeyBindingsNotice": true
  },
    "workbench.colorCustomizations": {
       /* Put anything you like here */
    },
  "workbench.settings.editor": "json",
}
```

## Install your Linux distribution

If you're using windows, we highly recommand to install WSL. Checkout the official documation for installation or our [installation wiki](wsl.md).

### Setup your distribution

1. Start updating the packages list by typing:

    ```sh
    sudo apt update
    ```

2. Install nodejs using the apt package manager

    ```sh
    sudo apt install
    ```

## Installing prerequisites

Name | Required | Details
---------------------------------- | -------- | -------
[Docker-compose](https://docs.docker.com/compose/install/) | Yes
[Docker](https://www.docker.com/get-started) | Yes |  See [cozystack](https://docs.cozy.io/en/cozy-stack/) for more information.
Git | Yes |
[Node](https://nodejs.org/en/download/) | Yes      | Node 14 and 16 must be installed as it is the version that runs on the official cozystack.
[WSL](index.md#wsl) | No | Required for windows users.
[Yarn](https://classic.yarnpkg.com/en/docs/install)    | Yes  | Yarn is our projects package manager.

### Git

We are using Gitlab, you will need to [install Git](https://git-scm.com/) to checkout projects. Make sure to configure your informations :

```sh
git config --global user.name "First_name LAST_NAME"
git config --global user.email "email@example.com"
```

!!! info "Git version"
    Check you installed version. You'll probably have to upgrade to 1.22 to make everything work properly.
    In order to achieve this, you'll have to launch several commands:

    ```sh
    sudo apt-get remove cmdtest
    sudo apt autoremove
    sudo apt-get update
    sudo apt install curl -y
    curl -o- -L https://yarnpkg.com/install.sh | bash
    source ~/.bashrc
    ```

    Now you should be at least in version ==^1.22== and ready to go on.

### Node

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. [Install here](https://nodejs.org/en/download/)

!!! warning "We need versions 14 & 16 for our projects so we will have to install a node version manager (more on that later)."

### Npm

Npm should come installed with node. Check your version installed with :

```sh
npm --version
```

### Yarn

Yarn is used as package manager for this project. Feel free to use the one you prefer but we advice to install yarn as all the documentation is described with this package manager.
Installation for yarn can be found here: [Installation of Yarn](https://classic.yarnpkg.com/fr/docs/install/).

To Download and Setup Yarn :

```sh
sudo apt install yarn
# OR
npm i -g yarn

# Then check the installed version
yarn -v
```

#### NVM

For our projects you will need to have a version manager for node such as [**n**](https://www.npmjs.com/package/n), [**nvm**](https://github.com/nvm-sh/nvm) and [**nvm-windows**](https://github.com/coreybutler/nvm-windows) on windows. Install both **14** and **16** versions.

```sh
yarn global add nvm
```

=== "Install a version"
    ```sh
    nvm install X.X.X
    ```

=== "See installed node versions"
    ```sh
    nvm list
    ```

=== "Switch to a specific version"
    ```sh
    nvm use X.X.X
    ```

You can then check the current version of node used
```sh
node -v
```

### Docker

Docker is a tool designed to make it easier to create, deploy, and run applications by using containers. Containers allow a developer to package up an application with all of the parts it needs, such as libraries and other dependencies, and ship it all out as one package. By doing so, thanks to the container, the developer can rest assured that the application will run on any other Linux machine regardless of any customized settings that machine might have that could differ from the machine used for writing and testing the code.

#### Install Docker

Installation of Docker can be found here: [Installation of Docker](https://www.docker.com/get-started).

#### Install Docker-Compose

Installation of Docker-Compose (according to your OS) is explained here: [Installation of Docker-Compose](https://docs.docker.com/compose/install/).