Have Wasp support producing mobile (smartphone) client app

[Martinsos]

Idea for the future is to have Wasp being able to produce a mobile version of the app!

So for example, it could produce a mobile client/app, besides the web client.

Main thing to explore here is react-native, possibly expo.

@ErlisK did some initial playing with this on his own, and manually got Wasp app running with react-native to some degree. Here is Discord convo where he talks about it a bit.

Some of the main stuff that @ErlisK said:

So effectively you need to duplicate the functionality in .wasp/out/web-app/src/api.js for storing the auth token for future requests (you can skip this step for unauthenticated requests). For the login itself, you just need to make a post request to /auth/login with the payload {username, password}, again just replicating whats happening in .wasp/out/web-app/src/auth/login.js.

For your own operations (ie not out of the box provided by wasp) a query/action route is made (eg. operations/get-posts) which you then make a post request passing through the args. There might be other things that need doing for own operations, haven't gone this far yet, but seems to me wasp can easily be used to spin up your own native app back end instead of having to deal with firebase (which I am personally not a fan of), or that one is not blocked from providing a native app version to their wasp app.

Heres the most simplified example I could make (using some online resources as well). Create an expo app using: npx create-expo-app mobile-app, and replace App.js with the following:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

export default function App() {

const onSubmitHandler = () => {
    const payload = { username: 'example@example.com', password: '########' };
    fetch(`http://localhost:3001/auth/login`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
    })
    .then(async res => { 
        console.log('res', res.status);
    })
    .catch(err => {
        console.log(err);
    });
};

return (
    <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <TouchableOpacity onPress={onSubmitHandler}><Text>Press Here</Text></TouchableOpacity>
        <StatusBar style="auto" />
    </View>
);

}

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });

> Assuming you have an expo app running, you should be able to login from the app.

> Theres probably an opportunity here for someone to make a react-native wasp client library since most of the non-business logic part is the same across every potential app.
Might even make sense to generate the react native files in the .wasp/out/ from a build command.

[ScorpionOO8]

I would love this!

[Martinsos]

Thanks @ScorpionOO8 :)! If you have any specific things you would like to see if Wasp goes in this direction, or ideas, let us know!

[ScorpionOO8]

@Martinsos I built a small proof of concept webapp with Wasp last month but put it down because I realized I needed the app to be a local mobile app for my use case to make sense. I wanted to be able to use notifications and have an icon on the users phone to click on instead of having to use the browser, since my use case would have required interacting with the app several times per day and using a browser for that is a pain.

[Martinsos]

NOTE: For @ScorpionOO8 's case, even just PWA might be enough.

[infomiho]

After some research, I believe that the best first step would be to extract the data layer into an agnostic piece and then attack this problem.

[Zeko369]

Using the new expo router it could even produce both web/mobile (even desktop) apps from a single codebase with a lot of code-reuse (like up to 90% in most cases) 🤔

[Martinsos]

Hah folder based routing :D. Never :D. Kidding, but not for now at least :D.

But you would share a lot of code this way -> however that means people are not writing normal React, right? Instead they are writing a bit different stuff, what are they writing really, some kind of Expo components (I don't know much about Expo)? We might scare people away that way, if it is not React.

[Martinsos]

Btw I love the diagram battle that is happening here :D.

[Case-E]

It looks like I am going to continue using Wasp for the web app I am building at this time. We will soon need to have mobile apps both Android and iOS, I would love for this to be supported in the future.

At this time, I am thinking we will build our web app to be mobile friendly before going full-native. When we do go full native and Wasp still doesn't support it, we would look at implementing mobile apps using a different backend and the same DB (not ideal but I'm so hooked to Wasp at the moment, everything else seems too tedious).

[lucamjj]

Did you guys consider Capacitor? It should be pretty straightforward to add and produce a hybrid app

[Martinsos]

It looks like I am going to continue using Wasp for the web app I am building at this time. We will soon need to have mobile apps both Android and iOS, I would love for this to be supported in the future.

At this time, I am thinking we will build our web app to be mobile friendly before going full-native. When we do go full native and Wasp still doesn't support it, we would look at implementing mobile apps using a different backend and the same DB (not ideal but I'm so hooked to Wasp at the moment, everything else seems too tedious).

I hope we will have improvements on this front in time for you! Hard to say exactly yet when that will be though, and in which order exactly we will go for it. Instead of using only database, you could also use Wasp's backend, by exposing functionality via api. What would probably be the most useful for you in that case, is if we provided SDK for Wasp Auth to be used in Java / Swift (which we have an issue for). Another thing that would help is if we also made it a bit easier to use Operations (Query, Action), in the sense that we produce docs for them and guarantee stability of the API, then you could easily use them from Java / Swift. We could go even further and produce SDK for them for Java / Swift. Then you wouldn't have to additional expose them via api.

Anyway, let us know as you progress if you will have any more ideas what you will want to see from our side, and we will do our best to help out.

[Martinsos]

Did you guys consider Capacitor? It should be pretty straightforward to add and produce a hybrid app

I think that would be pretty interesting, we haven't yet investigated it but we know about it! We should certainly check it out. Expo is also quite interesting.

[Case-E]

It looks like I am going to continue using Wasp for the web app I am building at this time. We will soon need to have mobile apps both Android and iOS, I would love for this to be supported in the future. At this time, I am thinking we will build our web app to be mobile friendly before going full-native. When we do go full native and Wasp still doesn't support it, we would look at implementing mobile apps using a different backend and the same DB (not ideal but I'm so hooked to Wasp at the moment, everything else seems too tedious).

I hope we will have improvements on this front in time for you! Hard to say exactly yet when that will be though, and in which order exactly we will go for it. Instead of using only database, you could also use Wasp's backend, by exposing functionality via api. What would probably be the most useful for you in that case, is if we provided SDK for Wasp Auth to be used in Java / Swift (which we have an issue for). Another thing that would help is if we also made it a bit easier to use Operations (Query, Action), in the sense that we produce docs for them and guarantee stability of the API, then you could easily use them from Java / Swift. We could go even further and produce SDK for them for Java / Swift. Then you wouldn't have to additional expose them via api.

Anyway, let us know as you progress if you will have any more ideas what you will want to see from our side, and we will do our best to help out.

Thank you for the great suggestions @Martinsos! If the auth is supported via an SDK, that would be super helpful! At the moment we are looking at building out the apps using React Native.

[Martinsos]

Another ask for it on Discord: https://discord.com/channels/686873244791210014/1244415420446802064/1244415420446802064 .

My SAAS app will have a mobile version. I'm using the dummy starter project for the web app, but when the time comes, I'll need to be able to do crud operations from my react native app. I know open-saas has a lot under the hood that makes web app development faster, but can I leverage any of this for my react-native app? I'm worried about how I might connect the mobile app to this one.

[Martinsos]

One more https://discord.com/channels/686873244791210014/920312576133443634/1251620275653443655 .

[chakravarthi-bb]

Would love to have this

[SkrylnikMikhail]

I'd also love to be able to use WASP Auth on react native app

[wanghaisheng]

anything update

[Martinsos]

We haven't started working on this yet but it will certainly be happening! I can't say exactly when, but I hope we can start working on it this year. We will keep you posted here once we get started with it!

[sachdva]

Hey let me know about this as well, I'm already knee deep in the Wasp Development with a Web App, and I'm so happy at how fast I've been able to iterate! Still, I haven't an idea of how to integrate with a mobile app yet. Because authentication is done via wasp, I don't see another way then to unwasp and connect with supabase. (But of course there's so much more that wasp provides and having to rewrite everything isn't how I'd like to move forward).

[Martinsos]

Hah unwasp :D. Yeah, so basically authentication is stopping you because you can't use it in the mobile app, so that is the first thing we should tackle! We have a separate issue for that here, and that will probably happen quite sooner than Wasp having full support for producing a mobile app, so I suggest keeping an eye on that: https://github.com/wasp-lang/wasp/issues/1973 .