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.
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 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.
iOS
npm run build
npx cap run ios
Android
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 http://localhost value.
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 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
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
The following templates are available for both JavaScript and TypeScript:
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.
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 Remix questions, you can learn more on the Remix Website and join the Remix Discord
