fix: fix root start script (twentyhq#5032)

Fixes twentyhq#5022

See https://nx.dev/recipes/running-tasks/root-level-scripts#setup

.github/workflows/ci-chromatic.yaml

@@ -41,4 +41,4 @@ jobs:
       - name: Publish to Chromatic
         run: |
           cd packages/twenty-front
-          yarn nx chromatic:ci
+          npx nx chromatic:ci

.github/workflows/ci-chrome-extension.yaml

@@ -69,4 +69,4 @@ jobs:
           key: root-node_modules-${{hashFiles('yarn.lock')}}
           restore-keys: root-node_modules-
       - name: Chrome Extension / Run build
-        run: yarn nx build twenty-chrome-extension
+        run: npx nx build twenty-chrome-extension

.github/workflows/ci-docs.yaml

@@ -28,7 +28,7 @@ jobs:
       - name: Docs / Install Dependencies
         run: yarn
       - name: Docs / Build Documentation
-        run: yarn nx build twenty-docs
+        run: npx nx build twenty-docs
   vale:
     name: runner / vale
     runs-on: ubuntu-latest

.github/workflows/ci-front.yaml

@@ -77,7 +77,7 @@ jobs:
       - name: Run storybook tests
         run: |
           npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "STORYBOOK_SCOPE=pages npx nx run twenty-front:storybook:static" \
+            "STORYBOOK_SCOPE=pages npx nx run twenty-front:storybook:static:ci" \
             "npx wait-on tcp:6006 && STORYBOOK_SCOPE=pages npx nx run twenty-front:storybook:test"
   front-modules-sb-test:
     needs: front-yarn-install
@@ -115,7 +115,7 @@ jobs:
       - name: Run storybook tests
         run: |
           npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "STORYBOOK_SCOPE=modules npx nx run twenty-front:storybook:static" \
+            "STORYBOOK_SCOPE=modules npx nx run twenty-front:storybook:static:ci" \
             "npx wait-on tcp:6006 && STORYBOOK_SCOPE=modules npx nx run twenty-front:storybook:test"
   front-lint-tsc:
     needs: front-yarn-install

.github/workflows/ci-server.yaml

@@ -36,14 +36,14 @@ jobs:
       - name: Server / Install Dependencies
         run: yarn
       - name: Server / Run linter
-        run: yarn nx lint twenty-server
+        run: npx nx lint twenty-server
       - name: Server / Run jest tests
-        run: yarn nx test:unit twenty-server
+        run: npx nx test:unit twenty-server
       - name: Server / Build
-        run: yarn nx build twenty-server
+        run: npx nx build twenty-server
       - name: Server / Write .env
         run: |
           cd packages/twenty-server
           cp .env.example .env
       - name: Worker / Run
-        run: MESSAGE_QUEUE_TYPE=sync yarn nx worker twenty-server
+        run: MESSAGE_QUEUE_TYPE=sync npx nx worker twenty-server

.github/workflows/ci-utils.yaml

@@ -28,6 +28,6 @@ jobs:
       - name: Utils / Install Dependencies
         run: yarn
       - name: Utils / Run Danger.js
-        run: cd packages/twenty-utils && yarn nx danger:ci
+        run: cd packages/twenty-utils && npx nx danger:ci
         env:
           DANGER_GITHUB_API_TOKEN: ${{ github.token }}

.github/workflows/ci-website.yaml

@@ -26,4 +26,4 @@ jobs:
       - name: Website / Install Dependencies
         run: yarn
       - name: Website / Build Website
-        run: yarn nx build twenty-website
+        run: npx nx build twenty-website

package.json

@@ -329,8 +329,9 @@
     "typescript": "5.3.3"
   },
   "version": "0.2.1",
+  "nx": {},
   "scripts": {
-    "start:prod": "cross-env FORCE_COLOR=true concurrently -n \"twenty-server,twenty-front\" -c \"bgBlue.bold,bgGreen.bold\" \"yarn nx start twenty-server\" \"yarn nx start twenty-front\""
+    "start": "nx run-many -t start -p twenty-server twenty-front"
   },
   "workspaces": {
     "packages": [

packages/twenty-chrome-extension/README.md

@@ -22,7 +22,7 @@ VITE_FRONT_BASE_URL=http://localhost:3001
 - STEP 4: Now, execute the following command in the root directory to start up the development server on Port 3002. This will create a `dist` folder in `twenty-chrome-extension`.
 
 ```
-yarn nx start twenty-chrome-extension
+npx nx start twenty-chrome-extension
 ```
 
 - STEP 5: Open Google Chrome and head to the extensions page by typing `chrome://extensions` in the address bar.
@@ -57,4 +57,4 @@ yarn nx start twenty-chrome-extension
    <img src="../twenty-chrome-extension/public/readme-images/05-img-five.png" width="600" />
 </p>
 
-To install the extension in production mode without hmr (hot module reload), replace the command in STEP FOUR with `yarn nx build twenty-chrome-extension`. You may or may not want to execute STEP THREE based on your requirements.
+To install the extension in production mode without hmr (hot module reload), replace the command in STEP FOUR with `npx nx build twenty-chrome-extension`. You may or may not want to execute STEP THREE based on your requirements.

packages/twenty-chrome-extension/package.json

@@ -6,13 +6,13 @@
   "type": "module",
   "scripts": {
     "nx": "NX_DEFAULT_PROJECT=twenty-chrome-extension node ../../node_modules/nx/bin/nx.js",
-    "clean": "rimraf ./dist",
-    "start": "yarn clean && vite",
-    "build": "yarn clean && tsc && vite build",
-    "lint": "eslint . --report-unused-disable-directives --max-warnings 0 --config .eslintrc.cjs",
-    "graphql:generate": "graphql-codegen",
-    "fmt": "prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
-    "fmt:fix": "prettier --cache --write \"src/**/*.ts\" \"src/**/*.tsx\""
+    "clean": "npx rimraf ./dist",
+    "start": "yarn clean && npx vite",
+    "build": "yarn clean && npx tsc && npx vite build",
+    "lint": "npx eslint . --report-unused-disable-directives --max-warnings 0 --config .eslintrc.cjs",
+    "graphql:generate": "npx graphql-codegen",
+    "fmt": "npx prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
+    "fmt:fix": "npx prettier --cache --write \"src/**/*.ts\" \"src/**/*.tsx\""
   },
   "dependencies": {
     "@types/chrome": "^0.0.256"

packages/twenty-docker/twenty-docs/Dockerfile

@@ -14,7 +14,7 @@ COPY ./packages/twenty-ui /app/packages/twenty-ui
 RUN yarn
 
 COPY ./packages/twenty-docs /app/packages/twenty-docs
-RUN yarn nx build twenty-docs
+RUN npx nx build twenty-docs
 
 CMD ["tail", "-f", "/dev/null"]
 

packages/twenty-docker/twenty-website/Dockerfile

@@ -13,7 +13,7 @@ COPY ./packages/twenty-website/package.json /app/packages/twenty-website/package
 RUN yarn
 
 COPY ./packages/twenty-website /app/packages/twenty-website
-RUN yarn nx build twenty-website
+RUN npx nx build twenty-website
 
 FROM node:18.17.1-alpine as twenty-website
 
@@ -26,4 +26,4 @@ WORKDIR /app/packages/twenty-website
 LABEL org.opencontainers.image.source=https://github.com/twentyhq/twenty
 LABEL org.opencontainers.image.description="This image provides a consistent and reproducible environment for the website."
 
-CMD ["/bin/sh", "-c", "yarn nx start"]
+CMD ["/bin/sh", "-c", "npx nx start"]

packages/twenty-docs/docs/contributor/server/server.mdx

@@ -14,38 +14,38 @@ import DocCardList from '@theme/DocCardList';
 ## Useful commands
 
 These commands should be exectued from packages/twenty-server folder.
-From any other folder you can run `yarn nx <command>` twenty-server.
+From any other folder you can run `npx nx <command>` twenty-server.
 
 ### First time setup
 
 ```
-yarn nx database:reset # setup the database with dev seeds
+npx nx database:reset # setup the database with dev seeds
 ```
 
 ###  Starting the app
 
 ```
-yarn nx start
+npx nx start
 ```
 
 ### Lint
 
 ```
-yarn nx lint
+npx nx lint
 ```
 
 ### Test
 
 ```
-yarn nx test:unit
+npx nx test:unit
 ```
 
 ### Resetting the database
 
 If you want to reset the database, you can run the following command:
 
 ```bash
-yarn nx database:reset
+npx nx database:reset
 ```
 
 :::warning

packages/twenty-docs/docs/start/local-setup/troubleshooting.mdx

@@ -24,11 +24,11 @@ If you don't, make sure you don't have more than one postgres instance running o
 
 ## 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 `yarn nx run twenty-emails:build`
+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 `yarn nx server:dev twenty-server`. If this still doesn't work try building the missing package manually.
+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
 

packages/twenty-docs/docs/start/local-setup/yarn-setup.mdx

@@ -182,7 +182,7 @@ yarn
 
 Setup your database with the following command:
 ```bash
-yarn nx database:reset twenty-server
+npx nx database:reset twenty-server
 ```
 
 Start the server and the frontend:

packages/twenty-docs/docs/start/self-hosting/docker-compose.mdx

@@ -44,7 +44,7 @@ FILE_TOKEN_SECRET=replace_me_with_a_random_string_refresh
 If you encounter errors, (not able to log into the application after inputting an email) after the inital setup, try running the following commands and see if that solves your issue.
 ```
 docker exec -it twenty-server-1 yarn
-docker exec -it twenty-server-1 yarn nx database:reset
+docker exec -it twenty-server-1 npx nx database:reset
 ```
 
 ### Cannot connect to server, running behind a reverse proxy

packages/twenty-docs/package.json

@@ -4,16 +4,16 @@
   "private": true,
   "scripts": {
     "nx": "NX_DEFAULT_PROJECT=twenty-docs node ../../node_modules/nx/bin/nx.js",
-    "docusaurus": "docusaurus",
-    "start": "docusaurus start --host 0.0.0.0 --port 5001",
-    "build": "docusaurus build",
-    "swizzle": "docusaurus swizzle",
-    "deploy": "docusaurus deploy",
-    "clear": "docusaurus clear",
-    "serve": "docusaurus serve",
-    "write-translations": "docusaurus write-translations",
-    "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc"
+    "docusaurus": "npx docusaurus",
+    "start": "npx docusaurus start --host 0.0.0.0 --port 5001",
+    "build": "npx docusaurus build",
+    "swizzle": "npx docusaurus swizzle",
+    "deploy": "npx docusaurus deploy",
+    "clear": "npx docusaurus clear",
+    "serve": "npx docusaurus serve",
+    "write-translations": "npx docusaurus write-translations",
+    "write-heading-ids": "npx docusaurus write-heading-ids",
+    "typecheck": "npx tsc"
   },
   "overrides": {
     "trim": "^0.0.3",

packages/twenty-front/package.json

@@ -7,7 +7,6 @@
     "build": "npx vite build && sh ./scripts/inject-runtime-env.sh",
     "build:sourcemaps": "VITE_BUILD_SOURCEMAP=true NODE_OPTIONS=--max-old-space-size=3000 npx nx build",
     "start:prod": "NODE_ENV=production npx vite --host",
-    "storybook:build": "npx storybook build",
     "tsup": "npx tsup"
   },
   "engines": {

packages/twenty-front/project.json

@@ -29,10 +29,10 @@
       "options": {
         "cwd": "{projectRoot}",
         "command": "tsc -b tsconfig.json",
-        "incremental": true
+        "args": ["--incremental"]
       },
       "configurations": {
-        "ci": { "incremental": false },
+        "ci": { "args": [] },
         "watch": { "watch": true }
       }
     },
@@ -91,6 +91,14 @@
         "watch": { "watch": true }
       }
     },
+    "storybook:build": {
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "{projectRoot}/storybook-static",
+        "configDir": "{projectRoot}/.storybook"
+      }
+    },
     "storybook:dev": {
       "executor": "@nx/storybook:storybook",
       "options": {
@@ -102,8 +110,8 @@
       "executor": "@nx/web:file-server",
       "options": {
         "buildTarget": "twenty-front:storybook:build",
-        "staticFilePath": "{projectRoot}/storybook-static",
         "port": 6006,
+        "staticFilePath": "{projectRoot}/storybook-static",
         "watch": false
       }
     },

packages/twenty-front/src/emotion.d.ts

@@ -0,0 +1,5 @@
+import { ThemeType } from 'twenty-ui';
+
+declare module '@emotion/react' {
+  export interface Theme extends ThemeType {}
+}

packages/twenty-front/src/index.tsx

@@ -21,7 +21,6 @@ import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogMa
 import { SnackBarProvider } from '@/ui/feedback/snack-bar-manager/components/SnackBarProvider';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
 import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
-import { ThemeType } from '@/ui/theme/constants/ThemeLight';
 import { UserProvider } from '@/users/components/UserProvider';
 import { UserProviderEffect } from '@/users/components/UserProviderEffect';
 import { PageChangeEffect } from '~/effect-components/PageChangeEffect';
@@ -82,7 +81,3 @@ root.render(
     </AppErrorBoundary>
   </RecoilRoot>,
 );
-
-declare module '@emotion/react' {
-  export interface Theme extends ThemeType {}
-}

packages/twenty-front/tsconfig.app.json

@@ -1,7 +1,6 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
     "types": ["node"]
   },
   "exclude": [
@@ -13,5 +12,11 @@
     "**/*.test.ts",
     "**/*.test.tsx"
   ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ]
 }

packages/twenty-front/tsconfig.json

@@ -19,6 +19,7 @@
     "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
     "forceConsistentCasingInFileNames": true,
+    "outDir": "../../dist/out-tsc",
     "paths": {
       "@/*": ["packages/twenty-front/src/modules/*"],
       "~/*": ["packages/twenty-front/src/*"],
@@ -34,6 +35,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.storybook.json"
     }
   ],
   "extends": "../../tsconfig.base.json"

packages/twenty-front/tsconfig.spec.json

@@ -1,19 +1,15 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
     "types": ["jest", "node"]
   },
   "include": [
-    ".storybook/**/*",
     "**/__mocks__/**/*",
     "jest.config.ts",
     "setupTests.ts",
     "src/**/*.d.ts",
     "src/**/*.spec.ts",
     "src/**/*.spec.tsx",
-    "src/**/*.stories.ts",
-    "src/**/*.stories.tsx",
     "src/**/*.test.ts",
     "src/**/*.test.tsx",
     "tsup.config.ts",

packages/twenty-front/tsconfig.storybook.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true
+  },
+  "include": [
+    ".storybook/*.ts",
+    ".storybook/*.tsx",
+    "src/**/*.d.ts",
+    "src/**/*.stories.mdx",
+    "src/**/*.stories.ts",
+    "src/**/*.stories.tsx"
+  ]
+}