ionic-team/capacitor-solidjs-templates

Build native iOS, Android, and Web apps with Capacitor, SolidJS, and Vite

Capacitor Templates for SolidJS (and vite)

This repository holds production ready Capacitor templates for building native mobile applications using SolidJS + vite. Using Capacitor, you can quickly build out a native mobile application for iOS and Android using web technology, such as SolidJS.

Getting Started

Be sure to follow our getting started guide for Capacitor to setup your environment correctly. Once your environment is set up for mobile development, you can use degit to clone one of these Capacitor templates and start building your native app with SolidJS!

When developing, you can use vite just as you would for a standard web application. For these templates, you can run npm start to boot up the vite dev server with Hot Module Replacement (HMR). Once you are ready to test your app on mobile, you can use one of the following commands to build and run your native app on your mobile device.

iOS

npm run build
npx cap run ios

Android

npm run build
npx cap run android

note: The Capacitor + SolidJS dependencies are maintained via pnpm via pnpm up -Lri. This is the reason you see a pnpm-lock.yaml. That being said, any package manager will work. The pnpn-lock.yaml file can be safely be removed once you clone a template if you would like to use another package manager like npm or yarn.

Deploying to App Stores

Once you are ready to deploy your app, you can follow our guides building your native application for the Apple App Store or the Google Play Store.

Template List

Javascript template

npx degit ionic-team/capacitor-solidjs-templates/js my-project
cd my-project
npm install # or pnpm install or yarn install

Typescript template

npx degit ionic-team/capacitor-solidjs-templates/ts my-project
cd my-project
npm install # or pnpm install or yarn install

Typescript minimal template

npx degit ionic-team/capacitor-solidjs-templates/ts-minimal my-project
cd my-project
npm install # or pnpm install or yarn install

Typescript unocss template

npx degit ionic-team/capacitor-solidjs-templates/ts-unocss my-project
cd my-project
npm install # or pnpm install or yarn install

Typescript windicss template

npx degit ionic-team/capacitor-solidjs-templates/ts-windicss my-project
cd my-project
npm install # or pnpm install or yarn install

Typescript windicss template + basic file base routing

npx degit ionic-team/capacitor-solidjs-templates/ts-router my-project
cd my-project
npm install # or pnpm install or yarn install

Typescript bootstrap (5) template

npx degit ionic-team/capacitor-solidjs-templates/ts-bootstrap my-project
cd my-project
npm install # or pnpm install or yarn install

Typescript + tailwindcss template

npx degit ionic-team/capacitor-solidjs-templates/ts-tailwindcss my-project
cd my-project
npm install # or pnpm install or yarn install

Typescript + sass template

npx degit ionic-team/capacitor-solidjs-templates/ts-sass my-project
cd my-project
npm install # or pnpm install or yarn install

Typescript + vitest template

npx degit ionic-team/capacitor-solidjs-templates/ts-vitest my-solid-project
cd my-solid-project
npm install # or pnpm install or yarn install

Typescript + uvu template

npx degit ionic-team/capacitor-solidjs-templates/ts-uvu my-solid-project
cd my-solid-project
npm install # or pnpm install or yarn install

I don't see a template that matches my need?

You wish there was a template with your favorite library?

Feel free to make a pull request. Copy one of the template already available, tweak it, name it properly and make a PR. See contributing below.

Contributing

This project is managed with pnpm. You should install it first to test out your template or contribute to an existing one.

You can create your own template and prefix it with ts- or js- and giving it a name that describe the purpose.

To update all dependencies you can run:

pnpm up -Lri

Community

You learn more about Capacitor on the Capacitor Website and come chat with us the Ionic Discord if you have any questions. For Solid questions, you can learn more on the Solid Website and join the SolidJS Discord