Importing vite5.1.2+hyperappV2 project from replit best practice

want to import git-repo containing a hyperappv2 module exported from flems

original flems.io exported at hyper-color-picker with flems.io

created github repo : flems export as github repo

create new Glitch from repo-URL and get errors…

Can't find Chrome at:

/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe

If Chrome is installed somewhere else, set the environment variable CHROME_PATH

20:13:51.911 Error: Could not connect to http://127.0.0.1:3001/json/list

Glitch is live at hyper color samp

Believe conflict is with wright dependency which is configured for flems in chromium browser - How can modify this build to work in Glitch? Add env var?

Only modify of Glitch made was changing package.json “scripts” value from “dev” to “start”

Program Files (x86)

chrome.exe

what in the

"devDependencies": {
    "wright": "*"
}

Hot Module Reloading: at the Virtual Machine level

Currently works with Chrome, tested on OSX & Windows 10.

okay so yeah, Glitch has none of chrome (since recently :headstone:), OSX, nor Windows 10 on its project containers

can you figure out what dev tools wright uses and run those directly?

1 Like

to understand dev tools wright is using I guess I should reference the wright dependencies at wright dependencies ?

is there no other way to implement this flems.io besides using wright? can I activate a Glitch paid tier and get more direction on alternative implementations?

I tried to run it locally and got this error after automatically opening Chrome

> flems@0.1.0 dev
> wright index.html

09:22:15.161 Starting wright...
09:22:15.169 Server started on http://localhost:3000/
09:22:15.176 Error: Error: Using unsafe HTTP verb GET to invoke /json/new. This action supports only PUT verb.
    at IncomingMessage.<anonymous> (/***/flems/node_modules/wright/lib/utils.js:87:18)
    at IncomingMessage.emit (node:events:525:35)
    at endReadableNT (node:internal/streams/readable:1358:12)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)

I’m guessing that wright is for local development and opens the browser locally. Instead, if you want to host the project on glitch, you need to somehow find a way to bundle the code just like vite/rollup or browserify. But I’m not sure if the package supports such a feature. According to https://github.com/porsager/flems

Bundling Flems doesn’t really make sense. Flems uses an iframe as a runtime that needs to be pointed at a URL containing specific code. This is currently done by using the included script both as the required module Flems and as the html file src for the iframe. If for some reason you’d still want to bundle Flems, be aware you’ll either need to make the same setup or point to a Flems specific runtime.html file resulting in the same amount of requires. Feel free to create an issue if you need some pointers for doing that.

1 Like

does Wright actually do anything to the source files? if not, then try renaming your package.json to see if it works as a plain static site

1 Like

yes precisely flems using wright to target local-only development
seems you read my mind- switching now to vite - having 2 errors…

npm WARN EBADENGINE Unsupported engine {

npm WARN EBADENGINE   package: 'vite@5.1.2',

npm WARN EBADENGINE   required: { node: '^18.0.0 || >=20.0.0' },

npm WARN EBADENGINE   current: { node: 'v16.14.2', npm: '7.20.6' }

npm WARN EBADENGINE }

npm WARN EBADENGINE Unsupported engine {

npm WARN EBADENGINE   package: 'rollup@4.10.0',

npm WARN EBADENGINE   required: { node: '>=18.0.0', npm: '>=8.0.0' },

npm WARN EBADENGINE   current: { node: 'v16.14.2', npm: '7.20.6' }

npm WARN EBADENGINE }
node:internal/errors:464
    ErrorCaptureStackTrace(err);
    ^
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".jsx" for /app/colors.jsx

maybe need up my node engine version (replit node -v says v18.12.1) in package.json? too many options - i need not use vite+jsx? turn vite version down? -need some guidance thanks
.
Glitch live @ Kind Pattern Operation

Do you mean you can run this project on replit?

What I don’t understand is if replacing wright requires a specific compiler or a “generic” jsx compiler would work (vite uses rollup behind the scenes)

1 Like

yes project works fine on replit (with wright completely removed from package.json) -node version for replit from node -v is v18.12.1

used vite because simple and works -believe other jsx compilers can work as well

does Glitch allow upgrade to v18.12.1 ? i need paid tier to access it ? or is some sort jsx option not requiring 18.x version for vite5.1.2 that you believe will work ?

i try update package.json engine to 18.12.1 and Glitch says not found and bounces back to v10 - so i’m guessing import of vite5.1.2 project into Glitch is impossible right now and must consider other generic jsx compiler for - but far as I know if your start file.js is a module that starts with import {..} then you have to be on a certain node v16LTS and use type="module" in package.json to permit start file.js to be a module and/or use .mjs extension

ok someone anonymous loaded the whole module as a self-executing anonymous function and it just works… and what’s funny is I’ve tried this approach before like years ago with hyperappv1 just to test it and didn’t think to try with v2 sheesh - whoever it was thanks! see at Pick Colors code at https://hyperv2-check.glitch.me/modules/index-C-rde_hh.js

tbh i think someone had something to prove here - being hyperapp is a minimal modular library you shouldn’t need compiler beyond browser engine - my only concern is that this easily breaks in the future so i’m checking with hyperapp2 maintainer for feedback - it’s impressive seeing this example run now on Glitch with just plain html+js - going to be digging through this implementation for a while

not officially, the latest word is that they’re working on upgrading the project containers.

1 Like

Glad you found the solution but I still don’t understand and am curious about how you made your program run with hyperapp. Can you elaborate it a bit more or link to the project you got working?

1 Like

solution above in post marked “Solution” : Importing vite5.1.2+hyperappV2 project from replit best practice - #9 by st-fresh

just realized that this solution is uniquely abstracting away the required module code and adopting it within generic js module without hyperapp library - no pulling from the hyperapp cdn in this solution !

still trying to figure out how I’m even going to use this solution - the base logic has been changed -no jsx no hyperv2 library no vite - simply loading a js module

having trouble making sense of self-executing function’s for-of loop -you can follow the discussion about at javascript - iterate NodeList [] Object with for..of but can't log values involved - Stack Overflow - trying to use setTimeouts and closure rules to pull out values to study what’s going on -but can’t see value of E Object - whoever provided this solution it would be great if I could pick your brain - it’s unfortunate not being able to :melting_face:

is that minified code?

1 Like