Add redis to contributor guide (twentyhq#7369)

## Context We are adding redis to default twenty configuration. ## What 1. This PR sets up the local setup for contributors accordingly 2. I'm also updating the code blocks guide: Before: <img width="921" alt="image" src="https://github.com/user-attachments/assets/2203cc99-b5a5-4d05-a8b1-98a348aee9df"> After: <img width="921" alt="image" src="https://github.com/user-attachments/assets/5b3e6f34-723d-4309-888b-c02ce794891d">
harshit078 · Oct 14, 2024 · 9e8f366 · 9e8f366
1 parent 3eba8ea
commit 9e8f366
Show file tree

Hide file tree

Showing 6 changed files with 217 additions and 4,306 deletions.
diff --git a/package.json b/package.json
@@ -10,8 +10,6 @@
     "@blocknote/react": "^0.15.3",
     "@codesandbox/sandpack-react": "^2.13.5",
     "@dagrejs/dagre": "^1.1.2",
-    "@docusaurus/core": "^3.1.0",
-    "@docusaurus/preset-classic": "^3.1.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@envelop/on-resolve": "^4.1.0",
@@ -77,13 +75,13 @@
     "class-transformer": "^0.5.1",
     "clsx": "^2.1.1",
     "cross-env": "^7.0.3",
+    "css-loader": "^7.1.2",
     "danger-plugin-todos": "^1.3.1",
     "dataloader": "^2.2.2",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
     "debounce": "^2.0.0",
     "deep-equal": "^2.2.2",
-    "docusaurus-node-polyfills": "^1.0.0",
     "dompurify": "^3.0.11",
     "dotenv-cli": "^7.2.1",
     "drizzle-orm": "^0.29.3",
@@ -198,8 +196,6 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.24.6",
     "@crxjs/vite-plugin": "^1.0.14",
-    "@docusaurus/module-type-aliases": "^3.1.0",
-    "@docusaurus/tsconfig": "3.1.0",
     "@graphql-codegen/cli": "^3.3.1",
     "@graphql-codegen/client-preset": "^4.1.0",
     "@graphql-codegen/typescript": "^3.0.4",

diff --git a/packages/twenty-website/package.json b/packages/twenty-website/package.json
@@ -14,6 +14,8 @@
     "database:generate:pg": "npx drizzle-kit generate:pg --config=src/database/drizzle-posgres.config.ts"
   },
   "dependencies": {
+    "@docsearch/react": "^3.6.2",
+    "gray-matter": "^4.0.3",
     "next-runtime-env": "^3.2.2",
     "postgres": "^3.4.3"
   }

diff --git a/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleContent.tsx b/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleContent.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { ReactNode } from 'react';
 import styled from '@emotion/styled';
+import { ReactNode } from 'react';
 
 import { Theme } from '@/app/_components/ui/theme/theme';
 import { wrapHeadingsWithAnchor } from '@/shared-utils/wrapHeadingsWithAnchor';
@@ -17,6 +17,21 @@ const StyledContent = styled.div`
     max-width: 100%;
     line-height: 1.8;
     color: black;
+    padding: 4px;
+    border-radius: 4px;
+    background: #1414140a;
+  }
+
+  pre {
+    background: #1414140a;
+    padding: 4px;
+    border-radius: 4px;
+
+    code {
+      padding: 0;
+      border-radius: 0;
+      background: none;
+    }
   }
 
   p {

diff --git a/packages/twenty-website/src/app/layout.css b/packages/twenty-website/src/app/layout.css
@@ -124,9 +124,3 @@ strong,
     font-weight: 500;
     text-decoration: none;
 }
-
-code {
-    background: #1414140a;
-    padding: 4px;
-    border-radius: 4px;
-  }
diff --git a/packages/twenty-website/src/content/developers/local-setup.mdx b/packages/twenty-website/src/content/developers/local-setup.mdx
@@ -122,6 +122,8 @@ You can access the database at [localhost:5432](localhost:5432), with user `twen
     ```
   </ArticleTab>
   <ArticleTab>
+    All the following steps are to be run in the WSL terminal (within your virtual machine)
+
     <b>Option 1 :</b> To provision your database locally:
     ```bash
     make postgres-on-linux
@@ -138,19 +140,35 @@ You can access the database at [localhost:5432](localhost:5432), with user `twen
   </ArticleTab>
 </ArticleTabs>
 
+## Step 4: Set up a Redis Database (cache)
+Twenty requires a redis cache to provide the best performances
+
+<ArticleTabs label1="Linux" label2="Mac OS" label3="Windows (WSL)">
+  <ArticleTab>
+    Use the following link to install Redis on your Linux machine: [Redis Installation](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-linux/)
+  </ArticleTab>
+  <ArticleTab>
+    To provision your database locally with `brew`:
+    ```bash
+    brew install redis
+    ```
+  </ArticleTab>
+  <ArticleTab>
+    Use the following link to install Redis on your Linux virtual machine: [Redis Installation](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-linux/)
+  </ArticleTab>
+</ArticleTabs>
 
-## Step 4: Setup environment variables
+## Step 5: Setup environment variables
 
 Use environment variables or `.env` files to configure your project.
 
 Copy the `.env.example` files in `/front` and `/server`:
 ```bash
 cp ./packages/twenty-front/.env.example ./packages/twenty-front/.env
-
 cp ./packages/twenty-server/.env.example ./packages/twenty-server/.env
 ```
 
-## Step 5: Installing dependencies
+## Step 6: Installing dependencies
 
 <ArticleWarning>
 
@@ -161,13 +179,11 @@ Use `nvm` to install the correct `node` version. The `.nvmrc` ensures all contri
 To build Twenty server and seed some data into your database, run the following commands:
 ```bash
 nvm install # installs recommended node version
-
 nvm use # use recommended node version
-
 yarn
 ```
 
-## Step 6: Running the project
+## Step 7: Running the project
 
 Setup your database with the following command:
 ```bash
@@ -177,7 +193,6 @@ npx nx database:reset twenty-server
 Start the server and the frontend:
 ```bash
 npx nx start twenty-server
-
 npx nx start twenty-front
 ```