[#88] Change Webpack to Vite #117

malparty · 2022-07-21T08:03:12Z

Close Change Webpack to Vite #88

What happened 👀

Generate an app without any add-ons
Migrate this app to use Vite and copy it in the vite-template folder
Add templating scripts (download the folder from github, rename %APP_NAME% with the provided application name in some files, ...
Ensure CI test work
Ensure local test work
Ensure add-ons for version-control work
Ensure UI Framework add-ons work

Insight 📝

TypeScript imports are now using @/ to map a resource inside the src folder
Jest uses Babel in Create-React-App. To keep the speed advantage of Vite, I configured Jest via a plugin to support ESBuild: https://github.com/aelbore/esbuild-jest
Vite raised an issue not visible earlier: we were missing an import in the vendor bootstrap index.scss file
We might want to use degit instead of CURL later. I created an issue for that Use degit instead of CURL to download the vite-template folder #120

Proof Of Work 📹

To test with local changes in either the ./packages/cra-template or the ./vite-temaplte/ folders, use the following commands (this is documented in the packages/cli-tool/cli README.md file)

For Vite:

  # Assuming the repository `react-temapltes` is in `~/Documents/Source/`.
  # The generated app will be in `~/Documents/Source/vite-app`
  ./bin/dev generate vite-app ~/Documents/Source/ feature/gh88-replace-webpack-with-vite

For Create React App (Webpack):

  # Assuming the repository `react-temapltes` is in `~/Documents/Source/`.
  # The generated app will be in `~/Documents/Source/webpack-app`
  ./bin/dev generate webpack-app ~/Documents/Source/ file:react-templates/packages/cra-template

I can create a WebPack (CRA) app

I can create a Vite app

Tests on a new project are passing ✅

… vite

packages/cli-tool/README.md

packages/cli-tool/src/add-ons/ui-framework/bootstrap.ts

Nihisil · 2022-08-18T03:35:55Z

packages/cli-tool/src/add-ons/ui-framework/tailwind-css.ts

      replaceLine(
        indexScssPath,
        `import 'assets/stylesheets/application.scss';`,
        `import 'assets/stylesheets/application.css';`,
      );
+      replaceLine(indexScssPath, `import '@/dummy.scss';`, `import '@/dummy.css';`);
+
+      // When using Vite


Maybe we should be doing it under if condition? I understand that it will not replace the content for the opposite case. Does this plugin have information on what we are using, vite or webpack?

8999c21 ✅ ;-)

I think it is a wrong commit :) And I don't see fixes for it in other commits. I don't insist on it, just raised a question to consider whether it will be better or not.

ca7ea8c ✅ 🙇

packages/cli-tool/src/template/initialize-cra-app.ts

vite-template/.gitignore

hoangmirs

Can we move the vite-template folder into packages just like cra-template? 🤔

hoangmirs · 2022-08-18T04:28:42Z

packages/cli-tool/src/template/initialize-vite-app.ts

+  branch: string;
+};
+
+const downloadTemplateRepository = (


Should we move these functions to a helper? Then we can re-use them later as well. Just need to pass an option object, and get the expected folder

2efd4b5 ✅

Please help me to review if that fits what you had in mind. I don't really like the dependence with the run-command (and so the need for the dest argument)... but I think it is hard to do it differently 🤔

malparty · 2022-08-18T04:47:03Z

@hoangmirs if we move the vite-template folder into the packages folder, lerna will assum it is an npm package and it generates many errors... I started that way and realized it was wrong because this vite-template folder is just static files, it should not be published or considered to as a package 🤔

Chore created in:

Move the /vite-template folder into the /packages folder #121

packages/cli-tool/src/commands/generate/index.ts

carryall

I think we might need to do a POC to make sure we're okay to move from CRA to Vite then we can update our template structure 🤔

[#88] Add the vite-template folder with a working cra app migrated to…

a961344

… vite

malparty self-assigned this Jul 21, 2022

malparty added the type : feature label Jul 21, 2022

malparty force-pushed the feature/gh88-replace-webpack-with-vite branch 3 times, most recently from efead03 to e9e1d74 Compare July 21, 2022 09:24

[#88] Add the initializeViteApp to the cli-tool package

12e8579

malparty force-pushed the feature/gh88-replace-webpack-with-vite branch from e9e1d74 to 12e8579 Compare July 21, 2022 09:32

[#88] Update README instructions and example command

922a22f

malparty force-pushed the feature/gh88-replace-webpack-with-vite branch 2 times, most recently from 957d319 to 69bc71f Compare July 22, 2022 03:06

[#88] Fix Jest tests not running

a82f6a1

malparty force-pushed the feature/gh88-replace-webpack-with-vite branch 2 times, most recently from 7de1f68 to b02c927 Compare July 25, 2022 09:35

[#88] Refactor to ask for Vite or Webpack

abadc8a

malparty force-pushed the feature/gh88-replace-webpack-with-vite branch from b02c927 to abadc8a Compare July 25, 2022 09:37

malparty added 2 commits July 25, 2022 16:38

[#88] Update test to use Vite instead of CRA

54c8bcc

[#88] Move vite-template outside from the lerna packages folder

40f2fff

malparty force-pushed the feature/gh88-replace-webpack-with-vite branch from efb6d69 to 40f2fff Compare July 25, 2022 10:44

[#88] Fix args for tests with Vite

648ab00

malparty force-pushed the feature/gh88-replace-webpack-with-vite branch 10 times, most recently from 2770a85 to 9f2209a Compare July 29, 2022 06:50

[#88] Fix local cra webpack not working

1742bce

malparty force-pushed the feature/gh88-replace-webpack-with-vite branch from 86ed083 to 1742bce Compare August 3, 2022 10:29

[#88] Fix cli-tool tests

f17b325

malparty force-pushed the feature/gh88-replace-webpack-with-vite branch from 9162189 to f17b325 Compare August 4, 2022 04:44

malparty marked this pull request as ready for review August 4, 2022 04:44

malparty requested review from carryall, bterone, hanam1ni, hoangmirs, rosle, tyrro and Nihisil as code owners August 4, 2022 04:44

Nihisil reviewed Aug 18, 2022

View reviewed changes

hoangmirs reviewed Aug 18, 2022

View reviewed changes

malparty added 4 commits August 18, 2022 14:16

[#88] Fix typo

8999c21

[#88] Rename const to more generic name

bb5c58b

[#88] Add .idea to .gitignore

0aac8fc

[#88] Move download repository into a helper function

2efd4b5

malparty force-pushed the feature/gh88-replace-webpack-with-vite branch from 272e58f to 2efd4b5 Compare August 18, 2022 08:07

malparty requested review from hoangmirs and Nihisil August 18, 2022 08:12

carryall reviewed Aug 19, 2022

View reviewed changes

packages/cli-tool/src/commands/generate/index.ts Outdated Show resolved Hide resolved

[#88] Add template option to secure tailwind alternatives

ca7ea8c

malparty requested a review from carryall August 19, 2022 07:56

Fix broken tests

011dc9a

carryall approved these changes Sep 23, 2022

View reviewed changes

Nihisil approved these changes Nov 21, 2022

View reviewed changes

carryall merged commit 52288d1 into development Jan 26, 2023

carryall deleted the feature/gh88-replace-webpack-with-vite branch January 26, 2023 06:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#88] Change Webpack to Vite #117

[#88] Change Webpack to Vite #117

malparty commented Jul 21, 2022 •

edited

Loading

Nihisil Aug 18, 2022

malparty Aug 18, 2022

Nihisil Aug 18, 2022

malparty Aug 19, 2022

hoangmirs left a comment

hoangmirs Aug 18, 2022

malparty Aug 18, 2022 •

edited

Loading

malparty commented Aug 18, 2022 •

edited

Loading

carryall left a comment

[#88] Change Webpack to Vite #117

[#88] Change Webpack to Vite #117

Conversation

malparty commented Jul 21, 2022 • edited Loading

What happened 👀

Insight 📝

Proof Of Work 📹

I can create a WebPack (CRA) app

I can create a Vite app

Tests on a new project are passing ✅

Nihisil Aug 18, 2022

Choose a reason for hiding this comment

malparty Aug 18, 2022

Choose a reason for hiding this comment

Nihisil Aug 18, 2022

Choose a reason for hiding this comment

malparty Aug 19, 2022

Choose a reason for hiding this comment

hoangmirs left a comment

Choose a reason for hiding this comment

hoangmirs Aug 18, 2022

Choose a reason for hiding this comment

malparty Aug 18, 2022 • edited Loading

Choose a reason for hiding this comment

malparty commented Aug 18, 2022 • edited Loading

carryall left a comment

Choose a reason for hiding this comment

malparty commented Jul 21, 2022 •

edited

Loading

malparty Aug 18, 2022 •

edited

Loading

malparty commented Aug 18, 2022 •

edited

Loading