SolidJS•16mo ago•

5 replies

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

dist

www

www

) and an

index.html

index.html

file at the root of this directory. I’ve read that the

index.html

index.html

file must have a

<head>

<head>

tag in order for Capacitor plugins to work properly.

Here’s where I’m confused:

- My SolidStart project has a

<head>

<head>

tag inside

entry-server.tsx

entry-server.tsx

in the

/src

/src

directory. Is this the correct place to make my edits for the

<head>

<head>

tag?
- Alternatively, do I need to configure the

app.config.ts

app.config.ts

file in a certain way, then run

npm run build

npm run build

, and then manually edit the

index.html

index.html

file that gets output by that build command?

3. Server Preset
What server preset should I use in

app.config.ts

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!

SolidJS•16mo ago•

5 replies

ChrisThornham

Help Configuring SolidStart with Capacitor JS

dist

dist

www

www

) and an

index.html

index.html

file at the root of this directory. I’ve read that the

index.html

index.html

file must have a

<head>

<head>

tag in order for Capacitor plugins to work properly.

Here’s where I’m confused:

- My SolidStart project has a

<head>

<head>

tag inside

entry-server.tsx

entry-server.tsx

in the

/src

/src

directory. Is this the correct place to make my edits for the

<head>

<head>

tag?
- Alternatively, do I need to configure the

app.config.ts

app.config.ts

file in a certain way, then run

npm run build

npm run build

, and then manually edit the

index.html

index.html

file that gets output by that build command?

3. Server Preset
What server preset should I use in

app.config.ts

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!

Help Configuring SolidStart with Capacitor JS

Similar Threads

Help Configuring SolidStart with Capacitor JS

Similar Threads

Similar Threads

Similar Threads