Issue with launching app

Runeii commented 1 month ago

Hey, I did a fresh install using bedframe make and found that I got vite not found errors when trying to run any command.

If I open the folder and run npm install manually, it throws:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: bedframe-project@0.0.1
npm ERR! Found: vite@5.2.11
npm ERR! node_modules/vite
npm ERR!   dev vite@"^5.2.6" from the root project
npm ERR!   peerOptional vite@"*" from vite-plugin-dts@3.9.1
npm ERR!   node_modules/vite-plugin-dts
npm ERR!     peer vite-plugin-dts@"^3.7.0" from @bedframe/core@0.0.43
npm ERR!     node_modules/@bedframe/core
npm ERR!       dev @bedframe/core@"0.0.43" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^2.0.0 || ^3.0.0 || ^4.0.0" from vite-plugin-externalize-deps@0.7.0
npm ERR! node_modules/vite-plugin-externalize-deps
npm ERR!   peer vite-plugin-externalize-deps@"^0.7.0" from @bedframe/core@0.0.43
npm ERR!   node_modules/@bedframe/core
npm ERR!     dev @bedframe/core@"0.0.43" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/andrew/.npm/_logs/2024-05-26T12_40_54_200Z-eresolve-report.txt

It seems the vite-plugin-externalize-deps package used by Bedframe doesn't support Vite 5? I checked vite-plugin-externalize-deps and it looks like the new version, 0.8.0, still uses Vite 4.

I was able to work around this using npm install --legacy-peer-deps, which installed dependencies. I can now run npm run dev safari as planned. However, opening the URL specified by Vite in the console (http://localhost:5173) gives a 404 error.

Is there an obvious step I've missed to get this working correctly?

JoeyDoey commented 1 month ago

Hey @Runeii ! Glad you're trying out bedframe :) I'm working on helpful docs and demos that should be out soon. in the meantime, bedframe (and the version of crx under the hood) work fine with Vite 5.

Installation

you can skip global installation of bedframe by running npm create bedframe (which same as if you install bedframe globally and then run bedframe make to start the prompts). but it sounds like you successfully did this? if so, then bedframe should have also succeeded installing vite, initializing a git repo, lint+formatting the code generated and commiting your first git commit. this would fail if the deps weren't in order.

Local dev

take a look at the steps to get up and running after installation here: https://github.com/nyaggah/bedframe/issues/334#issuecomment-1890778705

if you can, post a link to a repro repo which will made it easier to diagnose.

JoeyDoey commented 1 month ago

I should add, the reason you're not able to visit localhost:5173 directly is because there's no index.html in the root of the project.

the bedframe starter templates move the root of your project to ./src dir. you can update the vite.config.ts if you want to change this back to Vite default.

pages are moved inside the ./src/pages directory. you can create an src/index.html and you should be able to visit that URL like a normal app (you won't have access to some (most?) browser/extension apis this way)

see further info on how Vite treats index.html and the project root in general here: https://vitejs.dev/guide/#index-html-and-project-root

JoeyDoey commented 1 month ago

ohhhhh! you're talking about Safari specifically, my bad! that will need another extra step. ultimately, a Safari Web Extension is actually a mac app. so after you run npm run build safari you should have a dist/safari directory.

Then follow these steps to convert it into a proper Safari Web Extension (tm):

run the npm run convert:safari script in your package.json. it looks like this:

"convert:safari": "xcrun safari-web-extension-converter dist/safari --project-location . --app-name $npm_package_name@$npm_package_version-safari",

with that convert:safari script you're telling the xcrun safari-web-extension-converter utility to grab the dist/safari directory and convert that into Safari Web Extension and drop the generated Xcode project in your project root.

take a look at your options for this utility in the Apple Safari docs on Converting a web extension for Safari.

you'll need xcode installed for this to work (which, i believe, also requires macOS).

once xcode opens up:

ensure you have a macOS target selected

then build the app (click the > / "start the active schema" button)

once the app builds, it'll open up with this window, click `quit and open safari` button

ensure you have the `show features for web developers` option checked

ensure you have the `allow unsigned extension` option checked

^^^ nb: to actually publish Safari extensions, you'll need an Apple Dev account. but for local dev, you can just allow unsigned extensions

you can now install the extension. you should see it in the list of extensions.

go to safari and you should see you extension. click on the icon. nb: if you used one of the default setups, you can also use `ctrl + shift + 1` keyboard shortcut to open the extension

Runeii commented 3 weeks ago

Sorry for the delayed response!

Took a look and this works great, thanks.

I guess one thing that remains confusing, and perhaps is my misunderstanding of the aim of the framework, is how dev mode works? Makes sense to build/convert/run, but the real benefit I was hoping to get from bedframe was dev mode, with some degree of hot reloading? Is this not a thing?

Thanks

JoeyDoey commented 5 days ago

Sorry for the delayed response!

Took a look and this works great, thanks.

I guess one thing that remains confusing, and perhaps is my misunderstanding of the aim of the framework, is how dev mode works? Makes sense to build/convert/run, but the real benefit I was hoping to get from bedframe was dev mode, with some degree of hot reloading? Is this not a thing?

Thanks

@Runeii you get HMR / local dev niceness as is. But Safari... is Safari :) A Safari Web Extension is a Mac App. You're gonna need Xcode to do that.

When you convert the extension with xcrun safari-web-extension-converter we link it to the ./dist/safari directory. so whenever you update the vite/ts/js, the Safari app will also stay updated.

Take a look at Apple's docs on Converting Safari Web Extension: https://developer.apple.com/documentation/safariservices/safari_web_extensions/converting_a_web_extension_for_safari#3586260

For the other browsers, you should be able to get live reloading as advertised.

See console for specific warnings/messages.

nyaggah / bedframe