Wasp•3w ago

How to convert wasp react app to mobile app?

I would like to create mobile apps and if possible reuse the existing code. So a wrapper for mobile app would be good

2 Replies

Hi @p4j4r5. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Currently, Wasp does not provide official, first-class support for generating native mobile apps directly from your Wasp React app. However, there are several community-discussed approaches and ongoing explorations for reusing code and wrapping your Wasp React app for mobile: 1. Progressive Web App (PWA) One of the simplest ways to make your Wasp app more mobile-friendly is to enable PWA features. This allows users to "install" your web app on their mobile devices, providing an app-like experience (offline support, home screen icon, etc.). There is ongoing discussion about adding PWA support to Wasp, and it may be relatively straightforward by adding a manifest and service worker, possibly using a Vite plugin. This approach does not require rewriting your app and provides a good user experience for many use cases, though it is still a web app at its core and not a native appAdd support for PWA in Wasp. 2. Wrapping with Capacitor or Similar Tools Some users have considered wrapping the generated Wasp SPA (Single Page Application) with tools like Capacitor, which can package your web app as a native mobile app. This approach is experimental and may require some manual adjustments, but it allows you to reuse your existing React codebase. Expect some "hacky" workarounds, as this is not officially supported yetSupport for multiple clients. 3. React Native / Expo Approach There have been experiments with creating a separate React Native (or Expo) app that communicates with your Wasp backend via HTTP API calls. You can reuse some business logic and API endpoints, but the UI code will need to be rewritten using React Native components. For authentication, you can mimic the login flow by making POST requests to your Wasp backend's /auth/login endpoint, similar to how the web client works. Here’s a simplified example for an Expo 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);
    });
};

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);
    });
};

This approach requires you to manually handle authentication tokens and API calls, but it is possible to build a mobile client that works with your Wasp backendHave Wasp support producing mobile (smartphone) client app. 4. Future Directions: SDKs and Multiple Clients There are ideas in the Wasp community about generating SDKs (e.g., TypeScript, Java, Swift) for interacting with Wasp backends, which would make it easier to build mobile, desktop, or other types of clients that share business logic and API contracts. However, this is not available yet and is still under discussionSupport for multiple clients. --- Summary:
- For now, you can try PWA for a quick win, or experiment with Capacitor to wrap your SPA. - For true native apps, you’ll need to build a React Native/Expo app and connect it to your Wasp backend via HTTP. - Official, seamless code reuse and mobile support are not yet available, but are being discussed for the future. If you have specific needs or ideas, the Wasp team encourages you to join the discussion and share your use case! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @p4j4r5, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Carlos•3w ago

⬆️ the bot gave good recommendations 🙂

Gaming

Programming

How to convert wasp react app to mobile app?

Did you find this page helpful?