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 attach 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.