Add WSL instruction and IDE setup instruction (#1150)

* Add WSL instruction and IDE setup instruction

* Fix setup

* Fix setup

* Fix

* Update docs/docs/developer/additional/ide-setup.mdx

Co-authored-by: Weiko <corentin@twenty.com>

---------

Co-authored-by: Weiko <corentin@twenty.com>

.ergomake/docker-compose.yml

@@ -23,13 +23,13 @@ services:
       ACCESS_TOKEN_SECRET: "secret_jwt"
       LOGIN_TOKEN_SECRET: "secret_login_token"
       REFRESH_TOKEN_SECRET: "secret_refresh_token"
-      PG_DATABASE_URL: "postgres://postgres:postgrespassword@postgres:5432/default?connection_limit=1"
+      PG_DATABASE_URL: "postgres://twenty:twenty@postgres:5432/default?connection_limit=1"
       FRONT_BASE_URL: "http://localhost:3000"
     labels:
       dev.ergomake.env.replace-env.FRONT_BASE_URL: "https://{{ services.server.url }}"
   postgres:
     build: ../infra/dev/postgres
     environment:
-      POSTGRES_PASSWORD: postgrespassword
+      POSTGRES_PASSWORD: twenty
     ports:
       - "5432"

.github/workflows/ci-server.yaml

@@ -12,7 +12,8 @@ jobs:
         image: postgres
         env:
           POSTGRES_HOST: postgres
-          POSTGRES_PASSWORD: postgrespassword
+          POSTGRES_PASSWORD: twenty
+          POSTGRES_USER: twenty
           POSTGRES_DB: test
           POSTGRES_PORT: 5432
         ports:

.vscode/extensions.json

@@ -5,11 +5,9 @@
     "dbaeumer.vscode-eslint",
     "unifiedjs.vscode-mdx",
     "ms-vscode.makefile-tools",
-    "ms-azuretools.vscode-docker",
     "esbenp.prettier-vscode",
     "GraphQL.vscode-graphql",
     "prisma.prisma",
-    "unifiedjs.vscode-mdx",
     "yoavbls.pretty-ts-errors",
     "graphql.vscode-graphql-syntax",
     "graphql.vscode-graphql"

docs/docs/developer/additional/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "Additional resources",
+  "position": 3,
+  "collapsible": true,
+  "collapsed": true,
+  "className": "navbar-sub-menu"
+}

docs/docs/developer/additional/ide-setup.mdx

@@ -0,0 +1,52 @@
+---
+sidebar_position: 0
+sidebar_custom_props:
+  icon: TbBrandVscode
+---
+
+# IDE Setup
+
+This section will help you setup your IDE for the project. If you haven't setup your development environment, please refer to [Development Environment](/developer/local-setup) section.
+
+You can obviously use any IDE you want but we recommend using Visual Studio Code as our internal team uses it and we have a lot of extensions and settings that we can share with you.
+
+
+## Visual Studio Code
+
+### Installation
+
+You can download Visual Studio Code from [here](https://code.visualstudio.com/download). Depending on your operating system, you can download the appropriate version.
+
+### Open Project
+
+Once you have installed Visual Studio Code, you can open the project by clicking on `File > Open Folder` and selecting `twenty` project root folder.
+
+<div style={{textAlign: 'center'}}>
+    <img src="/img/developer/ide-project-open.png" alt="Visual Studio Code: Open Twenty project" width="90%" />
+</div>
+
+### Extensions 
+
+You can use the recommended extensions for the project. You will find them in `.vscode/extensions.json` file. VSCode should prompt you to install the recommended extensions when you open the project.
+
+<div style={{textAlign: 'center'}}>
+    <img src="/img/developer/ide-extensions.png" alt="Visual Studio Code: Install recommended extensions" width="90%" />
+</div>
+
+
+### Docker Setup
+
+If you are using a [Docker setup](/developer/local-setup#docker-install), you will need to run VSCode in the container. You can do that by opening the project, clicking on `Remote Explorer` icon on the left sidebar and then clicking on `Attach in New window` on `dev-twenty-dev` container.
+
+<div style={{textAlign: 'center'}}>
+    <img src="/img/developer/ide-start-dev-container.png" alt="Visual Studio Code: Open in container" width="90%" />
+</div>
+
+<br />
+VSCode will open a new window and you will be able to use it as you would normally do. The only difference is that you will be running VSCode inside the container and you will have access to all the tools and dependencies that are installed in the container.
+
+If you stop your containers, you will need to start them again before opening the project in VSCode again.
+
+### Conclusion
+
+You are all set to start developing the project. If you have any questions, please read our [troubleshooting guide](/developer/additional/setup-troubleshooting) please feel free to reach out to us on [Discord](https://discord.com/invite/cx5n4Jzs57).

docs/docs/developer/additional/setup-troubleshooting.mdx

@@ -0,0 +1,10 @@
+---
+sidebar_position: 2
+sidebar_custom_props:
+  icon: TbBugOff
+---
+
+
+# Troubleshooting guide
+
+Coming soon

docs/docs/developer/additional/windows-wsl-setup copy.mdx

@@ -0,0 +1,62 @@
+---
+sidebar_position: 1
+sidebar_custom_props:
+  icon: TbBrandWindows
+---
+
+# Windows WSL Setup
+
+## Install WSL
+
+Open PowerShell as Administrator and run:
+
+Install WSL. Follow https://learn.microsoft.com/en-us/windows/wsl/install
+
+```powershell
+wsl --install
+```
+
+You should be prompted to restart your computer. If not, restart it manually.
+
+Upon restart, a powershell window will open and install Ubuntu. This may take a few minutes.
+You will be prompted to create a username and password for your Ubuntu installation.
+
+<div style={{textAlign: 'center'}}>
+    <img src="/img/developer/ide-start-dev-container.png" alt="Visual Studio Code: Open in container" width="90%" />
+</div>
+
+## Setup your developer environment
+
+### Install Git
+
+Follow: https://learn.microsoft.com/en-us/windows/wsl/tutorials/wsl-git
+
+```
+sudo apt-get install git
+```
+Then, configure your git user name and email using the following commands, replacing name and email with your own. These details will be associated with any commits that you create:
+
+```
+git config --global user.name "Your Name"
+git config --global user.email "youremail@domain.com"
+```
+
+**Note:$$ If you don't have a Github account, create one now with the corresponding email address. We recommend that you setup a SSH key for your Github account. Follow the instructions here: https://docs.github.com/fr/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent
+
+### Install Node.js, nvm, Yarn
+
+```bash
+sudo apt-get install curl
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
+curl -o- -L https://yarnpkg.com/install.sh | bash
+```
+
+Close and reopen your terminal to start using nvm or run the following to use it now:
+
+### Install Twenty project
+
+You are ready to install Twenty project. Follow the [Yarn install guide](/developer/local-setup#yarn-install) instructions. 
+We don't recommend to use Docker on WSL as it adds an extra layer of complexity.
+
+
+

docs/docs/developer/glossary.mdx

@@ -1,4 +1,5 @@
 ---
+sidebar_position: 1
 sidebar_custom_props:
   icon: TbVocabulary
 ---

docs/docs/developer/local-setup.mdx

@@ -4,6 +4,9 @@ sidebar_custom_props:
   icon: TbDeviceDesktop
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # Local Setup
 
 This section will guide you through the Twenty installation on your local environment. 
@@ -41,13 +44,51 @@ You also need to have a PosgresSQL database available. If you already have one a
 
 If you don't, you can provision one through `docker` using the following command:
 
+<Tabs>
+  <TabItem value="docker" label="Docker" default>
+
 ```bash
-cd twenty
-make provision-postgres
+  cd twenty
+  make provision-postgres
 ```
 
 This will create a Docker container, exposing a PostgresSQL instance at [http://localhost:5432](http://localhost:5432).
 
+This database is containing two tables: `default` and `test`
+You can access it using `twenty` postgres user (password: `twenty`)
+  </TabItem>
+  <TabItem value="linux-wsl" label="Linux / Windows WSL">
+
+Install PostgresSQL on WSL2:
+
+```bash
+  sudo apt update
+  sudo apt install postgresql postgresql-contrib
+```
+
+Start postgresql service and connect to the database using default `postgres` user:
+
+```bash
+sudo service postgresql start
+sudo -u postgres psql
+```
+
+Create two databases:
+
+```sql
+CREATE DATABASE "default";
+CREATE DATABASE "test";
+```
+
+Create a `twenty` user with password `twenty`:
+
+```sql
+CREATE USER twenty PASSWORD ‘twenty’
+```
+  </TabItem>
+</Tabs>
+
+
 ### 4. Setup env variables
 
 Twenty requires a few environment variables to be set. Locally, we recommend setting them through a `.env` file.
@@ -58,8 +99,6 @@ cp ./front/.env.example ./front/.env
 cp ./server/.env.example ./server/.env
 ```
 
-The default values should work out of the box. Don't forget to update the database connection string if you are using your own database instance.
-
 ### 5. Server setup
 
 **Note:** we recommend that you use `nvm` to install the correct `node` version. We have added a `server/.nvmrc` to ensure all contributors are using the same version.
@@ -126,7 +165,7 @@ The default values should work out of the box, except for the postgres URL, whic
 Open `./server/.env` and change to the following:
 
 ```bash
-PG_DATABASE_URL=postgres://postgres:postgrespassword@postgres:5432/default?connection_limit=1
+PG_DATABASE_URL=postgres://twenty:twenty@postgres:5432/default?connection_limit=1
 ```
 
 
@@ -174,7 +213,7 @@ You should now have:
 
 ### 7. Sign in to your local Twenty installation
 
-Open [http://localhost:3001](http://localhost:3001) and sign in using our seeded demo account `tim@apple.dev`.
+Open [http://localhost:3001](http://localhost:3001) and sign in using our seeded demo account `tim@apple.dev` (password: `Applecar2025`)
 
 ### 8. (Optional)
 

docs/docs/developer/workflows.mdx

@@ -1,4 +1,5 @@
 ---
+sidebar_position: 2
 sidebar_custom_props:
   icon: TbTopologyStar
 ---

docs/src/css/custom.css

@@ -182,4 +182,24 @@ li.coming-soon a::after {
 
 a.table-of-contents__link:hover{
   text-decoration: underline;
+}
+
+.navbar-sub-menu {
+  padding-top: 8px;
+  font-size: 13px;
+}
+
+.navbar-sub-menu .menu__link--sublist {
+  font-size: 11px;
+}
+
+.docs-image {
+  max-width: 100%;
+  display: flex;
+  align-self: center;
+  width: 80%;
+}
+
+.tabs-container {
+  padding: 20px;
 }

docs/src/theme/DocSidebarItem/Link/index.js

@@ -6,7 +6,23 @@ import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import IconExternalLink from '@theme/Icon/ExternalLink';
 import styles from './styles.module.css';
-import { TbFaceIdError, TbTerminal2, TbCloud, TbServer, TbBolt, TbApps, TbTopologyStar, TbChartDots, TbBug, TbVocabulary, TbArrowBigRight, TbDeviceDesktop } from "react-icons/tb";
+import { 
+  TbFaceIdError,
+  TbTerminal2,
+  TbCloud,
+  TbServer,
+  TbBolt,
+  TbApps,
+  TbTopologyStar,
+  TbChartDots, 
+  TbBug,
+  TbVocabulary,
+  TbArrowBigRight,
+  TbDeviceDesktop,
+  TbBrandWindows,
+  TbBugOff,
+  TbBrandVscode,
+} from "react-icons/tb";
 
 
 export default function DocSidebarItemLink({
@@ -31,6 +47,9 @@ export default function DocSidebarItemLink({
     'TbChartDots': TbChartDots,
     'TbBug': TbBug,
     'TbVocabulary': TbVocabulary,
+    'TbBrandWindows': TbBrandWindows,
+    'TbBugOff': TbBugOff,
+    'TbBrandVscode': TbBrandVscode,
     'TbDeviceDesktop': TbDeviceDesktop,
   };
 

infra/dev/docker-compose.yml

@@ -28,7 +28,7 @@ services:
     volumes:
     - db_data:/var/lib/postgresql/data
     environment:
-      POSTGRES_PASSWORD: postgrespassword
+      POSTGRES_PASSWORD: twenty
     ports:
       - "5432:5432"
 volumes:

infra/dev/postgres/init.sql

@@ -3,3 +3,6 @@ CREATE DATABASE "default";
 
 -- Create the tests database for e2e testing
 CREATE DATABASE "test";
+
+-- Create a twenty user
+CREATE USER twenty PASSWORD 'twenty';

packages/twenty-cli/src/install/contribute/local/no-docker.ts

@@ -20,7 +20,7 @@ export const noDockerQuestion2: PromptObject<string>[] = [
   {
     type: 'text',
     name: 'postgres_string',
-    initial: 'postgres://postgres:postgrespassword@postgres:5432/default',
+    initial: 'postgres://twenty:twenty@postgres:5432/default',
     message:
       'Since you are not using Docker, you need to bring your own database, please enter your postgres connection string.',
   },
@@ -68,7 +68,7 @@ export const askNoDockerQuestions: () => Promise<void> = async () => {
         connectionStringResponse = await prompts({
           type: 'text',
           name: 'postgres_string',
-          initial: 'postgres://postgres:postgrespassword@postgres:5432/default',
+          initial: 'postgres://twenty:twenty@postgres:5432/default',
           message:
             'Connection to Postgres failed. Please enter the string again',
         });

server/.env.example

@@ -1,7 +1,7 @@
 # Use this for local setup
-PG_DATABASE_URL=postgres://postgres:postgrespassword@localhost:5432/default?connection_limit=1
+PG_DATABASE_URL=postgres://twenty:twenty@localhost:5432/default?connection_limit=1
 # Use this for docker setup
-# PG_DATABASE_URL=postgres://postgres:postgrespassword@postgres:5432/default?connection_limit=1
+# PG_DATABASE_URL=postgres://twenty:twenty@postgres:5432/default?connection_limit=1
 
 FRONT_BASE_URL=http://localhost:3001
 ACCESS_TOKEN_SECRET=replace_me_with_a_random_string

server/.env.test

@@ -1,5 +1,8 @@
 DEBUG_MODE=true
-PG_DATABASE_URL=postgres://postgres:postgrespassword@localhost:5432/test?connection_limit=1
+PG_DATABASE_URL=postgres://twenty:twenty@localhost:5432/test?connection_limit=1
+# Use this for docker setup
+# PG_DATABASE_URL=postgres://twenty:twenty@postgres:5432/default?connection_limit=1
+
 # the URL of the front-end app
 FRONT_BASE_URL=http://localhost:3001
 # random keys used to generate JWT tokens