Wasp•2mo ago

Display app version in UI

In my OpenSaaS, I added 'version:0.1.1' to the package.json file in /app/, and I want to display it on the UI. How do I accomplish that? I added the following to operations.ts export const getAppVersion = () => { const filename = fileURLToPath(import.meta.url); const dirname = path.dirname(filename); const packageJson = JSON.parse( readFileSync(path.join(dirname, '../package.json'), 'utf8') ); return packageJson.version; } updated main.wasp with query getAppVersion { fn: import { getAppVersion } from "@src/docfolio/operations", } and in the UI import { ggetAppVersion } from 'wasp/client/operations'; ... const { data: version } = useQuery(getAppVersion); console.log(version); but it returns '0.0.0'. Further research indicates that it's looking at the package.json in .wasp/out/server/. Is that where I should set it?

8 Replies

kapa.ai•2mo ago

Hi @Kynetix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I do not have enough information to answer your question specifically about displaying the app version in the UI for your OpenSaaS project. The knowledge sources provided don't contain information about accessing or displaying package.json version in a Wasp application's UI. However, I can provide some general information about versioning in Wasp projects based on the available knowledge sources: 1. Wasp has a concept of specifying the Wasp compiler version that should be used for a project. This is done in the main.wasp file using the wasp.version field within the app declaration. For example:

app todoApp {
  wasp: {
    version: "^0.13.0"
  },
  // ... other app configuration
}

app todoApp {
  wasp: {
    version: "^0.13.0"
  },
  // ... other app configuration
}

This specifies which versions of the Wasp compiler are compatible with the app Docs > Project > Customizing the App > API Reference (https://wasp-lang.dev/docs/project/customizing-app#api-reference). 2. The version field in Wasp currently only supports caret ranges (i.e., ^x.y.z) Docs > Project > Customizing the App > API Reference (https://wasp-lang.dev/docs/project/customizing-app#api-reference). 3. Wasp generates package.json files for both the client and server parts of your application. These are typically located in the .wasp/out/ directory Github Issue (closed): Different indentation/ordering of package.json output locally vs CI (https://github.com/wasp-lang/wasp/issues/482). Regarding your specific implementation attempt, it seems you're trying to read the version from a package.json file in your source directory, but Wasp might be using a different package.json file (the one it generates in .wasp/out/server/). To properly implement this feature, you might need to find a way to access the version information that Wasp uses or generates. However, the provided knowledge sources don't give specific information on how to do this in a Wasp project. For the most accurate and up-to-date information on how to implement this in a Wasp project, I recommend checking the official Wasp documentation or reaching out to the Wasp community for guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Kynetix, 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?

KynetixOP•2mo ago

@kapa.ai thanks for the feedback. Is there an alternate way to track the app's version? I want to be maintaining the versions when I publish to git, and have the version number displayed on the UI. It doesn't have to be in package.json

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books:

MEE6•2mo ago

Wohooo @Kynetix, you just became a Waspeteer level 3!

kapa.ai•2mo ago

---------------------- Thank you for your follow-up question. Based on the available knowledge sources, I can suggest an alternative approach for tracking and displaying your app's version in a Wasp project: 1. You could use the app declaration in your main.wasp file to specify a version for your application. This is similar to how Wasp tracks its own version compatibility. For example:

app todoApp {
  wasp: {
    version: "^0.13.0"
  },
  version: "0.1.1"
  // ... other app configuration
}

app todoApp {
  wasp: {
    version: "^0.13.0"
  },
  version: "0.1.1"
  // ... other app configuration
}

This approach is inspired by the discussion in Github Issue (closed): Add tracking of wasp version to the Wasp project (https://github.com/wasp-lang/wasp/issues/578), where they talk about adding version tracking to Wasp projects. 2. To access this version in your UI, you would need to expose it through a query. You could create a simple query in your operations.ts file:

export const getAppVersion = (_args, context) => {
  return context.entities.App.version;
}

export const getAppVersion = (_args, context) => {
  return context.entities.App.version;
}

Then, declare this query in your main.wasp:

query getAppVersion {
  fn: import { getAppVersion } from "@src/operations.js",
}

query getAppVersion {
  fn: import { getAppVersion } from "@src/operations.js",
}

3. In your UI component, you can use this query to fetch and display the version:

import { useQuery } from 'wasp/client/operations';
import { getAppVersion } from 'wasp/client/operations';

function VersionDisplay() {
  const { data: version, isLoading, error } = useQuery(getAppVersion);

  if (isLoading) return 'Loading...';
  if (error) return 'Error: ' + error;
  return <div>App Version: {version}</div>;
}

import { useQuery } from 'wasp/client/operations';
import { getAppVersion } from 'wasp/client/operations';

function VersionDisplay() {
  const { data: version, isLoading, error } = useQuery(getAppVersion);

  if (isLoading) return 'Loading...';
  if (error) return 'Error: ' + error;
  return <div>App Version: {version}</div>;
}

This approach allows you to maintain the version in your main.wasp file, which you can update and commit to Git as needed. It's not exactly the same as using package.json, but it achieves the goal of tracking and displaying your app's version. Please note that this is a theoretical solution based on how Wasp handles its own versioning. The actual implementation might require some adjustments depending on how Wasp exposes app configuration to the runtime environment. You may need to consult the Wasp documentation or reach out to the Wasp community for more specific guidance on implementing this approach. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Kynetix, 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?

martinsos•2mo ago

I don't think this is specific for Wasp. This SO answer looks promising: https://stackoverflow.com/a/22339262/1509394

KynetixOP•2mo ago

Thanks, @martinsos that was it. export const getAppVersion = () => { return process.env.npm_package_version; } // works great. Thanks a lot

martinsos•2mo ago

Awesome! I thikn the main challenge here is finding sometihnig that works both in development and in production, which is why I would be a bit skeptic of appraoches taht read package.json, especially on the client, but this one with process.env.npm_package_version sounds like ti might work in production also.

Gaming

Programming

Display app version in UI