Frontend development server is slow

[u5r0]

Scope & Context

I'm experiencing a hard time with server reload on the current setup. Frontend developement requires fast refresh because of many modifications you do per minute.

Technical inputs

If there's no work around, would you accept a PR for a move from craco/webpack to vite?

[charlesBochet]

hi @u5r0, I would be interested into investigating it. What configuration do you have?
Why not!

[ArijitCloud]

Good idea! I was trying to enable HMR with craco and vanilla webpack configuration last week and was failing miserably 😄

[PentesterPriyanshu]

yes it is very slow taking more time to open

[charlesBochet]

What is your configuration? Is it only the first time build that is taking time?

None of us have experienced slow build internally but we all have similar configuration (Mac M2 or M1)

[charlesBochet]

Anyway, if there is a way to improve developer experience there, we should invest into it :)

[charlesBochet]

Why are we closing it @u5r0? :)

[u5r0]

I thought you answered my question, I'll reopen..

[charlesBochet]

What configuration do you have? And do you have experience with setting up vite for react projects?

[u5r0]

I don't have an existing config, tinkering is the plan. I've implemented projects in Vite, but haven't migrated from CRA. Twenty's codebase isn't that large just yet, and thought I'd give it a shot.

This is an initial setup, the vite server started but couldn't handle /companies after sign-in and crashed with this recoil error. Next step is setting up a testing environment with jest/vitest, whatever works

[ArijitCloud]

I did a setup jest few days back with vite, was a bit pain. Probably vitest would be easier to get started, I also have the Jest and RTL combination with Vite running, but it's not a big repo.

Dependencies
"identity-obj-proxy": "^3.0.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jsdom": "^22.1.0",
"ts-jest": "^29.1.1",
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/react": "^14.0.0",
"@types/jest": "^29.5.5",

This was the Jest configuration used.

  "jest": {
    "moduleNameMapper": {
      "\\.(css|less)$": "identity-obj-proxy"
    },
    "transform": {
      "^.+\\.(ts|tsx)$": "ts-jest"
    },
    "testEnvironment": "jsdom"
  }

[charlesBochet]

@u5r0 @ArijitCloud does any of you have a working environment we could try with vite?

[u5r0]

@charlesBochet Hey, this's a working environment https://github.com/u5r0/twenty/tree/vite4/vitro
Run yarn dev against the server
This's just /src from yesterday's last commit, no eslint, no test, no storybook..

Also, it's vite 4, we should aim for vite 5. I just didn't want anything to get in the way while I'm trying to run it for the first time.

[charlesBochet]

Thanks to @u5r0, twenty-front has just migrated to vite. It's indeed faster and less resource intensive!
We have also migrated to yarn4
Closing this issue!