Skip to content
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

Add SvelteKit web framework support #5525

Merged
merged 20 commits into from
Apr 6, 2023
Merged

Conversation

austincrim
Copy link
Contributor

@austincrim austincrim commented Feb 15, 2023

Description

In conjunction with FirebaseExtended/firebase-framework-tools#56, this PR adds SvelteKit support to Firebase web frameworks.

A temp change was made in frameworks/index.ts to support ESM, but another PR (#5540) is open that should fix this.

  • merge main
  • remove temp ESM fix
  • pin FIREBASE_FRAMEWORKS_VERSION to new minor version

Scenarios Tested

Tested with the SvelteKit demo app, including static site generation, server-side rendering, and API routes.

@austincrim austincrim marked this pull request as ready for review March 22, 2023 19:20
@codecov-commenter
Copy link

codecov-commenter commented Apr 5, 2023

Codecov Report

Patch coverage: 29.16% and project coverage change: -0.06 ⚠️

Comparison is base (8976456) 55.97% compared to head (0d0754a) 55.92%.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #5525      +/-   ##
==========================================
- Coverage   55.97%   55.92%   -0.06%     
==========================================
  Files         321      322       +1     
  Lines       21663    21706      +43     
  Branches     4419     4427       +8     
==========================================
+ Hits        12125    12138      +13     
- Misses       8472     8502      +30     
  Partials     1066     1066              
Impacted Files Coverage Δ
src/frameworks/utils.ts 38.46% <0.00%> (ø)
src/frameworks/vite/index.ts 32.25% <0.00%> (-4.11%) ⬇️
src/frameworks/sveltekit/index.ts 36.11% <36.11%> (ø)
src/frameworks/index.ts 15.61% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

Copy link
Member

@jamesdaniels jamesdaniels left a comment

Choose a reason for hiding this comment

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

LGTM, @austincrim to test against his sample & we'll add the changelog. Merge after this CLI release is cut.

@jamesdaniels jamesdaniels enabled auto-merge (squash) April 6, 2023 18:29
@jamesdaniels jamesdaniels merged commit 38413e0 into master Apr 6, 2023
33 checks passed
@jamesdaniels jamesdaniels deleted the austincrim_sveltekit branch April 6, 2023 18:51
@simpros
Copy link

simpros commented Apr 11, 2023

Hi @austincrim , great job 👍
Only thing I miss is how to use it, I am trying around with firebase init deploy and firebase deploy but I didn't have any luck so far. Maybe you can help me out? :)

@austincrim
Copy link
Contributor Author

Hey, @simpros, thanks for checking it out!

Can you try firebase init hosting? I never tested firebase init deploy, I'm not sure what it does.

@ideodora
Copy link

firebase init hosting then firebase deploy worked. firebase serve failed with error not found vite executable

@simpros
Copy link

simpros commented Apr 15, 2023

Oh sorry, I meant that I've used firebase init hosting 🤔
Which adapter do you use? @sveltejs/adapter-node?

I am using @sveltejs/adapter-node and the firebase deploy command is erroring with:

[debug] [2023-04-15T06:19:20.724Z] Customer code is not Node
[debug] [2023-04-15T06:19:20.725Z] Customer code is not Python code.
[error] 
[error] Error: Could not detect language for functions at /workspaces/DCOS/build

Maybe a sample svelte.config.js file would help? 🙂

@austincrim
Copy link
Contributor Author

@simpros I would try leaving the adapter as @sveltejs/adapter-auto or removing altogether. An adapter is not technically required. The following config works for me when using firebase deploy:

import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter()
	}
};

export default config;

@ideodora firebase serve works for me without issue. I would try removing node_modules, resinstalling dependencies, and trying again.

@simpros
Copy link

simpros commented Apr 18, 2023

@austincrim sorry to bother you again. The adapter-auto seems to work, my application gets deployed but the cloud function is erroring with this message

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/workspace/node_modules/firebase-frameworks/dist/sveltekit/firebase-aware.js' imported from /workspace/node_modules/firebase-frameworks/dist/index.js

at .NodeError ( [node:internal/errors:399](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Ferrors&line=399&authuser=0&hl=en&project=dcos-4a45f) )
at .finalizeResolution ( [node:internal/modules/esm/resolve:326](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Fmodules%2Fesm%2Fresolve&line=326&authuser=0&hl=en&project=dcos-4a45f) )
at .moduleResolve ( [node:internal/modules/esm/resolve:945](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Fmodules%2Fesm%2Fresolve&line=945&authuser=0&hl=en&project=dcos-4a45f) )
at .defaultResolve ( [node:internal/modules/esm/resolve:1153](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Fmodules%2Fesm%2Fresolve&line=1153&authuser=0&hl=en&project=dcos-4a45f) )
at .nextResolve ( [node:internal/modules/esm/loader:163](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Fmodules%2Fesm%2Floader&line=163&authuser=0&hl=en&project=dcos-4a45f) )
at .ESMLoader.resolve ( [node:internal/modules/esm/loader:838](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Fmodules%2Fesm%2Floader&line=838&authuser=0&hl=en&project=dcos-4a45f) )
at .ESMLoader.getModuleJob ( [node:internal/modules/esm/loader:424](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Fmodules%2Fesm%2Floader&line=424&authuser=0&hl=en&project=dcos-4a45f) )
at .ESMLoader.import ( [node:internal/modules/esm/loader:525](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Fmodules%2Fesm%2Floader&line=525&authuser=0&hl=en&project=dcos-4a45f) )
at .importModuleDynamically ( [node:internal/modules/esm/translators:110](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Fmodules%2Fesm%2Ftranslators&line=110&authuser=0&hl=en&project=dcos-4a45f) )
at .importModuleDynamicallyCallback ( [node:internal/process/esm_loader:35](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Fprocess%2Fesm_loader&line=35&authuser=0&hl=en&project=dcos-4a45f) )

Did I miss to update an dependency? 🤔

@ideodora
Copy link

ideodora commented Apr 19, 2023

@austincrim I think firebase serve with sveltekit run through the code bellow.

const npmBin = spawnSync("npm", ["bin"], { cwd }).stdout?.toString().trim();

It seems to use 'npm bin` which removed since npm v.9
https://github.blog/changelog/2022-10-24-npm-v9-0-0-released/#%E2%9A%A0%EF%B8%8F-notable-breaking-changes
npm bin has been removed (use npx or npm exec to execute binaries)

Would you mind to tell me your working environments?

mine:
os: debian bullseye
node: v18.15.0
npm: 9.5.0
firebase-tools: 11.27.0
sveltekit: @sveltejs/kit@1.15.7

UPDATE:
Downgraded the npm from 9 to 8, firebase serve works as expected.

related:
#5705

ProfHercules pushed a commit to ProfHercules/firebase-tools that referenced this pull request May 5, 2023
Co-authored-by: James Daniels <jamesdaniels@google.com>
@symbolicsorcerer
Copy link

I'm seeing this. Have tried node@16 and node@18, and npm@8 and npm@9. Both firebase serve and firebase emulators:start give me the "can't find vite" error.

talltavern-web/frontend on  main [!?] via  v18.16.1
❯ n
     copying : node/16.20.1
   installed : v16.20.1 (with npm 8.19.4)

talltavern-web/frontend on  main [!?] via  v16.20.1
❯ npm bin
/home/ss/src/talltavern-web/frontend/node_modules/.bin

talltavern-web/frontend on  main [!?] via  v16.20.1
❯ npm bin .
/home/ss/src/talltavern-web/frontend/node_modules/.bin

talltavern-web/frontend on  main [!?] via  v16.20.1
❯ ls $(npm bin .)
acorn         esvalidate   loose-envify           pbjs                    rimraf        tailwind
atob          fxparser     metro                  pbts                    rollup        tailwindcss
autoprefixer  image-size   metro-inspector-proxy  playwright              sass          terser
browserslist  jiti         metro-symbolicate      playwright-core         semver        tsc
cssesc        js-yaml      mime                   prettier                sorcery       tsserver
envinfo       jscodeshift  mkdirp                 proto-loader-gen-types  sucrase       uglifyjs
esbuild       jsesc        nanoid                 react-native            sucrase-node  update-browserslist-db
eslint        json5        node-which             regjsparser             svelte-check  vite
esparse       logkitty     parser                 resolve                 svelte-kit

talltavern-web/frontend on  main [!?] via  v16.20.1
❯ ls $(npm bin .) | grep vite
vite

talltavern-web/frontend on  main [!?] via  v16.20.1
❯ npm -v
8.19.4

talltavern-web/frontend on  main [!?] via  v16.20.1
❯ ls -lah $(npm bin .) | grep vite
lrwxrwxrwx   1 ss ss   19 Jul 17 21:27 vite -> ../vite/bin/vite.js

talltavern-web/frontend on  main [!?] via  v16.20.1
❯ vite


  VITE v4.4.4  ready in 508 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

talltavern-web/frontend on  main [!?] via  v16.20.1 took 2s
❯ export GOOGLE_APPLICATION_CREDENTIALS="/home/ss/talltavern-key.json"
firebase emulators:start
i  emulators: Starting emulators: functions, firestore, hosting, storage

 (x2)
 (x3)

   Thank you for trying our experimental support for Svelte on Firebase Hosting.
   While this integration is maintained by Googlers it is not a supported Firebase product.
   Issues filed on GitHub will be addressed on a best-effort basis by maintainers and other community members.

   Documentation: https://firebase.google.com/docs/hosting/frameworks/frameworks-overview
   File a bug: https://github.com/firebase/firebase-tools/issues/new?template=bug_report.md
   Submit a feature request: https://github.com/firebase/firebase-tools/issues/new?template=feature_request.md

   We'd love to learn from you. Express your interest in helping us shape the future of Firebase Hosting: https://goo.gle/41enW5X

i  emulators: Shutting down emulators.
i  hub: Stopping emulator hub

Error: Could not find the vite executable.

Having trouble? Try firebase [command] --help

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants