Migrated Developer Docs (#5683)
- Migrated developer docs to Twenty website - Modified User Guide and Docs layout to include sections and subsections **Section Example:** <img width="549" alt="Screenshot 2024-05-30 at 15 44 42" src="https://github.com/twentyhq/twenty/assets/102751374/41bd4037-4b76-48e6-bc79-48d3d6be9ab8"> **Subsection Example:** <img width="557" alt="Screenshot 2024-05-30 at 15 44 55" src="https://github.com/twentyhq/twenty/assets/102751374/f14c65a9-ab0c-4530-b624-5b20fc00511a"> - Created different components (Tabs, Tables, Editors etc.) for the mdx files **Tabs & Editor** <img width="665" alt="Screenshot 2024-05-30 at 15 47 39" src="https://github.com/twentyhq/twenty/assets/102751374/5166b5c7-b6cf-417d-9f29-b1f674c1c531"> **Tables** <img width="698" alt="Screenshot 2024-05-30 at 15 57 39" src="https://github.com/twentyhq/twenty/assets/102751374/2bbfe937-ec19-4004-ab00-f7a56e96db4a"> <img width="661" alt="Screenshot 2024-05-30 at 16 03 32" src="https://github.com/twentyhq/twenty/assets/102751374/ae95b47c-dd92-44f9-b535-ccdc953f71ff"> - Created a crawler for Twenty Developers (now that it will be on the twenty website). Once this PR is merged and the website is re-deployed, we need to start crawling and make sure the index name is ‘twenty-developer’ - Added a dropdown menu in the header to access User Guide and Developers + added Developers to footer https://github.com/twentyhq/twenty/assets/102751374/1bd1fbbd-1e65-4461-b18b-84d4ddbb8ea1 - Made new layout responsive Please fill in the information for each mdx file so that it can appear on its card, as well as in the ‘In this article’ section. Example with ‘Getting Started’ in the User Guide: <img width="786" alt="Screenshot 2024-05-30 at 16 29 39" src="https://github.com/twentyhq/twenty/assets/102751374/2714b01d-a664-4ddc-9291-528632ee12ea"> Example with info and sectionInfo filled in for 'Getting Started': <img width="620" alt="Screenshot 2024-05-30 at 16 33 57" src="https://github.com/twentyhq/twenty/assets/102751374/bc69e880-da6a-4b7e-bace-1effea866c11"> Please keep in mind that the images that are being used for Developers are the same as those found in User Guide and may not match the article. --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Ady Beraud
233
packages/twenty-website/src/content/developers/local-setup.mdx
Normal file
233
packages/twenty-website/src/content/developers/local-setup.mdx
Normal file
@ -0,0 +1,233 @@
|
||||
---
|
||||
title: Local Setup
|
||||
icon: TbDeviceDesktop
|
||||
image: /images/user-guide/fields/field.png
|
||||
info: Mostly for contributors or curious developers
|
||||
---
|
||||
|
||||
|
||||
Follow this guide if you would like to setup the project locally to contribute.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
<ArticleTabs label1="Linux and MacOS" label2="Windows (WSL)">
|
||||
<ArticleTab>
|
||||
|
||||
Before you can install and use Twenty, make sure you install the following on your computer:
|
||||
- [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
|
||||
- [Node v18](https://nodejs.org/en/download)
|
||||
- [yarn v4](https://yarnpkg.com/getting-started/install)
|
||||
- [nvm](https://github.com/nvm-sh/nvm/blob/master/README.md)
|
||||
|
||||
<ArticleWarning>
|
||||
`npm` won't work, you should use `yarn` instead. Yarn is now shipped with Node.js, so you don't need to install it separately.
|
||||
You only have to run `corepack enable` to enable Yarn if you haven't done it yet.
|
||||
</ArticleWarning>
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
1. Install WSL
|
||||
Open PowerShell as Administrator and run:
|
||||
```powershell
|
||||
wsl --install
|
||||
```
|
||||
You should now see a prompt to restart your computer. If not, restart it manually.
|
||||
|
||||
Upon restart, a powershell window will open and install Ubuntu. This may take up some time.
|
||||
You'll see a prompt to create a username and password for your Ubuntu installation.
|
||||
|
||||
2. Install and configure git
|
||||
|
||||
```bash
|
||||
sudo apt-get install git
|
||||
|
||||
git config --global user.name "Your Name"
|
||||
|
||||
git config --global user.email "youremail@domain.com"
|
||||
```
|
||||
|
||||
3. Install Node.js, nvm, yarn
|
||||
```bash
|
||||
sudo apt-get install curl
|
||||
|
||||
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
|
||||
|
||||
corepack enable
|
||||
```
|
||||
Close and reopen your terminal to start using nvm.
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Git Clone
|
||||
|
||||
In your terminal, run the following command.
|
||||
|
||||
|
||||
<ArticleTabs label1="SSH (Recommended)" label2="HTTPS">
|
||||
<ArticleTab>
|
||||
If you haven't already set up SSH keys, you can learn how to do so [here](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/about-ssh).
|
||||
```bash
|
||||
git clone git@github.com:twentyhq/twenty.git
|
||||
```
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
```bash
|
||||
git clone https://github.com/twentyhq/twenty.git
|
||||
```
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
## Step 2: Position yourself at the root
|
||||
|
||||
```bash
|
||||
cd twenty
|
||||
```
|
||||
|
||||
You should run all commands in the following steps from the root of the project.
|
||||
|
||||
## Step 3: Set up a PostgreSQL Database
|
||||
We rely on [pg_graphql](https://github.com/supabase/pg_graphql) and recommend you use the scripts below to provision a database with the right extensions.
|
||||
You can access the database at [localhost:5432](localhost:5432), with user `twenty` and password `twenty` .
|
||||
|
||||
<ArticleTabs label1="Linux" label2="Mac OS" label3="Windows (WSL)">
|
||||
<ArticleTab>
|
||||
<b>Option 1:</b> To provision your database locally:
|
||||
```bash
|
||||
make postgres-on-linux
|
||||
```
|
||||
|
||||
<b>Option 2:</b> If you have docker installed:
|
||||
```bash
|
||||
make postgres-on-docker
|
||||
```
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
<b>Option 1:</b> To provision your database locally with `brew`:
|
||||
```bash
|
||||
make postgres-on-macos-intel #for intel architecture
|
||||
|
||||
make postgres-on-macos-arm #for M1/M2/M3 architecture
|
||||
```
|
||||
|
||||
<b>Option 2:</b> If you have docker installed:
|
||||
```bash
|
||||
make postgres-on-docker
|
||||
```
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
<b>Option 1 :</b> To provision your database locally:
|
||||
```bash
|
||||
make postgres-on-linux
|
||||
```
|
||||
|
||||
Note: you might need to run `sudo apt-get install build-essential` before running the above command if you don't have the build tools installed.
|
||||
|
||||
<b>Option 2:</b> If you have docker installed:
|
||||
Running Docker on WSL adds an extra layer of complexity.
|
||||
Only use this option if you are comfortable with the extra steps involved, including turning on [Docker Desktop WSL2](https://docs.docker.com/desktop/wsl).
|
||||
```bash
|
||||
make postgres-on-docker
|
||||
```
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
## Step 4: 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
|
||||
|
||||
<ArticleWarning>
|
||||
|
||||
Use `nvm` to install the correct `node` version. The `.nvmrc` ensures all contributors use the same version.
|
||||
|
||||
</ArticleWarning>
|
||||
|
||||
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
|
||||
|
||||
Setup your database with the following command:
|
||||
```bash
|
||||
npx nx database:reset twenty-server
|
||||
```
|
||||
|
||||
Start the server and the frontend:
|
||||
```bash
|
||||
npx nx start twenty-server
|
||||
|
||||
npx nx start twenty-front
|
||||
```
|
||||
|
||||
Alternatively, you can start both applications at once:
|
||||
```bash
|
||||
npx nx start
|
||||
```
|
||||
|
||||
Twenty's server will be up and running at [http://localhost:3000/graphql](http://localhost:3000/graphql).
|
||||
Twenty's frontend will be running at [http://localhost:3001](http://localhost:3001). Just login using the seeded demo account: `tim@apple.dev` (password: `Applecar2025`) to start using Twenty.
|
||||
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
#### CR line breaks found [Windows]
|
||||
|
||||
This is due to the line break characters of Windows and the git configuration. Try running:
|
||||
|
||||
```
|
||||
git config --global core.autocrlf false
|
||||
```
|
||||
|
||||
Then delete the repository and clone it again.
|
||||
|
||||
#### Missing metadata schema
|
||||
|
||||
During Twenty installation, you need to provision your postgres database with the right schemas, extensions, and users.
|
||||
If you're successful in running this provisioning, you should have `default` and `metadata` schemas in your database.
|
||||
If you don't, make sure you don't have more than one postgres instance running on your computer.
|
||||
|
||||
#### Cannot find module 'twenty-emails' or its corresponding type declarations.
|
||||
|
||||
You have to build the package `twenty-emails` before running the initialization of the database with `npx nx run twenty-emails:build`
|
||||
|
||||
#### Missing twenty-x package
|
||||
|
||||
Make sure to run yarn in the root directory and then run `npx nx server:dev twenty-server`. If this still doesn't work try building the missing package manually.
|
||||
|
||||
#### Lint on Save not working
|
||||
|
||||
This should work out of the box with the eslint extension installed. If this doens't work try adding this to your vscode setting (on the dev container scope):
|
||||
|
||||
```
|
||||
"editor.codeActionsOnSave": {
|
||||
|
||||
"source.fixAll.eslint": "explicit"
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
#### Docker container build
|
||||
|
||||
To successfully build Docker images, ensure that your system has a minimum of 2GB of memory available. For users of Docker Desktop, please verify that you've allocated sufficient resources to Docker within the application's settings.
|
||||
Reference in New Issue
Block a user