ionic-team / capacitor-remix-templates

Build native iOS, Android, and Web apps with Capacitor and Remix.run 💿

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:

• architect
• cloudflare-pages
• cloudflare-workers
• express
• fly
• netlify
• remix-app-server
• vercel

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

capacitor-remix-templates's Issues

Problems Running Template

Since there are no specific instructions provided on how to run this template other than change the directory and run npm install....

That's what I did and this is the output I get when trying to run the application on device

aaronksaunders@Aarons-14MacBookProM1Pro my-ionic-remix-app % ionic cap build 
? What platform would you like to build for? ios
> npm run ionic:build

> ionic:build
> npm run build


> build
> remix build

Building Remix app in production mode...
Built in 154ms
> capacitor sync ios
[capacitor] [error] The web assets directory (./public/build) must contain an index.html file.
[capacitor]         It will be the entry point for the web portion of the Capacitor app.
[ERROR] An error occurred while running subprocess capacitor.
        
        capacitor sync ios exited with exit code 1.
        
        Re-running this command with the --verbose flag may provide more information.
aaronksaunders@Aarons-14MacBookProM1Pro my-ionic-remix-app % 

Capitator remix example IOS app shows a white screen?

✔ Copying web assets from build to ios/App/App/public in 5.74ms
✔ Creating capacitor.config.json in ios/App/App in 465.50μs
✔ copy ios in 10.95ms
✔ Updating iOS plugins in 1.00ms
✔ Updating iOS native dependencies with pod install in 1.51s
✔ update ios in 1.52s
✔ Please choose a target device: › iPad (10th generation) (simulator) (5A2B9662-1701-4E47-B0DA-F88E1804A171)
✔ Running xcodebuild in 9.14s
✔ Deploying Ap
<img width="450" alt="Screenshot 2023-03-15 at 12 55 50" src="https://user-images.githubusercontent.com/90145421/225301992-8250e6ca-3205-47d5-b363-274e0150f770.png">
p.app to 5A2B9662-1701-4E47-B0DA-F88E1804A171 in 17.74s````

It builds correctly but the example app shows a blog post in the remix version, the ios capitator app just shows an empty white screen.

Is this an expected behaviour?

I Expected that it would show the blog list in the IOS app too.

Adding ionic framework

Hi,
It's a very good job! But I can't use ionic components

How to reproduce :

• run on node 18 (same error with 14)
• install @ionic/react and ionicons
• white a simple functional component :

import { camera } from "ionicons/icons";
import { IonContent, IonFab, IonFabButton, IonIcon } from "@ionic/react";

export default function Index() {
  return (
    <IonContent>
      <IonFab vertical="bottom" horizontal="center" slot="fixed">
        <IonFabButton onClick={() => null}>
          <IonIcon icon={camera}></IonIcon>
        </IonFabButton>
      </IonFab>
    </IonContent>
  );
}

I got this error :

/Users/jeremie/Documents/PROJETS/RD/remixIonic/node_modules/@ionic/core/components/index.js:4
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:353:18)
    at wrapSafe (node:internal/modules/cjs/loader:1040:15)
    at Module._compile (node:internal/modules/cjs/loader:1076:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1166:10)
    at Module.load (node:internal/modules/cjs/loader:988:32)
    at Function.Module._load (node:internal/modules/cjs/loader:834:12)
    at Module.require (node:internal/modules/cjs/loader:1012:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/jeremie/Documents/PROJETS/RD/remixIonic/node_modules/@ionic/react/dist/index.js:6:20)
    at Module._compile (node:internal/modules/cjs/loader:1112:14)

I have tested to add
serverDependenciesToBundle: ["@ionic/core"],
in remix.config.js but I don't have a better result.

Have you an idea ?

thx
Jeremie.

Hi, sorry super new to ionic and capacitor, can we use remix with ionic?

Hi Ionic Team,

What an amazing repo!

Can we use this repo with other services such as Ionic and CICD deployment to appstores etc?

Bests,

Sean.

capacitor.config server.url is not intended for use in production

The capacitor.config in these projects use server.url, which according to the documentation is not intended for use in production