Wasp•3w ago

Desktop Client

How to achieve a desktop client using the Wasp backend and database? There is an example with Expo (for mobile), but didn't found anything for desktop. What advice or paths to follow and/or investigate?

10 Replies

kapa.ai•3w ago

Hi @NEROX. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Wasp does not currently provide built-in support or official examples for creating a desktop client. However, you can still build a desktop client that interacts with your Wasp backend and database by treating the Wasp server as a standard HTTP API. Here are some approaches and advice based on the available information: 1. Use the Wasp Backend as an HTTP API Wasp generates a backend (Node.js server) that exposes endpoints for authentication and your custom operations. You can consume these endpoints from any client, including a desktop app, by making HTTP requests. This is similar to how you would interact with the backend from a mobile app or other external client. For example, you can POST to /auth/login or call your custom operations by POSTing to the appropriate endpoints, as described for mobile clients using React Native or Expo:

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.
...wasp can easily be used to spin up your own native app back end instead of having to deal with firebase...

Github Issue: Mobile client app 2. Desktop Client Technologies You can use frameworks like Electron or Tauri to build a desktop application. These frameworks allow you to create cross-platform desktop apps using web technologies (HTML, CSS, JS/TS, React, etc.). Your desktop app would communicate with the Wasp backend via HTTP requests, just like a web or mobile client. 3. Authentication and State You will need to handle authentication tokens and session management in your desktop client, similar to how you would in a mobile app. The Wasp-generated web client stores auth tokens and manages sessions, so you may need to replicate this logic in your desktop client. 4. SDKs and Future Directions There is discussion in the Wasp community about generating SDKs for different platforms (e.g., TypeScript, Java, Swift) to make it easier to interact with Wasp backends from various clients, but this is not yet available:

Another option might be to not have Wasp know about all the clients, but instead provide SDK or multiple SDKs... For example, it could provide TS SDK for interacting with your queries and actions, and you can import that in any JS code and use it from there.

Github Issue: Support for multiple clients Summary - Build your desktop client using Electron, Tauri, or similar. - Interact with the Wasp backend via HTTP requests (for auth, queries, actions). - Implement token/session management as needed. - There is no official Wasp desktop client example, but the approach is similar to the mobile client workaround. If you need more specific guidance on implementing authentication or consuming Wasp operations from a desktop app, you can refer to the mobile client examples and adapt them for your desktop technology of choice. The Wasp community is also open to feedback and contributions in this area, as multi-client support is an ongoing topic of interest. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•3w ago

@kapa.ai having a custom token/session management implemented, and api endopints (I had already an extension client built with Vite+React), which technologies would you recommend to investigate about them for that?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, if you already have custom token/session management and API endpoints, and you’re building a client (such as a browser extension) with Vite + React, here are the technologies and approaches recommended or discussed in the Wasp community: 1. JWT (JSON Web Tokens) for Auth
The community suggests using JWTs for authenticating third-party or external clients. You can create a custom API endpoint in your Wasp backend (e.g., /api/generate-jwt) that issues JWTs upon successful authentication. The client then stores the JWT and sends it in the headers for subsequent API requests. This is a common and recommended pattern for custom clients, including browser extensions and potentially desktop apps.
Example implementation and discussion:
- Use a custom API endpoint to generate JWTs. - Store the JWT in local storage (or a secure equivalent for your client). - Send the JWT in the headers of each API request and verify it on the server side
Discord: Best Practices for Auth in Chrome Extension 2. HTTPS for Secure Communication
Always use HTTPS for communication between your client and the Wasp backend to ensure data is transmitted securely. This is standard advice and applies to all client types.
Discord: Best Practices for Auth in Chrome Extension 3. Custom API Endpoints in Wasp
Wasp supports defining custom HTTP API endpoints, which you can use for authentication, token generation, or any other custom logic. You can implement these endpoints in your Wasp app and consume them from your client using standard HTTP libraries (like Axios or fetch).
Wasp Docs: Custom HTTP API Endpoints 4. Token Storage
For browser extensions, the community suggests using local storage for JWTs, but you should be aware of the security implications and consider using more secure storage mechanisms if available (e.g., Chrome extension storage APIs). 5. Session Management
Since Wasp’s default session management is tied to its web client (using localStorage), for custom clients you’ll need to replicate session/token handling logic. The community has discussed duplicating the logic from .wasp/out/web-app/src/api.js for storing and sending tokens in custom clients (e.g., React Native, browser extensions)
Github Issue: Mobile client app Summary of technologies to investigate: - JWT (jsonwebtoken library for Node.js) - HTTPS (always enabled on your backend) - Custom API endpoints in Wasp - Secure storage for tokens (localStorage, Chrome extension storage, etc.) - HTTP libraries for your client (fetch, Axios) If you need to see a code example for generating and using JWTs in Wasp, refer to the Discord thread for a sample implementation of a /api/generate-jwt endpoint and its usage in a client context. If you need more advanced or platform-specific storage, look into the APIs provided by your client environment (e.g., Chrome extension storage API for extensions, Electron’s secure storage for desktop apps). If you need further details on any of these steps, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•3w ago

@kapa.ai where is the mobile Expo app example

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources contain an example of integrating a Wasp backend with a mobile app using Expo and React Native. This example is not an official, full-featured demo, but rather a proof-of-concept shared in a GitHub issue. The approach involves creating an Expo app and making HTTP requests to the Wasp backend for authentication. Here is a simplified version of the example provided:

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

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

This example demonstrates how to perform a login by POSTing to the Wasp backend's /auth/login endpoint from an Expo app. You would need to handle token storage and session management yourself in the mobile app. The discussion also suggests that creating a React Native Wasp client library could further streamline this process in the future, but such a library does not currently exist Github Issue: Have Wasp support producing mobile (smartphone) client app. There is no official, full-featured Expo mobile app example in the Wasp documentation at this time. The available example is community-contributed and serves as a starting point for further exploration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•3w ago

@kapa.ai the example of the app is this: https://github.com/wasp-lang/wasp-expo-app, keep that in mind

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources provided do not mention or reference the repository https://github.com/wasp-lang/wasp-expo-app, nor do they provide details about an official Expo app example at that location. The only information available in the sources relates to community discussions and proof-of-concept code snippets for integrating Wasp with Expo/React Native, but not a dedicated or official example repository. If you need information specifically about https://github.com/wasp-lang/wasp-expo-app, I do not have details about it in the current knowledge sources. If you have questions about the general approach to connecting a mobile client (such as one built with Expo) to a Wasp backend, I can provide guidance based on the available sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

toticozeni•3w ago

Hey @NEROX , we don't have any examples for desktop applications yet. This domain is not really my forte. I know @Carlos had some ideas when we internally discussed the idea. So he might know a bit more. @Carlos could you just list some potential technologies which could help NEROX with direction? I think that that you can generally copy the patterns from wasp-expo-app on how to separate the Wasp part from the "external client" part, and how to communicate between them.

Carlos•3w ago

@miho is your man

miho•3w ago

wasp-tauri-app wen 😄 I think @franjo told you what I would tell you,

I think that that you can generally copy the patterns from wasp-expo-app on how to separate the Wasp part from the "external client" part, and how to communicate between them.

I think we can play around and maybe build an example for you, but this week is really crowded for me because I'm going away until the end of the month and trying to finish as much things as possible.

Gaming

Programming

Desktop Client

Did you find this page helpful?