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