SolidJS•4w ago

Help Configuring SolidStart with Capacitor JS

I'm trying to turn a SolidStart project into a Capacitor app so I can create mobile apps for iPhone and Android. I’m new to this and struggling to fully understand how to integrate Capacitor with my SolidStart app. I have a few questions I hope someone can help clarify: 1. Capacitor and SSR/CSR: - Once a Capacitor app is packaged, it’s essentially a client-side app running on a mobile device. So, I’m assuming that my app must be CSR (Client-Side Rendered) when using Capacitor, not SSR (Server-Side Rendered), correct? 2. Index.html and Capacitor Configuration: Capacitor requires a separate directory for built web assets (such as dist or www) and an index.html file at the root of this directory. I’ve read that the index.html file must have a <head> tag in order for Capacitor plugins to work properly. Here’s where I’m confused: - My SolidStart project has a <head> tag inside entry-server.tsx in the /src directory. Is this the correct place to make my edits for the <head> tag? - Alternatively, do I need to configure the app.config.ts file in a certain way, then run npm run build, and then manually edit the index.html file that gets output by that build command? 3. Server Preset What server preset should I use in app.config.ts?

export default defineConfig({
  ssr: true,
  server: { preset: "What goes here?" },
});

export default defineConfig({
  ssr: true,
  server: { preset: "What goes here?" },
});

Thanks in advance for your help!

5 Replies

ChrisThornhamOP•4w ago

I think I figured this out. It appears that you can't use "use server" with Capacitor. This means any server actions will need to be rewritten into API endpoints. So, if you're like me and built your app with SSR and heavy use of "use server", you'll have a lot of code to rewrite. 🤦‍♂️

Atila•4w ago

Yeah. That's a common issue with all hybrid app bundlers. Because of that, in Tauri we're exploring a way to sidecar a Node.js runtime so the SSR parts and bundles can run pretty much in the same way that you deploy a web app. meanwhile, for Tauri we usually recommend this kind of apps to use a remoteWindow and so it runs the fullstack app in a native window, then you can just check the env from your app and make the native calls. I'm sure Capacitor would have an alternative like that.

ChrisThornhamOP•4w ago

@Atila Thanks! I'll look at Tauri today. I'm just getting started with converting this app to mobile, so maybe Tauri is a better fit.

Atila•4w ago

if you want any help, give us a shout... I also created a template, it still needs updating from the last beta to stable 2.0 https://github.com/atilafassina/quantum

GitHub

GitHub - atilafassina/quantum: Tauri + SolidStart. Batteries Includ...

Tauri + SolidStart. Batteries Included 🔋. Contribute to atilafassina/quantum development by creating an account on GitHub.

ChrisThornhamOP•4w ago

Thank you. I'm currently going down the rabbit hole. Haha.

Gaming

Programming

Help Configuring SolidStart with Capacitor JS