Remix as a RESTful API for mobile apps

[idle lark]

I know that remix loaders and actions can be used as a API endpoint.

But I have a concern that in loaders and actions, we sometimes redirect users to another page without sending a proper JSON response. If I am consuming APIs from Remix from a mobile app, I would expect JSON response all the time. So what's a better way to deal with that?

[atomic dune]

Don’t use the same loaders used by your web UI for the API, instead use resource routes to build an API and e you said always return json responses

[sick sluice]

Quick question. What are resource routes? 😢

[idle lark]

I actually thought of this earlier, but I am afraid this might introduce some code duplication issue. Maybe we can write an extra layer over the services, then consume those both in loaders and resources routes.

[idle lark]

Resource routes are not part of your App UI and these doesn't render HTML. Example: Dynamically generating PDFs, sending JSON responses, sending images etc.

[atomic dune]

Yeah move shared code to another file and use it in both routes

[atomic dune]

Routes without an export default

[sick sluice]

I see. Thanks for clearing it up!

[latent tulip]

anybody know if we can use OpenAPI with remix for creating api docs?

[atomic dune]

OpenAPI is a spec right? you can use that yeah

[latent tulip]

yes, sorry, i meant the documentation generator of it. https://www.npmjs.com/package/fastify-openapi-docs

there is an exmaple

[tulip bolt]

Getting late to the convo: but you can treat your resource routes as the de-facto APIs, and just re-export them in your UI routes

// routes/foo.jsx
export { loader } from './api/foo.jsx';

[atomic dune]

I would rather move the business logic code to another function and use them in both routes, for example in your web routes you may use cookies to authenticate the user, but in an API you may use the Authorization header

in actions this is worst, because web route actions uses formData but api routes actions may use json

[tulip bolt]

Valid points

[minor nexus]

Was also and still curious about this question. Are there examples of using a remix resource api with a mobile client? some demo's docs writeups on this? anyone has attempted it?

[buoyant saddle]

I use this in production.
I had resource routes that live in /api/ and my main website on a different path route.

The resource routes have loader and actions but no React, (hence .ts files)
I have an api.server.ts file which has a bunch of createUserApi() stuff that is used in both the resource route and display routes.

API routes return JSON, display routes are standard form data for whatever

[buoyant saddle]

like this https://remix.run/docs/en/v1/guides/resource-routes

[minor nexus]

Makes sense. May i ask what client foundation you use to@consume the remix api? I wonder of there is some abstraction library that you would want to put in there to easy ali@testing and dev. So many good ones out there. Your missing out just writing your oen bare bones api - or not? Like auth sessions handlement etc.

I looked wt ionics capitator and react native the latter seems obsolute in dx compared to ionics solution. Problem@capitator has no good updated examples just some outdated repros.

These questions are ment to get a higher level mental model of best practice in regard of building a mobile client for renix by no means im skilled enough atm to approach this but would love to get a basic understanding🙏

[cyan dirge]

@minor nexus I use Capacitorjs with Remix for most of my apps, also write capacitorjs native plugins.

Capacitorjs has native http plugin , you would just use fetch against your remix resource route or simply just point serverurl to remix webpage depending your use case

Their http plugin uses native iOS/android so no need to worry about cors or anything between mobile app and remix api

[minor nexus]

So its loads the rendered webpage in an web container in the app? Like what chatgp does with there ios app

[cyan dirge]

I have no idea about chatgpt, never used it.

Yeah some of my apps are like that. Imagine it like electron on desktop. Just web + special connection to operating system things.

[buoyant saddle]

I just wrote it barebones, it's not too complicated. I check auth via JWTs and go from there

[minor nexus]

Cool will have a look at it

[compact stone]

Another option would be to use trpc, put it on a resource route and use that for the mobile app

[minor nexus]

ah okay i look into it thank you

[orchid hare]

we have mobile apps writting in ionic and are just using the fetch api, works like a charm. We have the remix app setup as our CMS and we have exposed resource routes for the API

[cyan dirge]

Yeah I do same , except the ionic framework part.

[orchid hare]

by the way the ionic documentation discourages pointing to the webpage in production... not sure if that is a legacy concern

[cyan dirge]

They do this because if the network is down, you end up with a 404 error, you can’t then refresh or anything.

[cyan dirge]

I’ve been doing this for years. I use it for internal apps where I control (MDM) all the devices, none of them on the App Store.

[cyan dirge]

Of course you can use service workers and such to cache.

Do the best for your use case. In mine, it’s server url.

[minor nexus]

I look for as native as possible not much showcase for calitator apps. For react native there is a big list of alps. Any alppstore apps you know of in the store on capitator?

[orchid hare]

Not sure I understand you context here? We were talking about remix and apis?

[cyan dirge]

@minor nexus you should do whatever your use case calls for. If you want Native elements then go with React Native, if you want web + native plugins , then you can go with Capacitorjs. If you dont want a native app, you can go with a PWA. There is no right or wrong answer, and "showcase" is a poor example, as you know the extent of native. There is nothing you can do in CapacitorJS you cant in React Native and vice versa.

I prefer CapacitorJS because my use case is a Remix project + a few connections to real devices, that you cant on web, such as TCP sockets. While if i was a mobile app first, maybe React Native + Remix backend is more suitable.

You do whatever your customers want, with some internal worry such as cost, and security but thats the only goal.

[minor nexus]

thank you guys for the support.

Im also looked at https://github.com/HorusGoul/remix-react-native-web-starter but its a bit outdated. could you point me to some repro that showcases how to do a basic app with auth with ionic or react-native for that matter? there seems to be not much examples yet for remix.

[minor nexus]

Hi Aaron i ment more like native UI

[cyan dirge]

That’s react native web, not react native mobile.

I think your overconfusing it. If you want Native UI you want react native mobile, and therefore Remix won’t help you at all, only resource routes but as most would tell you, just use Rails or some other backend instead

You won’t be able to use remix auth with react native for example.

[minor nexus]

yes right react native mobile ui that connects to a remix.api

perhaps i should just search for a next.js + react native mobile version it wouden't be to hard to convert back to remix i guess.

[cyan dirge]

At that point it’s just a “express api” and not really any remix benefits

[minor nexus]

from what I understand if you would use a webview you would just wrapp your app inside a container ("the app" and you could use things like auth etc like regular its then basically just your remix app that runs in the webview

[cyan dirge]

There’s no difference between nextjs and remix

[cyan dirge]

Yeah it’s how I do it but you can also write native plugins

[minor nexus]

im integrating with an existing remix app but i get your point nothing remixy about implementing api with a mobile client.

[cyan dirge]

So JavaScript that can control swift and kotlon code

[minor nexus]

would you mind to happen have an example ? or some good reference repro you started from

[cyan dirge]

So for example I have a app that’s a web view yes, where I have one function that connects to my swift code to scan for receipt printers

[minor nexus]

you can if you use ionic use the platform specific plugins right like apple pay for example not that i need that. but that is the most easy way to get things started

the swift code would be a "custom" plugin for ionic capitator for example right

[cyan dirge]

I don’t use ionic framework in my code

Yes

So you write a swift function in well swift.

And then you import it in your JavaScript

So it acts as if it’s a JavaScript clientside library , but really it’s swift code

And therefore you have access to actual native plugins. That’s only for simple functions though, not UI elements

You would need react native for real UI elements

In my case I’m fine with wrapper + connecting to native functions as I need them, Bluetooth, tcp/udp sockets, nfc etc etc. and sticking with a web design look

[minor nexus]

your not using ionic but react native mobile instead then?

how would you do auth with remix-auth for example. just true the webview?

i have tried like 4 example repro's but they are all outdated and not good documented perhaps i should just read the react native docs and try to integrate it with my remix project.

[cyan dirge]

Ionic owns CapacitorJS. i mean i dont use "ionic react" which is a series of "native looking" UI elements. i just use Remix with Tailwind

[minor nexus]

ah right ok sorry for the confusion

[cyan dirge]

So for e.g.

async function ScanPrinter(){
let result = await ScanPrinters()
setPrinters(result)
}
return (
<><div onClick={() => ScanPrinter()}>SCAN FOR PRINTERS</div>

in my remix code.

then i have export async function ScanPrinters(){
const { value } = await Echo.performDiscovery();
return value
}

and i have

import { registerPlugin } from '@capacitor/core';
const Echo = registerPlugin('Echo');
export default Echo;

then in my Swift code, i have a plugin that scans for printers, and return the value.

So when the user clicks on scan for printers, it calls the capacitorjs plugin aka Swift code.. and then returns it

[minor nexus]

ah that is a really cool way to work Zak.

[cyan dirge]

If the user does it in a regular browser, nothing happens.

Remix will just return like function not found, in console log

[minor nexus]

how about https://github.com/ionic-team/capacitor-remix-templates/tree/main/remix-app-server-ts do you think that would be a good starting point or would you suggest something else?

nice you can really interweave the code for multi platform

[cyan dirge]

you dont need anything.

just have a remix project as normal and run "cap init", "cap add android" "cap add ios" as needed.

You dont need anything special

Most of my apps dont have auth, but i do have one that does, and it uses remix-auth

but yes, its basically web, so it acts as web anyways.

[minor nexus]

its very clear to me, only 1 thing i wonder if you afe to just load the remix app with a webview, would it be possible to make a modification in the ui based on if its loaded true app or webview?

i think i need to modify my ui quite a bit for the mobile version so probably i have a different path in my remix folder app with the ui for my application and then i re-use a remix api resource routes and re-use them in my remix and mobile app to load data.

[cyan dirge]

you can use CapacitorJS official plugins to tell if its "web" or "mobile"

Hmm sec

CapacitorJS.isNativePlatform() , will return if its running natively or not.

[minor nexus]

a little more complex case then yours just wrapping the webapp into the mobile wrapper

[cyan dirge]

https://capacitorjs.com/docs/apis/device

https://capacitorjs.com/docs/apis/device#deviceinfo deviceinfo specifically

if(!Capacitor.isNativePlatform()){
return
}. <-- for example

if(Capacitor.isNativePlatform()){
Device.getBatteryInfo().then((value) => {
setbatteryinfo((value?.batteryLevel*100).toFixed(2))
})}

In some apps i show battery life of the device, and obviously if battery doesnt exist because its not native, then it would be null aka not show.

i also have ones like

useEffect(() => async => {
if(Capacitor.isNativePlatform()){
StatusBar.hide()
}

Its both compiled for web, as well as native(well capacitorjs on device) so no worries with failures.

[cyan dirge]

Like what exactly? Your app is likely already responsive no? You can use useeffects and state to control the differences.

@minor nexus maybe if you describe your full use case, people can better help.

[minor nexus]

I need a seperate layout for the mobile edition.

like not a 1-1 of my remix web app layout so trying to figure out a way to perhaps seperate the mobile views i guess i probably should not use webviews in the ionic mobile container then.

[cyan dirge]

Then perhaps you want React Native, or Flutter or Native or something.

[sage iris]

Hey, @minor nexus have u tried remix with capacitor? I also need to get a mobile app, ideally with existing remix app, cuz it shares a ton of code

[minor nexus]

Not fond of it but could work better than resct native

I would go swift ui if you only need mac os and build you renix app to serve an api actually working on that

[sage iris]

man i really just want to stick with remix
But I get these weird random errors on android emulator only. no issue on ios simulator and also on web browser
File: http://10.0.2.2:3000/build/_shared/chunk-A4MHAHJ6.js - Line 8 - Msg: TypeError: Cannot read properties of undefined (reading 'links')
File: http://10.0.2.2:3000/build/_shared/chunk-W4D7SAEL.js - Line 1 - Msg: React Router caught the following error during render TypeError: Cannot read properties of undefined (reading 'links') [object Object]
File: http://10.0.2.2:3000/build/_shared/chunk-A4MHAHJ6.js - Line 8 - Msg: TypeError: Cannot destructure property 'default' of 't[e]' as it is undefined.
...

This has been bugging me like 20 hours now.. 😫

[minor nexus]

Auch know the feeling perhaps ask on a android discord or put it true gpt giving it context

Those chunks are part of the remix build probably not sure what you trying to do

[atomic dune]

what browser version? that looks like maybe the browser doesn't support some JS feature?

[sage iris]

The pain was I had no idea what the sourcec was. I thought maybe it had to do with SSR or remix etc. But I tried one last time with a fresh new remix app and configured Ionic capacitor before doing anything else. And it worked.. Then I copied all my other files(routes, components, models etc) and also installed dependencies few at a time (thought maybe some of the npm packages caused random errors)

Right now everything seems to work

[sage iris]

Yea I spent past 3 days trying to fix this, but sometimes you just have to restart I guess. Just like restarting the computer fixes some werird issues 🤣

[sage iris]

its just using the default browser in the emulator. didnt check the version, but thats probably not the issue cuz it works now.

BTW, after figuring this out, its really great to have a single codebase for my backend, 2 web frontends (admin, doctor), 1 frontend for the mobile app (patients)