mirror of
https://github.com/lingble/twenty.git
synced 2025-10-29 11:52:28 +00:00
Revised contributing.md, edited docs (#1951)
* Added Overview page * Revised Getting Started page * Minor revision * Edited readme, minor modifications to docs * Removed sweep.yaml, .devcontainer, .ergomake * Moved security.md to .github, added contributing.md * changes as per code review * updated contributing.md * fixed broken links & added missing links in doc, improved structure * fixed link in wsl setup * fixed server link, added https cloning in yarn-setup
This commit is contained in:
Nimra Ahmed
65
.github/CONTRIBUTING.md
vendored
65
.github/CONTRIBUTING.md
vendored
@@ -1,72 +1,81 @@
|
||||
# Contributing to Twenty
|
||||
|
||||
Thank you for considering contributing to Twenty! We welcome contributions from the community to help us build and improve our open-source CRM platform. This guide outlines the process for contributing to our project.
|
||||
|
||||
Thank you for considering contributing to Twenty! We welcome all types of contributions from the community to help us build and improve our open-source CRM platform. This guide outlines the process for contributing to our project. Please make sure to go through the [documentation](https://docs.twenty.com) before making your contribution.
|
||||
|
||||
|
||||
> And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about:
|
||||
> - Star the project
|
||||
> - Tweet about it
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
Before you start contributing, please take a moment to review the following resources:
|
||||
Good first issues are a great way to start contributing to the project and get familiar with the codebase. Here's how to find them:
|
||||
|
||||
- [Twenty Repository](https://github.com/twentyhq/twenty): The main repository where development takes place.
|
||||
- [Documentation](https://docs.twenty.com): Our project documentation to understand the project structure and guidelines.
|
||||
1. Visit the "[Issues](https://github.com/twentyhq/twenty/issues)" tab on our [repository](https://github.com/twentyhq/twenty).
|
||||
2. Use the "Labels" filter and select "[Good First Issue](https://github.com/twentyhq/twenty/labels/good%20first%20issue)" to see a list of beginner-friendly tasks.
|
||||
3. Choose an issue that interests you, fork the project, and start working on it. Once you solve and test the issue, open a PR and we'll review it.
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
## Contributing Guidelines
|
||||
|
||||
|
||||
1. **Fork the Repository:** Click on the 'Fork' button in the upper right corner of the repository's GitHub page. This will create a copy of the repository in your GitHub account.
|
||||
|
||||
|
||||
2. **Clone the Repository:** Clone your forked repository to your local machine using `git clone`.
|
||||
|
||||
|
||||
```shell
|
||||
git clone https://github.com/yourusername/twenty.git
|
||||
cd twenty
|
||||
```
|
||||
|
||||
3. **Create a Branch:** Create a new branch for your contribution with a descriptive name.
|
||||
```shell
|
||||
git checkout -b feature/your-feature-name
|
||||
```
|
||||
|
||||
4. **Make Changes:** Make your desired changes and ensure that your code adheres to our coding standards.
|
||||
3. **Make Changes:** Make your desired changes and ensure that your code adheres to our coding standards.
|
||||
|
||||
5. **Test Locally:** Test your changes locally to ensure they work as expected.
|
||||
|
||||
6. **Commit Changes:** Commit your changes with a clear and concise commit message.
|
||||
4. **Test Locally:** Test your changes locally to ensure they work as expected.
|
||||
|
||||
|
||||
5. **Commit Changes:** Commit your changes with a clear and concise commit message.
|
||||
|
||||
|
||||
```shell
|
||||
Copy code
|
||||
git commit -m "Add your detailed description here"
|
||||
```
|
||||
7. **Push Changes:** Push your changes to your forked repository.
|
||||
6. **Push Changes:** Push your changes to your forked repository.
|
||||
|
||||
|
||||
```shell
|
||||
git push origin feature/your-feature-name
|
||||
git push origin branch-name
|
||||
```
|
||||
|
||||
8. **Create a Pull Request:** Go to the original Twenty repository and create a pull request. Please provide a detailed description of your changes.
|
||||
|
||||
9. **Code Review:** Your pull request will undergo a code review. Be prepared to make any necessary adjustments based on feedback.
|
||||
7. **Create a Pull Request:** Go to the original Twenty repository and create a pull request. Please provide a detailed description of your changes. To accept your pull request, we need you to sign a CLA.
|
||||
|
||||
|
||||
8. **Code Review:** Your pull request will undergo a code review. Be prepared to make any necessary adjustments based on feedback.
|
||||
|
||||
|
||||
9. **Merge:** Once your pull request is approved, it will be merged into the main repository.
|
||||
|
||||
10. **Merge:** Once your pull request is approved, it will be merged into the main repository.
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
## Reporting Issues
|
||||
|
||||
|
||||
If you encounter any issues or have suggestions for improvements, please feel free to create an issue on our GitHub repository. When reporting issues, please provide as much detail as possible to help us understand and address the problem effectively.
|
||||
|
||||
<br>
|
||||
---
|
||||
|
||||
## Code of Conduct
|
||||
Thank you for considering contributing to Twenty. Your contributions help us make our CRM platform even better!
|
||||
|
||||
Please note that by contributing to this project, you are expected to follow our Code of Conduct. We strive to maintain a welcoming and inclusive community for all contributors.
|
||||
|
||||
<br>
|
||||
|
||||
## License
|
||||
|
||||
By contributing to Twenty, you agree that your contributions will be licensed under the [AGPL-3.0 License](https://github.com/twentyhq/twenty/blob/main/LICENSE).
|
||||
|
||||
Thank you for considering contributing to Twenty. Your contributions help us make our CRM platform even better!
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -2,4 +2,4 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
# yarn is the recommended package manager across the project
|
||||
.package-lock.json
|
||||
.package-lock.json
|
||||
2
docs/.gitignore
vendored
2
docs/.gitignore
vendored
@@ -18,3 +18,5 @@
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
package-lock.json
|
||||
@@ -1,10 +1,11 @@
|
||||
---
|
||||
title: Best Practices
|
||||
sidebar_position: 3
|
||||
sidebar_custom_props:
|
||||
icon: TbChecklist
|
||||
---
|
||||
|
||||
# Best practices
|
||||
This document outlines the best practices you should follow when working on the frontend.
|
||||
|
||||
## State management
|
||||
|
||||
@@ -14,7 +15,7 @@ We use React and Recoil for state management.
|
||||
|
||||
We recommend that you create as many atoms as you need to store your state.
|
||||
|
||||
Rule of thumb : It's better to be using too many atoms than trying to be too concise with props drilling.
|
||||
**Rule of thumb:** It's better to use additional atoms than trying to be too concise with props drilling.
|
||||
|
||||
```tsx
|
||||
export const myAtomState = atom({
|
||||
@@ -50,13 +51,13 @@ Re-renders can be hard to manage in React.
|
||||
|
||||
We provide you with some rules that we follow to avoid unnecessary re-renders.
|
||||
|
||||
Keep in mind that re-renders can **always** be avoided by understanding the cause of the re-render.
|
||||
Keep in mind that re-renders can **always** be avoided by understanding their cause.
|
||||
|
||||
### Work at the root level
|
||||
|
||||
We made it easy for you to avoid re-renders in new features by taking care of eliminating them at the root level.
|
||||
|
||||
There's only one `useEffect` in the sidecar component `PageChangeEffect` that is holding all the logic that should be executed on a page change.
|
||||
There's only one `useEffect` in the sidecar component `PageChangeEffect` that holds all the logic that should be executed on a page change.
|
||||
|
||||
That way you know that there's only one place that can trigger a re-render.
|
||||
|
||||
@@ -64,13 +65,13 @@ That way you know that there's only one place that can trigger a re-render.
|
||||
|
||||
Re-renders are often caused by unnecessary `useEffect`.
|
||||
|
||||
You should think whether the useEffect is really needed, or if you can move the logic in a event handler function.
|
||||
You should think whether the `useEffect` is really needed, or if you can move the logic in a event handler function.
|
||||
|
||||
You'll find it generally easy to move the logic in a `handleClick` or `handleChange` function.
|
||||
|
||||
You can also find them in libraries like Apollo : `onCompleted`, `onError`, etc.
|
||||
You can also find them in libraries like Apollo: `onCompleted`, `onError`, etc.
|
||||
|
||||
### Use a sibling component to extract useEffect or data fetching logic
|
||||
### Use a sibling component to extract `useEffect` or data fetching logic
|
||||
|
||||
If you feel like you need to add a `useEffect` in your root component, you should consider extracting it in a sidecar component.
|
||||
|
||||
@@ -137,7 +138,7 @@ They are especially useful when you need to store a list of items.
|
||||
|
||||
### You shouldn't use `React.memo(MyComponent)`
|
||||
|
||||
We do not recommend `React.memo()` usage because it does not solve the cause of the re-render, but instead breaks the re-render chain, which can lead to unexpected behavior and make the code really hard to refactor.
|
||||
We do not recommend using `React.memo()` because it does not solve the cause of the re-render, but instead breaks the re-render chain, which can lead to unexpected behavior and make the code really hard to refactor.
|
||||
|
||||
### Limit `useCallback` or `useMemo` usage
|
||||
|
||||
@@ -155,6 +156,8 @@ They are often not necessary and will make the code harder to read and maintain
|
||||
|
||||
4. **Professionalism**: End users or clients checking the console and seeing a myriad of log statements might question the code's quality and polish.
|
||||
|
||||
Make sure you remove all `console.logs` before pushing the code to production.
|
||||
|
||||
## Naming
|
||||
|
||||
### Variable Naming
|
||||
@@ -181,7 +184,7 @@ const [email, setEmail] = useState('');
|
||||
|
||||
### Event handlers
|
||||
|
||||
Event handler names should start with `handle`, `on` is a prefix used to name events in components props
|
||||
Event handler names should start with `handle`, while `on` is a prefix used to name events in components props
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -201,9 +204,9 @@ const handleEmailChange = (val: string) => {
|
||||
|
||||
Avoid supplying the default value for an optional prop, as it generally doesn’t contribute significantly.
|
||||
|
||||
EXAMPLE
|
||||
**EXAMPLE**
|
||||
|
||||
Assume, we have the `EmailField` component defined below
|
||||
Assume, we have the `EmailField` component defined below:
|
||||
|
||||
```tsx
|
||||
type EmailFieldProps = {
|
||||
@@ -216,7 +219,7 @@ const EmailField = ({ value, disabled = false }: EmailFieldProps) => (
|
||||
);
|
||||
```
|
||||
|
||||
USAGE
|
||||
**USAGE**
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, passing in the same value as the default value adds no value
|
||||
@@ -232,7 +235,7 @@ const Form = () => <EmailField value="username@email.com" />;
|
||||
|
||||
Try as much as possible to pass uninstanciated components as props, so chilren can decide on their own of what props they need to pass.
|
||||
|
||||
The most common example for that is icon components :
|
||||
The most common example for that is icon components:
|
||||
|
||||
```tsx
|
||||
const SomeParentComponent = () => <MyComponent Icon={MyIcon} />;
|
||||
@@ -261,13 +264,13 @@ Prop drilling, in the React context, refers to the practice of passing state var
|
||||
|
||||
3. **Reduced Component Reusability**: A component receiving numerous props solely for the purpose of passing them down becomes less general-purpose and harder to reuse in different contexts.
|
||||
|
||||
If you feel that you are using excessive prop drilling, see [state management best practices](/contributor/frontend/advanced/best-practices#state-management)
|
||||
If you feel that you are using excessive prop drilling, see [state management best practices](/contributor/frontend/advanced/best-practices#state-management).
|
||||
|
||||
## Imports
|
||||
|
||||
When importing, opt for the designated aliases rather than specifying complete or relative paths.
|
||||
|
||||
THE ALIASES
|
||||
**THE ALIASES**
|
||||
|
||||
```js
|
||||
{
|
||||
@@ -279,7 +282,7 @@ THE ALIASES
|
||||
}
|
||||
```
|
||||
|
||||
USAGE
|
||||
**USAGE**
|
||||
```tsx
|
||||
// ❌ Bad, specifies the entire relative path
|
||||
import {
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
---
|
||||
title: Hotkeys
|
||||
sidebar_position: 11
|
||||
sidebar_custom_props:
|
||||
icon: TbKeyboard
|
||||
---
|
||||
|
||||
# Hotkeys
|
||||
|
||||
You can intercept any hotkey combination and execute a custom action.
|
||||
|
||||
We added a thin wrapper on top of [react-hotkeys-hook](https://react-hotkeys-hook.vercel.app/docs/intro) to make it more performant and to avoid unnecessary re-renders.
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
---
|
||||
title: Style Guide
|
||||
sidebar_position: 4
|
||||
sidebar_custom_props:
|
||||
icon: TbPencil
|
||||
---
|
||||
|
||||
# Style guide
|
||||
|
||||
We define here the rules to follow when writing code.
|
||||
|
||||
Our goal is to have a consistent codebase, easy to read and easy to maintain.
|
||||
Our goal is to have a consistent codebase, which is easy to read and easy to maintain.
|
||||
|
||||
For this we prefer to tend towards being a bit more verbose than being too concise.
|
||||
|
||||
@@ -22,7 +21,7 @@ There are a lot of rules that are not defined here, but that are automatically c
|
||||
|
||||
Always use TSX functional components.
|
||||
|
||||
Do not use default import with const, because it's harder to read and harder to import with code completion.
|
||||
Do not use default `import` with `const`, because it's harder to read and harder to import with code completion.
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, harder to read, harder to import with code completion
|
||||
@@ -135,9 +134,9 @@ onClick?.();
|
||||
|
||||
## TypeScript
|
||||
|
||||
### Use type instead of Interface
|
||||
### Use `type` instead of `Interface`
|
||||
|
||||
We decided to always use type instead of interface, because they almost always overlap, and type is more flexible.
|
||||
We decided to always use `type` instead of `interface`, because they almost always overlap, and `type` is more flexible.
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -155,7 +154,7 @@ type MyType = {
|
||||
|
||||
[String literals](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#literal-types) are the go-to way to handle enum-like values in TypeScript. They are easier to extend with Pick and Omit, and offer a better developer experience, especially with code completion.
|
||||
|
||||
You can see why TypeScript recommend avoiding enums here : https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#enums
|
||||
You can see why TypeScript recommend avoiding enums [here](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#enums).
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, utilizes an enum
|
||||
@@ -179,7 +178,7 @@ We recommend using enums that are generated by GraphQL codegen.
|
||||
|
||||
We also recommend using an enum when using an internal lib, so the internal lib doesn't have to expose a string literal type that is not related to the internal API.
|
||||
|
||||
Example :
|
||||
Example:
|
||||
|
||||
```TSX
|
||||
const {
|
||||
|
||||
@@ -57,28 +57,6 @@ A context is a way to pass data through the component tree without having to pas
|
||||
|
||||
See [React Context](https://react.dev/reference/react#context-hooks) for more details
|
||||
|
||||
### States
|
||||
|
||||
Contains the state management logic. We use [RecoilJS](https://recoiljs.org) for this.
|
||||
|
||||
- Selectors
|
||||
|
||||
See [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) for more details.
|
||||
|
||||
- Recoil Scope Contexts
|
||||
|
||||
More details will be added soon.
|
||||
|
||||
We still use React's built-in state management for state that is only used within a component.
|
||||
|
||||
### Hooks
|
||||
|
||||
See [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) for more details.
|
||||
|
||||
### Utils
|
||||
|
||||
Should only contain reusable pure functions. Otherwise, create custom hooks in the `hooks` folder.
|
||||
|
||||
### GraphQL
|
||||
|
||||
Includes fragments, queries, and mutations.
|
||||
@@ -87,17 +65,36 @@ See [GraphQL](https://graphql.org/learn/) for more details.
|
||||
|
||||
- Fragments
|
||||
|
||||
A fragment is a reusable piece of a query, which can be used in multiple places. By using fragments, it is easier to avoid duplicating code.
|
||||
A fragment is a reusable piece of a query, which can be used in multiple places. By using fragments, it is easier to avoid duplicating code.
|
||||
|
||||
See [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) for more details.
|
||||
See [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) for more details.
|
||||
|
||||
- Queries
|
||||
|
||||
See [GraphQL Queries](https://graphql.org/learn/queries/) for more details.
|
||||
See [GraphQL Queries](https://graphql.org/learn/queries/) for more details.
|
||||
|
||||
- Mutations
|
||||
|
||||
See [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) for more details.
|
||||
See [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) for more details.
|
||||
|
||||
### Hooks
|
||||
|
||||
See [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) for more details.
|
||||
|
||||
### States
|
||||
|
||||
Contains the state management logic. We use [RecoilJS](https://recoiljs.org) for this.
|
||||
|
||||
- Selectors: See [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) for more details.
|
||||
|
||||
- Recoil Scope Contexts: More details will be added soon.
|
||||
|
||||
We still use React's built-in state management for state that is only used within a component.
|
||||
|
||||
### Utils
|
||||
|
||||
Should only contain reusable pure functions. Otherwise, create custom hooks in the `hooks` folder.
|
||||
|
||||
|
||||
## UI
|
||||
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
---
|
||||
title: Overview
|
||||
sidebar_position: 0
|
||||
sidebar_custom_props:
|
||||
icon: TbEyeglass
|
||||
---
|
||||
|
||||
# Overview
|
||||
|
||||
## Tech Stack
|
||||
|
||||
We took care of having a clean and simple stack, with minimal boilerplate code.
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
---
|
||||
title: Work with Figma
|
||||
sidebar_position: 2
|
||||
sidebar_custom_props:
|
||||
icon: TbBrandFigma
|
||||
---
|
||||
|
||||
# Work with figma
|
||||
|
||||
Figma is a collaborative interface design tool that aids in bridging the communication barrier between designers and developers.
|
||||
In this guide, we'll go over how to collaborate with Twenty’s Figma.
|
||||
|
||||
@@ -30,7 +29,7 @@ With read-only access, you can't edit the design but you can access all features
|
||||
|
||||
### Use the Dev mode
|
||||
|
||||
Figma's Dev Mode enhances developers' productivity by providing easy design navigation, effective asset management, efficient communication tools, toolbox integrations, quick code snippets, and key layer information, bridging the gap between design and development. learn more at https://www.figma.com/dev-mode/
|
||||
Figma's Dev Mode enhances developers' productivity by providing easy design navigation, effective asset management, efficient communication tools, toolbox integrations, quick code snippets, and key layer information, bridging the gap between design and development. Learn more at https://www.figma.com/dev-mode/
|
||||
|
||||
Switch to the "Developer" mode in the right part of the toolbar to see design specs, copy CSS, and access assets.
|
||||
|
||||
@@ -41,7 +40,7 @@ Click on any element on the canvas and press the “Play” button at the top ri
|
||||
1. **Understanding transitions and animations:** In the Prototype mode, any transitions or animations added by a designer between screens or UI elements can be viewed, providing clear visual instructions to developers on the intended behavior and style.
|
||||
2. **Implementation Clarification:** A prototype can also be used to reduce ambiguities. Developers can interact with it to gain a better understanding of the functionality or appearance of particular elements.
|
||||
|
||||
For more comprehensive details and guidance on learning the Figma platform, you can visit the official Figma Documentation: https://help.figma.com/hc/en-us
|
||||
For more comprehensive details and guidance on learning the Figma platform, you can visit the official [Figma Documentation](https://help.figma.com/hc/en-us)
|
||||
|
||||
### Measure distances
|
||||
|
||||
|
||||
@@ -8,5 +8,4 @@ sidebar_custom_props:
|
||||
---
|
||||
|
||||
Welcome to the Frontend Development section of the documentation.
|
||||
Here you will find information about the frontend development process, the tools we use, and the best practices we follow.
|
||||
|
||||
Here you will find information about the frontend development process, the tools we use, and the best practices we follow.
|
||||
@@ -5,10 +5,6 @@ sidebar_custom_props:
|
||||
icon: TbVocabulary
|
||||
---
|
||||
|
||||
### Workspace
|
||||
A `Workspace` usually represents a company using Twenty.
|
||||
It is attached to a single domain name, which is usually the domain name your company uses for employee email addresses.
|
||||
|
||||
### Company & People
|
||||
They are the two fundamental types of records that the CRM is built around:
|
||||
- A `Company` represents a business or organization.
|
||||
@@ -18,3 +14,7 @@ They are the two fundamental types of records that the CRM is built around:
|
||||
A `Pipeline` is a way to track a business process. Pipelines are categorized within a *module* and have *stages*:
|
||||
- A **module** contains the logic for a certain business process (e.g. sales, recruiting).
|
||||
- **Stages** map the steps in your process (e.g. new, ongoing, won, lost).
|
||||
|
||||
### Workspace
|
||||
A `Workspace` usually represents a company using Twenty.
|
||||
It is attached to a single domain name, which is usually the domain name your company uses for employee email addresses.
|
||||
|
||||
@@ -5,14 +5,14 @@ sidebar_custom_props:
|
||||
icon: TbBrandDocker
|
||||
---
|
||||
|
||||
You can also provision the project with Docker. This comes with a few advantages:
|
||||
This guide will walk you through provisioning the project with Docker. This comes with a few advantages:
|
||||
- It provides the exact same environment as our core developer team.
|
||||
- It includes some additional dependencies (such as `playwright`) that you might need if you wish to contribute to some advanced areas of the project.
|
||||
- It provisions a PostgreSQL database.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Make sure you have the latest `Docker` and [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) versions installed on your computer.
|
||||
Make sure you have the latest [Docker](https://docs.docker.com/get-docker/) and [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) versions installed on your computer.
|
||||
|
||||
You can run `docker --version` to verify the installation.
|
||||
|
||||
@@ -46,7 +46,7 @@ PG_DATABASE_URL=postgres://twenty:twenty@postgres:5432/default?connection_limit=
|
||||
We provide an environment containerized with Docker and orchestrated with `docker-compose`.
|
||||
This installation method will also provision a PostgreSQL container.
|
||||
|
||||
**Note:** The configuration for the build is stored in the `infra/dev` folder, but you can run `make` commands directly from the root folder.
|
||||
> **Note:** The configuration for the build is stored in the `infra/dev` folder, but you can run `make` commands directly from the root folder.
|
||||
|
||||
```bash
|
||||
make build
|
||||
@@ -103,5 +103,5 @@ yarn prisma:reset
|
||||
|
||||
#### Docker throws errors while setting up local environment
|
||||
|
||||
If by any chance you will run into problems with Docker, you should change the `docker-compose` to `docker compose` in `./infra/dev/Makefile` as `docker-compose` is old version
|
||||
becoming slowly obsolete. (More info can be found [here](https://docs.docker.com/compose/migrate/))
|
||||
If by any chance you run into problems with Docker, you should change the `docker-compose` to `docker compose` in `./infra/dev/Makefile` as `docker-compose` is an old version
|
||||
that's becoming slowly obsolete. (More info can be found [here](https://docs.docker.com/compose/migrate/))
|
||||
|
||||
@@ -5,13 +5,14 @@ sidebar_custom_props:
|
||||
icon: TbBrandVscode
|
||||
---
|
||||
|
||||
This section will help you setup your IDE for the project. If you haven't setup your development environment, please refer to [Development Environment](/contributor/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.
|
||||
This section will help you setup your IDE for the project. If you haven't setup your development environment, please refer to our [local setup](/contributor/local-setup) section.
|
||||
|
||||
|
||||
## Visual Studio Code
|
||||
|
||||
You can 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.
|
||||
|
||||
|
||||
### 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.
|
||||
@@ -35,7 +36,7 @@ You can use the recommended extensions for the project. You will find them in `.
|
||||
|
||||
### Docker Setup
|
||||
|
||||
If you are using a [Docker setup](/contributor/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.
|
||||
If you are using a [Docker setup](/contributor/local-setup/docker-setup), you will need to run VSCode in the container. You can do that by opening the project, clicking on the `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/contributor/ide-start-dev-container.png" alt="Visual Studio Code: Open in container" width="90%" />
|
||||
@@ -44,8 +45,9 @@ If you are using a [Docker setup](/contributor/local-setup#docker-install), you
|
||||
<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.
|
||||
<br /><br />
|
||||
If you stop your containers, you will need to restart them before opening the project in VSCode again.
|
||||
|
||||
### Conclusion
|
||||
## Conclusion
|
||||
|
||||
You are all set to start developing the project. If you have any questions, feel free to reach out to us on [Discord](https://discord.com/invite/cx5n4Jzs57).
|
||||
You are all set to start contributing to the project. If you have any questions, feel free to reach out to us on [Discord](https://twenty.com/discord).
|
||||
@@ -12,16 +12,16 @@ Twenty is designed to be developer-friendly, and your local installation should
|
||||
|
||||
## Discord
|
||||
|
||||
If you have any questions or need help, you can join our [Discord](https://discord.com/invite/cx5n4Jzs57) server.
|
||||
If you have any questions or need help, you can join our [Discord](https://twenty.com/discord) server.
|
||||
|
||||
## MacOS and Linux users
|
||||
|
||||
We recommend using [yarn installation](/contributor/local-setup/yarn-setup) as this is the easiest way to get started.
|
||||
We also provide an easy way to run the project with [Docker](/contributor/local-setup/yarn-setup) that you can use if you are familiar with containerized environments.
|
||||
We also provide an easy way to run the project with [Docker](/contributor/local-setup/docker-setup) that you can use if you are familiar with containerized environments.
|
||||
|
||||
## Windows users
|
||||
|
||||
Windows users can install install the project through WSL2. We provide a [guide](/contributor/local-setup/wsl-setup) to help you get started.
|
||||
Windows users can install the project through WSL2. We provide a [guide](/contributor/local-setup/wsl-setup) to help you get started.
|
||||
|
||||
## Project structure
|
||||
|
||||
|
||||
@@ -5,12 +5,12 @@ sidebar_custom_props:
|
||||
icon: TbBrandWindows
|
||||
---
|
||||
|
||||
This document guides you through installing the project with WSL2.
|
||||
|
||||
## Install WSL
|
||||
|
||||
Open PowerShell as Administrator and run:
|
||||
|
||||
Install WSL. Follow https://learn.microsoft.com/en-us/windows/wsl/install
|
||||
|
||||
```powershell
|
||||
wsl --install
|
||||
```
|
||||
@@ -26,9 +26,7 @@ You will be prompted to create a username and password for your Ubuntu installat
|
||||
|
||||
## Setup your developer environment
|
||||
|
||||
### Install Git
|
||||
|
||||
Follow: https://learn.microsoft.com/en-us/windows/wsl/tutorials/wsl-git
|
||||
### Step #1: Install Git
|
||||
|
||||
```
|
||||
sudo apt-get install git
|
||||
@@ -40,9 +38,9 @@ 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
|
||||
>**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
|
||||
### Step #2: Install Node.js, nvm, Yarn
|
||||
|
||||
```bash
|
||||
sudo apt-get install curl
|
||||
@@ -50,9 +48,9 @@ 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:
|
||||
Close and reopen your terminal to start using nvm.
|
||||
|
||||
### Install Twenty project
|
||||
### Step #3: Install Twenty
|
||||
|
||||
You are ready to install Twenty project. Follow the [Yarn install guide](/contributor/local-setup#yarn-install-recommended) instructions.
|
||||
We don't recommend to use Docker on WSL as it adds an extra layer of complexity.
|
||||
Follow our [Yarn install guide](/contributor/local-setup/yarn-setup) to install Twenty.
|
||||
We don't recommend using Docker on WSL as it adds an extra layer of complexity.
|
||||
|
||||
@@ -7,8 +7,10 @@ sidebar_custom_props:
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
|
||||
In this document, you'll learn how to install the project using yarn. We recommend this method since it's the easiest way to get started but you can also run the project with [Docker](/contributor/local-setup/docker-setup) or [WSL2](/contributor/local-setup/wsl-setup).
|
||||
|
||||
**Note:** `npm` currently does not support local packages satisfactorily. We strongly recommend using `yarn` instead.
|
||||
|
||||
> **Note:** `npm` currently does not support local packages satisfactorily. We strongly recommend using `yarn` instead.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
@@ -16,22 +18,37 @@ Before you can install and use Twenty, make sure you install the following on yo
|
||||
- [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
|
||||
- [Node](https://nodejs.org/en/download)
|
||||
- [yarn](https://classic.yarnpkg.com/lang/en/docs/install/)
|
||||
- [nvm](https://github.com/nvm-sh/nvm/blob/master/README.md)
|
||||
|
||||
---
|
||||
|
||||
## Step #1: Git Clone
|
||||
|
||||
In your terminal, run the following command:
|
||||
In your terminal, run the following command.
|
||||
|
||||
```
|
||||
We recommend using SSH for this step. If you already haven't set up SSH keys, please do so first. You can learn more about it [here](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/about-ssh).
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="ssh" label="SSH (Recommended)" default>
|
||||
|
||||
```bash
|
||||
git clone git@github.com:twentyhq/twenty.git
|
||||
```
|
||||
</TabItem>
|
||||
<TabItem value="https" label="HTTPS (Not Recommended)" >
|
||||
|
||||
```bash
|
||||
git clone https://github.com/twentyhq/twenty.git
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
|
||||
## Step #2: Set up PostgreSQL Database
|
||||
You need to have a PostgreSQL database available to be able to use Twenty. If you already have one available, you can skip this step.
|
||||
|
||||
If you don't, you can provision one through `docker` using the following commands:
|
||||
If you don't, you can provision one through `docker`. With docker running, use the following commands:
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="docker" label="Docker" default>
|
||||
@@ -102,7 +119,7 @@ cp ./server/.env.example ./server/.env
|
||||
|
||||
## Step #4: 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.
|
||||
> **Note:** We recommend that you use `nvm` to install the correct `node` version. We have added a `server/.nvmrc` to ensure all contributors use the same version.
|
||||
|
||||
To build Twenty server and seed some data into your database, run the following commands:
|
||||
```bash
|
||||
@@ -114,11 +131,11 @@ yarn prisma:reset
|
||||
yarn start:dev
|
||||
```
|
||||
|
||||
Twenty's server will be up and running at [http://localhost:3000](http://localhost:3000).
|
||||
Twenty's server will be up and running at [http://localhost:3000/graphql](http://localhost:3000/graphql).
|
||||
|
||||
## Step #5: Frontend setup
|
||||
|
||||
**Note:** For the frontend setup, too, we recommend using `nvm` to install the right node version.
|
||||
> **Note:** For the frontend setup, too, we recommend using `nvm` to install the right node version.
|
||||
To set up the frontend, run the following commands in your terminal:
|
||||
|
||||
```bash
|
||||
|
||||
@@ -5,5 +5,6 @@ sidebar_custom_props:
|
||||
icon: TbEyeglass
|
||||
---
|
||||
|
||||
We use NestJS on the backend.
|
||||
|
||||
WIP
|
||||
More details coming Soon
|
||||
@@ -6,3 +6,7 @@ sidebar_custom_props:
|
||||
icon: TbTerminal2
|
||||
isSidebarRoot: true
|
||||
---
|
||||
|
||||
Welcome to the Backend Development section of the documentation.
|
||||
|
||||
Here you will find information about the development process, the tools we use, and the best practices we follow.
|
||||
@@ -1,11 +1,10 @@
|
||||
---
|
||||
title: Self-Hosting
|
||||
sidebar_custom_props:
|
||||
icon: TbServer
|
||||
---
|
||||
# Self-hosting
|
||||
|
||||
Right now, Docker containers are the only hosting option we support. However we are actively working on providing simple options to self-host Twenty.
|
||||
Feel free to open issues on [Github](https://github.com/twentyhq/twenty) if you want a specific cloud provider to be supported.
|
||||
Right now, Docker containers are the only hosting option we support. However, we are actively working on providing simple options to self-host Twenty.
|
||||
Feel free to open issues on [Github](https://github.com/twentyhq/twenty/issues) if you want a specific cloud provider to be supported.
|
||||
|
||||
Refer to this list to see what future options will be available.
|
||||
|
||||
@@ -39,7 +38,7 @@ docker build \
|
||||
[](https://render.com/deploy?repo=https://github.com/twentyhq/twenty)
|
||||
|
||||
|
||||
## AWS Elastic Beanstalk (soon)
|
||||
## AWS Elastic Beanstalk (Coming soon)
|
||||
|
||||
We are working on providing a joint Docker image - containing both the Twenty frontend and server - that you can deploy using [AWS Elastic Beanstalk](https://aws.amazon.com/elasticbeanstalk/).
|
||||
|
||||
|
||||
@@ -6,9 +6,8 @@ sidebar_custom_props:
|
||||
---
|
||||
|
||||
## Reporting Bugs
|
||||
Please create an issue on Github: [https://github.com/twentyhq/twenty/issues/new](https://github.com/twentyhq/twenty/issues/new)
|
||||
To report a bug, please [create an issue on Github](https://github.com/twentyhq/twenty/issues/new).
|
||||
|
||||
## Feature Requests
|
||||
|
||||
If you're not sure it's a bug and you feel it's closer to a feature request, then you should probably open a discussion instead:
|
||||
[https://github.com/twentyhq/twenty/discussions/new](https://github.com/twentyhq/twenty/discussions/new)
|
||||
If you're not sure it's a bug and you feel it's closer to a feature request, then you should probably [open a discussion instead](https://github.com/twentyhq/twenty/discussions/new).
|
||||
|
||||
39
docs/package-lock.json
generated
39
docs/package-lock.json
generated
@@ -14,6 +14,7 @@
|
||||
"clsx": "^1.2.1",
|
||||
"graphiql": "^2.4.7",
|
||||
"graphql": "^16.6.0",
|
||||
"iframe-resizer-react": "^1.1.0",
|
||||
"prism-react-renderer": "^1.3.5",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
@@ -7694,6 +7695,36 @@
|
||||
"postcss": "^8.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/iframe-resizer": {
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmjs.org/iframe-resizer/-/iframe-resizer-4.3.7.tgz",
|
||||
"integrity": "sha512-a3EGVScU9NtUpj6lWvGhVw3EfOw5AopRs5xGsQU385kWdgQt++OsD6PCnTV+8YkgBu/g28rLIh0EztFg9UQr1Q==",
|
||||
"engines": {
|
||||
"node": ">=0.8.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "individual",
|
||||
"url": "https://github.com/davidjbradshaw/iframe-resizer/blob/master/FUNDING.md"
|
||||
}
|
||||
},
|
||||
"node_modules/iframe-resizer-react": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/iframe-resizer-react/-/iframe-resizer-react-1.1.0.tgz",
|
||||
"integrity": "sha512-FrytSq91AIJaDgE+6uK/Vdd6IR8CrwLoZ6eGmL2qQMPTzF0xlSV2jaSzRRUh5V2fttD7vzl21jvBl97bV40eBw==",
|
||||
"dependencies": {
|
||||
"iframe-resizer": "^4.3.0",
|
||||
"warning": "^4.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8",
|
||||
"npm": ">=5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"prop-types": ">=15.7.2",
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "5.2.4",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
|
||||
@@ -12974,6 +13005,14 @@
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/watchpack": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
|
||||
|
||||
907
docs/yarn.lock
907
docs/yarn.lock
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user