setup.md

# Setup your environment

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

## VSCode

VSCode is the recommended IDE.

### Extensions

Some of our projects might recommend specific list extensions with a `.vscode/extensions.json` file. Here here is a generic list of 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)
- [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

### User settings

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

```json title=".vscode/settings.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
  }
}
```

## Install your Linux distribution

If you're using windows, we highly recommend to [install WSL](./wsl.md). Also checkout the official documentation.

### 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

### Git

We are using Gitlab. Make sure to configure your informations :

```sh
git config --global user.name "First_name LAST_NAME"
git config --global user.email "email@grandlyon.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.

:::warning
We need different versions for our projects so we will have to install a node version manager (more on that later).
:::

#### NVM

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

You can then check the current version of node used

```sh
node -v
```

### 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
```

### 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.

See [cozystack](https://docs.cozy.io/en/cozy-stack/) for more information.

#### 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/).

## Software/Tools

We use different softwares/tools to help use share ressources. Ask a team member for more details :

- Figma
- Postman
- Udemy