Wasp-lang•2mo ago

Login button can't be found

After deploying my wasp app based on the open-saas template, I cannot see the "login " button on the top right of the landing page. It seems like it cannot reach the server side of the app.

25 Replies

kapa.ai•2mo ago

Hi @2euxs. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry to hear that you're having trouble with the login button on your Wasp app. Here are a few steps you can take to troubleshoot this issue: 1. Check for errors: Look for any errors in your Fly's dashboard and in the browser's console. If there are any, they might give you a clue about what's going wrong. 2. Inspect the login page declaration: Make sure the login page is correctly declared in your Wasp file and that the file itself is correct. 3. Check the network tab in your browser's dev tools: This can help you see if requests to the server are taking a long time or failing. 4. Check the server logs on Fly: Look for any errors or signs that the server isn't receiving requests from the client. 5. Redeploy the app: Sometimes, redeploying the app can resolve the issue, as it did for a community member who experienced a similar problem source (https://discord.com/channels/686873244791210014/1217941277979574315). If none of these steps resolve the issue, it might be helpful to share your project with the Wasp community on Discord or GitHub for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @2euxs, 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?

2euxsOP•2mo ago

@kapa.ai [Error] Origin https://frak-client.fly.dev is not allowed by Access-Control-Allow-Origin. Status code: 502 [Error] XMLHttpRequest cannot load https://frak-server.fly.dev/auth/me due to access control checks. [Error] Failed to load resource: Origin https://frak-client.fly.dev is not allowed by Access-Control-Allow-Origin. Status code: 502 (me, line 0)

Frak

Faire de l argent grâce à l IA.

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error messages you're seeing are related to Cross-Origin Resource Sharing (CORS). CORS is a security feature that restricts how resources on a web page can be requested from another domain. In your case, it seems like your server (https://frak-server.fly.dev) is not allowing requests from your client (https://frak-client.fly.dev). This is likely due to the CORS configuration on your server. Here are a few steps you can take to resolve this issue: 1. Check your CORS configuration: In Wasp, you can configure CORS in your serverSetup.js or serverSetup.ts file. Make sure that the origin option in the cors middleware includes your client's URL. Here's an example of how to do this:

import cors from 'cors'
import { config } from 'wasp/server'

export const serverMiddlewareFn = (middlewareConfig) => {
  // Example of adding extra domains to CORS.
  middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://frak-client.fly.dev']> }))
  return middlewareConfig
}

import cors from 'cors'
import { config } from 'wasp/server'

export const serverMiddlewareFn = (middlewareConfig) => {
  // Example of adding extra domains to CORS.
  middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://frak-client.fly.dev']> }))
  return middlewareConfig
}

source (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware) 2. Check your environment variables: Make sure that the WASP_WEB_CLIENT_URL environment variable is set to your client's URL on Fly.io. This variable is used to configure the CORS middleware. You can set this variable in the Fly.io dashboard or by using the flyctl secrets set WASP_WEB_CLIENT_URL=<https://frak-client.fly.dev> command. source (https://wasp-lang.dev/docs/advanced/deployment/manually#set-up-a-flyio-app) 3. Redeploy your app: After making these changes, redeploy your app using the wasp deploy command. If you're still having trouble after following these steps, please let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @2euxs, 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?

2euxsOP•2mo ago

I am using the open-saas template and I cannot find any serverSetup.js @kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you can't find the serverSetup.js file in your project, it's possible that it hasn't been created yet. The serverSetup.js file is not included by default in the OpenSaaS template, but you can create it yourself. Here's how you can do it: 1. Create a new file named serverSetup.js in the src directory of your project. 2. Add the following code to the serverSetup.js file:

import cors from 'cors'
import { config } from 'wasp/server'

export const serverMiddlewareFn = (middlewareConfig) => {
  // Example of adding extra domains to CORS.
  middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://frak-client.fly.dev']> }))
  return middlewareConfig
}

import cors from 'cors'
import { config } from 'wasp/server'

export const serverMiddlewareFn = (middlewareConfig) => {
  // Example of adding extra domains to CORS.
  middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://frak-client.fly.dev']> }))
  return middlewareConfig
}

3. Then, you need to tell Wasp to use this setup file. You can do this by adding the following code to your main.wasp file:

app todoApp {
  // ...
  server: {
    setupFn: import setup from "@src/serverSetup",
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
  },
}

app todoApp {
  // ...
  server: {
    setupFn: import setup from "@src/serverSetup",
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
  },
}

This will tell Wasp to use the serverMiddlewareFn function from your serverSetup.js file to configure the server middleware. Remember to replace '<https://frak-client.fly.dev'> with the URL of your client application. For more information, you can refer to the Wasp documentation on configuring middleware (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @2euxs, 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?

miho•2mo ago

Have you set up the env variables on the server app?

miho•2mo ago

https://docs.opensaas.sh/guides/deploying/

OpenSaaS.sh

Deploying

Open SaaS is a free, open-source, full-stack SaaS starter kit for React + NodeJS.

2euxsOP•2mo ago

Where should I setup them ?

miho•2mo ago

After deploying my wasp app based on the open-saas template

I don't know where you deployed your app 🤷‍♂️ If you deployed on Fly - you can set the env vars via the Fly CLI

miho•2mo ago

Deploying with the Wasp CLI | Wasp

Wasp CLI can deploy your full-stack application with only a single command.

2euxsOP•2mo ago

Yes, I deployed it on fly Should I setup the env var after I have deployed the app ? Should I setup the env var after I have deployed the app ? @kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can set up environment variables after you have deployed your app. In fact, for some variables like WASP_WEB_CLIENT_URL, it's recommended to do so if you don't know the client URL yet at the time of deployment. For Fly.io, you can use the flyctl secrets set command to set environment variables. For example:

flyctl secrets set WASP_WEB_CLIENT_URL=<url_of_where_client_will_be_deployed>

flyctl secrets set WASP_WEB_CLIENT_URL=<url_of_where_client_will_be_deployed>

You can also check if you've added your secrets correctly by running flyctl secrets list in the terminal. This will show hashed versions of your secrets to protect your sensitive data source (https://wasp-lang.dev/docs/advanced/deployment/manually#set-up-a-flyio-app). For Heroku, you can use the heroku config:set command to set environment variables. For example:

heroku config:set --app <app-name> WASP_WEB_CLIENT_URL=<url_of_where_client_will_be_deployed>

heroku config:set --app <app-name> WASP_WEB_CLIENT_URL=<url_of_where_client_will_be_deployed>

Again, you can set WASP_WEB_CLIENT_URL after you deploy your client source (https://wasp-lang.dev/docs/advanced/deployment/manually#set-up-a-heroku-app). Remember to replace <url_of_where_client_will_be_deployed> with the actual URL where your client app will be deployed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @2euxs, 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?

2euxsOP•2mo ago

How can I add the env vars in the wasp deploy @kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- When deploying your Wasp app, you can add environment variables directly in the command line. This can be done by prefixing the wasp deploy command with your environment variables. For example:

REACT_APP_SOME_VAR_NAME=somevalue wasp deploy

REACT_APP_SOME_VAR_NAME=somevalue wasp deploy

This method was confirmed to work by a community member in a Discord conversation (https://discord.com/channels/686873244791210014/1220070515276775516). However, please note that this method might not be ideal for managing multiple environment variables or for different deployment environments. In such cases, it's recommended to manage your environment variables using the deployment platform's tools or dashboard. For instance, if you're deploying to Fly.io, you can use the flyctl secrets set command to set environment variables:

flyctl secrets set SOME_VAR_NAME=somevalue

flyctl secrets set SOME_VAR_NAME=somevalue

source (https://wasp-lang.dev/docs/advanced/deployment/cli#flyio-regions) And if you're deploying to Railway, you can set up the required environment variables in the Railway dashboard:

railway link

railway link

source (https://wasp-lang.dev/docs/advanced/deployment/manually#deploying-the-server) Remember to replace SOME_VAR_NAME and somevalue with your actual variable name and value. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @2euxs, 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?

2euxsOP•2mo ago

How can I add my client and server url ? @kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can add your client and server URLs as environment variables during the deployment process. The specific commands depend on the platform you're deploying to. Here are the steps for some common platforms: For Fly.io: You can use the flyctl secrets set command to set the WASP_WEB_CLIENT_URL and WASP_SERVER_URL environment variables:

flyctl secrets set WASP_WEB_CLIENT_URL=<url_of_where_client_will_be_deployed>
flyctl secrets set WASP_SERVER_URL=<url_of_where_server_will_be_deployed>

flyctl secrets set WASP_WEB_CLIENT_URL=<url_of_where_client_will_be_deployed>
flyctl secrets set WASP_SERVER_URL=<url_of_where_server_will_be_deployed>

source (https://wasp-lang.dev/docs/advanced/deployment/manually#set-up-a-flyio-app) For Heroku: You can use the heroku config:set command to set the WASP_WEB_CLIENT_URL and WASP_SERVER_URL environment variables:

heroku config:set --app <app-name> WASP_WEB_CLIENT_URL=<url_of_where_client_will_be_deployed>
heroku config:set --app <app-name> WASP_SERVER_URL=<url_of_where_server_will_be_deployed>

heroku config:set --app <app-name> WASP_WEB_CLIENT_URL=<url_of_where_client_will_be_deployed>
heroku config:set --app <app-name> WASP_SERVER_URL=<url_of_where_server_will_be_deployed>

source (https://wasp-lang.dev/docs/advanced/deployment/manually#set-up-a-heroku-app) For Railway: You can set up the required environment variables in the Railway dashboard:

railway link

railway link

Then, add WASP_WEB_CLIENT_URL and WASP_SERVER_URL in the Variables tab of the Settings page. source (https://wasp-lang.dev/docs/advanced/deployment/manually#deploying-the-server) Remember to replace <url_of_where_client_will_be_deployed> and <url_of_where_server_will_be_deployed> with the actual URLs where your client and server apps will be deployed. Also, replace <app-name> with the name of your Heroku app. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @2euxs, 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?

2euxsOP•2mo ago

for flyctl, should i setup the env vars on the client app or server app ? for flyctl, should i setup the env vars on the client app or server app ? @kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- For Fly.io, you should set up the environment variables on the server app. This is because the server app is the one that interacts with the environment variables during runtime. You can use the flyctl secrets set command to set the environment variables:

flyctl secrets set WASP_WEB_CLIENT_URL=<url_of_where_client_will_be_deployed>
flyctl secrets set WASP_SERVER_URL=<url_of_where_server_will_be_deployed>

flyctl secrets set WASP_WEB_CLIENT_URL=<url_of_where_client_will_be_deployed>
flyctl secrets set WASP_SERVER_URL=<url_of_where_server_will_be_deployed>

source (https://wasp-lang.dev/docs/advanced/deployment/manually#set-up-a-flyio-app) Remember to replace <url_of_where_client_will_be_deployed> and <url_of_where_server_will_be_deployed> with the actual URLs where your client and server apps will be deployed. For client-side environment variables, they are embedded into the client code during the build process, and are public and readable by anyone. Therefore, you should never store secrets in them. You can provide them to the build command like this:

REACT_APP_SOME_VAR_NAME=somevalue npm run build

REACT_APP_SOME_VAR_NAME=somevalue npm run build

source (https://wasp-lang.dev/docs/project/env-vars#defining-env-vars-in-production) Remember to replace SOME_VAR_NAME and somevalue with your actual variable name and value. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @2euxs, 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?

2euxsOP•2mo ago

The WASP_SERVER_URL and WASP_WEB_CLIENT_URL env vars are set up and im still getting cors errors @kapa.ai :[Error] XMLHttpRequest cannot load https://frak-server.fly.dev/auth/me due to access control checks. [Error] Failed to load resource: Origin https://frak-client.fly.dev is not allowed by Access-Control-Allow-Origin. Status code: 502 (me, line 0) [Error] Origin https://frak-client.fly.dev is not allowed by Access-Control-Allow-Origin. Status code: 502

Frak

Faire de l argent grâce à l IA.

MEE6•2mo ago

Wohooo @2euxs, you just became a Waspeteer level 4!

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry to hear that you're still experiencing CORS errors. Here are a few additional steps you can take to troubleshoot this issue: 1. Check your CORS configuration again: Make sure that the origin option in the cors middleware includes your client's URL. If you're using the serverSetup.js file to configure CORS, the code should look something like this:

import cors from 'cors'
import { config } from 'wasp/server'

export const serverMiddlewareFn = (middlewareConfig) => {
  // Example of adding extra domains to CORS.
  middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://frak-client.fly.dev']> }))
  return middlewareConfig
}

import cors from 'cors'
import { config } from 'wasp/server'

export const serverMiddlewareFn = (middlewareConfig) => {
  // Example of adding extra domains to CORS.
  middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://frak-client.fly.dev']> }))
  return middlewareConfig
}

2. Check your environment variables again: Make sure that the WASP_WEB_CLIENT_URL and WASP_SERVER_URL environment variables are set to your client's and server's URLs on Fly.io. You can check your environment variables by running flyctl secrets list. 3. Redeploy your app: After making these changes, redeploy your app using the wasp deploy command. If you're still having trouble after following these steps, it might be helpful to share your project with the Wasp community on Discord or GitHub for further assistance. Also, please note that Wasp currently sets CORS to allow all requests by default, which is not restrictive enough. The Wasp team is aware of this issue and plans to improve the CORS configuration in the future source (https://github.com/wasp-lang/wasp/issues/94). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @2euxs, 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?

2euxsOP•2mo ago

How can I add the Sendgrid API to the env @kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can add the SendGrid API key to your environment variables by adding it to your .env.server file. Here's how you can do it: 1. Open your .env.server file. 2. Add the following line to the file:

SENDGRID_API_KEY=<your_sendgrid_api_key>

SENDGRID_API_KEY=<your_sendgrid_api_key>

Replace <your_sendgrid_api_key> with your actual SendGrid API key. If you're deploying your app to a platform like Fly.io or Heroku, you'll also need to set this environment variable on the platform. Here's how you can do it: For Fly.io:

flyctl secrets set SENDGRID_API_KEY=<your_sendgrid_api_key>

flyctl secrets set SENDGRID_API_KEY=<your_sendgrid_api_key>

For Heroku:

heroku config:set --app <app-name> SENDGRID_API_KEY=<your_sendgrid_api_key>

heroku config:set --app <app-name> SENDGRID_API_KEY=<your_sendgrid_api_key>

Replace <app-name> with the name of your Heroku app. Remember to keep your SendGrid API key secret. Don't share it with anyone or commit it to your version control system source (https://wasp-lang.dev/docs/advanced/email#using-the-sendgrid-provider). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @2euxs, 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?

2euxsOP•2mo ago

How can I update the code that I have already deployed ? @kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To update the code that you have already deployed, you can use the wasp deploy command. This command pushes your client and server live, and you can run it whenever you want to update your deployed app with the latest changes:

wasp deploy fly deploy

wasp deploy fly deploy

source (https://wasp-lang.dev/docs/advanced/deployment/cli#deploy) If you're deploying manually, the process will depend on the platform you're using. For example, if you're using Railway, you would need to run wasp build to rebuild your app, then railway up in the .wasp/build directory (server), and repeat all the steps in the .wasp/build/web-app directory (client):

wasp build
cd .wasp/build
railway up
cd web-app
# repeat all the steps for the client

wasp build
cd .wasp/build
railway up
cd web-app
# repeat all the steps for the client

source (https://wasp-lang.dev/docs/advanced/deployment/manually#updates--redeploying) Remember to commit any changes to your code before deploying. If you're using a version control system like Git, this would involve adding your changes (git add .), committing them (git commit -m "Your commit message"), and pushing them to your repository (git push). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @2euxs, 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?

Gaming

Programming

Login button can't be found