Skip to content

chore: Use Vite instead of Webpack for development #4156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Sep 23, 2022
Merged

Conversation

BrunoQuaresma
Copy link
Collaborator

@BrunoQuaresma BrunoQuaresma commented Sep 22, 2022

Intentions:

  • Make our dev process better
  • Webpack is quite heavy and it was bugging my workspace
  • Webpack is kinda complex to maintain
  • Vite has better build time and DX

How to use:

CODER_HOST=https://dev.coder.com/ yarn vite
// or
CODER_HOST=https://dev.coder.com/ yarn dev:vite

I would appreciate it if people could test it and help me to catch any bugs before replacing webpack entirely.

@BrunoQuaresma BrunoQuaresma self-assigned this Sep 23, 2022
@BrunoQuaresma BrunoQuaresma marked this pull request as ready for review September 23, 2022 16:45
@BrunoQuaresma BrunoQuaresma requested a review from a team as a code owner September 23, 2022 16:45
@BrunoQuaresma BrunoQuaresma requested review from jsjoeio and removed request for a team September 23, 2022 16:45
Copy link
Member

@kylecarbs kylecarbs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Assuming bundle-size is similar, I'm in support. Could we add data on how much faster it is?

Copy link
Contributor

@jsjoeio jsjoeio left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks great 💯 Mostly questions to understand the why behind some of the changes. Gonna checkout locally and test.

@@ -0,0 +1,37 @@
<!DOCTYPE html>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ Why do we have to add this? (Or is this a file move? hard to tell)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Vite requires the HTML file to be in the root.

@@ -10,6 +10,7 @@
"check:all": "yarn format:check && yarn lint && yarn test",
"chromatic": "chromatic",
"dev": "webpack-dev-server --config=webpack.dev.ts",
"dev:vite": "vite",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like that you're leaving webpack in and encouraging folks to try vite. Seems like the right move and then when we're confident Vite works, we can remove webpack 👍🏼

@jsjoeio
Copy link
Contributor

jsjoeio commented Sep 23, 2022

Probably user error, but how do you log in when you use a different host? I tried with GitHub but get this error:

image

I did get it to work by manually editing ./scripts/develop.sh to use yarn dev:vite though.

The first load of pages seems a bit slower (maybe the lazy load?) but other than that seems to work great! HMR is so fast with Vite!

Screen.Recording.2022-09-23.at.10.41.52.AM.mov

Copy link
Contributor

@jsjoeio jsjoeio left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One request: update ./scripts/develop.sh to use Vite!

@BrunoQuaresma BrunoQuaresma changed the title chore: Use Vite instead of Webpack chore: Use Vite instead of Webpack for development Sep 23, 2022
@BrunoQuaresma BrunoQuaresma merged commit 189c562 into main Sep 23, 2022
@BrunoQuaresma BrunoQuaresma deleted the try-vite branch September 23, 2022 18:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants