Migrate from gulp and webpack, to vite #2815

pygeek · 2024-09-08T19:16:48Z

Simplify and speed up the build/dev process by replacing Gulp and Webpack with Vite.
Additional changes in this PR need to be made to enable HMR — an additional lint rule has been added to support this.

src/vite.config.ts

anoek · 2024-09-08T21:49:33Z

Is there a particular reason for the vite.config.js to reside in src/? Our other config files are up a directory, would it be fine to reside there too?

pygeek · 2024-09-08T22:16:59Z

I initially settled on that approach, because it was the fastest to prototype the migration—I was having issues with the pre-existing typescript setup. I've updated the code with my preferred setup (index.html + vite.config.js moved outside of src) now that I've worked out the bugs and made changes to the typescript + package setup.

Context: Vite has a constraint where the vite.config.js must live alongside the index.html.

github-actions · 2024-09-11T06:05:51Z

Uffizzi Ephemeral Environment `deployment-56139`

☁️ https://app.uffizzi.com/github.com/online-go/online-go+com/pull/2815

📄 View Application Logs etc.

What is Uffizzi? Learn more!

benjaminpjones

Overall, I think a switch to Vite would be exciting. It seems to be the preferred modern build tool for React and other frameworks :)

benjaminpjones · 2024-09-11T11:29:44Z

index.html

            } catch (error) {
                console.warn(error);
                console.log("No WASM support detected, score estimator falling back to ASM.js mode");
-                script.src = "/OGSScoreEstimator/OGSScoreEstimator-0.7.0.asm.js";
+                script.src = "//localhost:8080/OGSScoreEstimator/OGSScoreEstimator-0.7.0.asm.js";


Will this work in other environments? (i.e. user clients)

Values were temporarily hardcoded for prototyping.

benjaminpjones · 2024-09-11T11:39:46Z

index.html

@@ -1,19 +1,18 @@
 <!doctype html>
-<html lang="{{PAGE_LANGUAGE}}">


Doesn't Vite also have the ability to use variables in html?

https://vitejs.dev/guide/env-and-mode.html#html-env-replacement

Yes, this was only done for rapid prototyping.

benjaminpjones · 2024-09-11T11:45:37Z

package.json

@@ -9,19 +9,15 @@
        "npm": ">=8.5.0"
    },
    "scripts": {
-        "dev": "supervisor -w Gulpfile.js,webpack.config.js,tsconfig.json supervisor -w Gulpfile.js -x gulp --",
+        "dev": "npx tsx server.ts",


Reload on change is definitely an important feature for devs. (Is this what you're referring to with the HMR updates needed?)

Vite supports live reload by default. However, with HMR (Hot Module Replacement) the specific module which was updated is reloaded, rather than the entire app. https://webpack.js.org/concepts/hot-module-replacement/

In order to get this working, I have to make updates to a few components. Once this is done, Vite will automatically enable HMR. Related eslint rule: https://github.com/ArnaudBarre/eslint-plugin-react-refresh

anoek

I'm pretty excited for this, I've looked into it in the past but it was a bit daunting, thanks for taking it on.

FTR there's some webpack usage within our Makefile.production that will need to be replaced with the appropriate vite equivalents, probably most notably is the production builds:

online-go.com/Makefile.production

Lines 125 to 132 in 4b40715

    
           dist/ogs.min.js: dist/ogs.js 
        
           	npm run webpack -- --mode=production --optimization-minimize --devtool=source-map 
        
           dist/vendor.min.js: dist/vendor.js 
        
           	npm run webpack -- --mode=production --optimization-minimize --devtool=source-map 
        
           dist/ogs.$(VERSION).css:  
        
           	npm run gulp min_styl

anoek · 2024-09-11T12:47:52Z

package.json

        "spellcheck": "cspell \"src/**/*.{ts,tsx}\"",
-        "minify-index": "gulp minify-index --silent",


FYI we do use this targe during deployment, https://github.com/online-go/online-go.com/blob/devel/Makefile.production#L48

…yfills.

github-actions · 2024-11-13T00:10:32Z

This pull request has been marked stale and will be closed soon without further activity. Please update the PR or respond to this comment if you're still interested in working on this.

pygeek · 2024-11-15T03:46:51Z

This pull request has been marked stale and will be closed soon without further activity. Please update the PR or respond to this comment if you're still interested in working on this.

still working on this

pygeek changed the title ~~Gulp to vite~~ Migrate from gulp and webpack, to vite Sep 8, 2024

anoek reviewed Sep 8, 2024

View reviewed changes

src/vite.config.ts Outdated Show resolved Hide resolved

pygeek mentioned this pull request Sep 10, 2024

Refactor imports to use @/ alias. #2824

Merged

pygeek force-pushed the gulp-to-vite branch from 3460378 to 8af9fd7 Compare September 11, 2024 06:00

benjaminpjones reviewed Sep 11, 2024

View reviewed changes

anoek reviewed Sep 11, 2024

View reviewed changes

pygeek force-pushed the gulp-to-vite branch from 8af9fd7 to 20d665b Compare September 11, 2024 20:56

pygeek added 4 commits September 29, 2024 22:53

Migrate from Gulp + Webpack to Vite.

1180f74

Add linter for HMR support.

4c45d2c

Update Makefile.

c6dad35

Re-add autoprefixer—now as a vite build plugin. Remove unncessary pol…

a7ed9ee

…yfills.

pygeek force-pushed the gulp-to-vite branch from 20d665b to a7ed9ee Compare September 30, 2024 03:55

Move javascript out of index.html. Import jQuery discretely.

9772e1d

github-actions bot added the stale Issues or PRs that have been open for a long time with no activity label Nov 13, 2024

github-actions bot removed the stale Issues or PRs that have been open for a long time with no activity label Nov 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate from gulp and webpack, to vite #2815

Migrate from gulp and webpack, to vite #2815

pygeek commented Sep 8, 2024 •

edited

Loading

anoek commented Sep 8, 2024

pygeek commented Sep 8, 2024 •

edited

Loading

github-actions bot commented Sep 11, 2024 •

edited

Loading

benjaminpjones left a comment

benjaminpjones Sep 11, 2024

pygeek Sep 11, 2024 •

edited

Loading

benjaminpjones Sep 11, 2024

pygeek Sep 11, 2024

benjaminpjones Sep 11, 2024

pygeek Sep 11, 2024

anoek left a comment

anoek Sep 11, 2024

github-actions bot commented Nov 13, 2024

pygeek commented Nov 15, 2024

		@@ -1,19 +1,18 @@
		<!doctype html>
		<html lang="{{PAGE_LANGUAGE}}">

	dist/ogs.min.js: dist/ogs.js
	npm run webpack -- --mode=production --optimization-minimize --devtool=source-map

	dist/vendor.min.js: dist/vendor.js
	npm run webpack -- --mode=production --optimization-minimize --devtool=source-map

	dist/ogs.$(VERSION).css:
	npm run gulp min_styl

		"spellcheck": "cspell \"src/*/.{ts,tsx}\"",
		"minify-index": "gulp minify-index --silent",

Migrate from gulp and webpack, to vite #2815

Are you sure you want to change the base?

Migrate from gulp and webpack, to vite #2815

Conversation

pygeek commented Sep 8, 2024 • edited Loading

anoek commented Sep 8, 2024

pygeek commented Sep 8, 2024 • edited Loading

github-actions bot commented Sep 11, 2024 • edited Loading

Uffizzi Ephemeral Environment deployment-56139

benjaminpjones left a comment

Choose a reason for hiding this comment

benjaminpjones Sep 11, 2024

Choose a reason for hiding this comment

pygeek Sep 11, 2024 • edited Loading

Choose a reason for hiding this comment

benjaminpjones Sep 11, 2024

Choose a reason for hiding this comment

pygeek Sep 11, 2024

Choose a reason for hiding this comment

benjaminpjones Sep 11, 2024

Choose a reason for hiding this comment

pygeek Sep 11, 2024

Choose a reason for hiding this comment

anoek left a comment

Choose a reason for hiding this comment

anoek Sep 11, 2024

Choose a reason for hiding this comment

github-actions bot commented Nov 13, 2024

pygeek commented Nov 15, 2024

pygeek commented Sep 8, 2024 •

edited

Loading

pygeek commented Sep 8, 2024 •

edited

Loading

github-actions bot commented Sep 11, 2024 •

edited

Loading

Uffizzi Ephemeral Environment `deployment-56139`

pygeek Sep 11, 2024 •

edited

Loading