Capacitor Templates for Remix.run
This repository holds production ready Capacitor templates for building native mobile applications using Remix. Using Capacitor, you can quickly build out a native mobile application for iOS and Android using web technology, such as Remix.
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 Remi!
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 remix 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.
npm run build npx cap run ios
npm run build npx cap run android
Setting your server.url variable
Remix is a full-stack framework. Meaning that your application needs a backend server to properly run your Remix app. When testing your application locally, you’ll need to set your
server.url variable to a currently running server. You can start a remix dev server with
npm start and then run
npx cap run <platform> on a separate process to start your Capacitor application. If your backend server is not running, your Capacitor Remix app will not work properly. When deploying your application to the App Store, be sure to set your
server.url variable to a hosted server and not the default
note: The Capacitor + Remix 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
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.
To download one of these templates, you use the following the command:
npx degit ionic-team/capacitor-remix-templates/<template> my-project cd my-project npm install # or pnpm install or yarn install
To use the TypeScript version of the template, add
-ts to the end of the template
# Use "remix-app-server" with TypeScript support npx degit ionic-team/capacitor-remix-templates/remix-app-server-ts my-project cd my-project npm 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.
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
js- and giving it a name that describe the purpose.
To update all dependencies you can run:
pnpm up -Lri
You learn more about Capacitor on the Capacitor Website and come chat with us the Ionic Discord if you have any questions. For Remix questions, you can learn more on the Remix Website and join the Remix Discord