I need help to deploy my app to Render.com
I have read both Wasp's and Render's documentation. As a newbie I am a little bit unsure of the right procedure.
My app structure consists of:
1. The Database (Prisma/PostgreSQL)
2. A Python FastAPI backend using uvicorn.
3. The Wasp App
I have created 2 services in Render for the first two elements: a PostgreSQL service for the database and a Web service for the FastAPI backend. However I am unsure of the 3rd. It seems like I can run the "wasp build" command directly in a Web service on Render rather than locally on my machine, but I am not sure of how that will build the wasp front end client and server and what the start command will be for both.
Any useful guides and tips that can help me deploy the app would be great.
Thanks!
16 Replies
Hi @cking!M. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I apologize, but I don't have specific information about deploying a Wasp app to Render.com in the provided knowledge sources. The deployment instructions in the Wasp documentation primarily focus on other platforms like Fly.io, Railway, and manual deployment options.
However, I can provide some general guidance based on the Wasp deployment process:
1. For deploying a Wasp app, you typically need to run
wasp build to generate deployable code Deploying a Wasp App (https://wasp-lang.dev/docs/advanced/deployment/manually#deploying-a-wasp-app).
2. After building, you'll have separate components for the backend (API server) and frontend (web client) Deploying a Wasp App (https://wasp-lang.dev/docs/advanced/deployment/manually#deploying-a-wasp-app).
3. The backend is typically deployed as a Node.js server, while the frontend is deployed as static files Deploying a Wasp App (https://wasp-lang.dev/docs/advanced/deployment/manually#deploying-a-wasp-app).
4. You'll need to set up environment variables for your deployment, including database connection, client URL, server URL, and potentially authentication secrets Environment Variables (https://wasp-lang.dev/docs/advanced/deployment/manually#environment-variables).
Given your specific setup with a Python FastAPI backend, you might need to adjust the deployment process. The Wasp documentation doesn't cover this specific scenario.
For the most accurate guidance on deploying your specific setup to Render.com, I recommend reaching out to the Wasp community on their Discord chat (https://wasp-lang.dev/docs/general/cli#overview) or consulting with Render.com's support for handling multi-service deployments with custom configurations.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @cking!M, 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?@kapa.ai When I try to deploy the frontend as a static stite on Render I get this error
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'wasp' imported from /opt/render/project/src/app/.wasp/build/web-app/scripts/validate-env.mjsLet me check the knowledge base for you again. One moment! :books:
----------------------
This error suggests that the
wasp package is not found when trying to deploy your frontend as a static site on Render. This is likely because the wasp package is not installed in the deployment environment. Let me provide some insights and potential solutions based on the available information:
1. The error is occurring because a script (validate-env.mjs) is trying to import the wasp package, which is not available in the deployment environment Github Issue #1664 (https://github.com/wasp-lang/wasp/issues/1664).
2. Typically, when deploying a Wasp app, you should run wasp build locally first, which generates the deployable code in the .wasp/build/ directory Deploying the Web Client (https://wasp-lang.dev/docs/advanced/deployment/manually#3-deploying-the-web-client-frontend).
3. After building, you should deploy the contents of the .wasp/build/web-app directory as your static site Deploying the Web Client (https://wasp-lang.dev/docs/advanced/deployment/manually#3-deploying-the-web-client-frontend).
To resolve this issue, try the following steps:
1. Run wasp build locally on your machine.
2. Navigate to the .wasp/build/web-app directory.
3. Run npm install to ensure all dependencies are installed.
4. Set the REACT_APP_API_URL environment variable to point to your backend URL.
5. Run npm run build to create a production build of your frontend.
6. Deploy the contents of the build/ directory (created in the previous step) to Render as a static site.
If the issue persists, it might be related to how Wasp generates the build files or how Render is processing them. In this case, you may need to reach out to the Wasp community for more specific guidance. The Wasp Discord channel (https://discord.com/channels/686873244791210014/1215750573278629958) could be a good place to ask for help with deployment issues.
Remember to ensure that your backend API is properly deployed and accessible before deploying the frontend, as the frontend will need to communicate with it.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @cking!M, 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?@kapa.ai I have managed to deploy the app on Render. However I am getting this error when I log in with Google Authentication:
Save failed: there was a database error
index-Dl9Psnge.js:78
GET https://personita-server.onrender.com/auth/me 401 (Unauthorized)
(anonymous) @ index-Dl9Psnge.js:78
xhr @ index-Dl9Psnge.js:78
rx @ index-Dl9Psnge.js:80
Promise.then
_request @ index-Dl9Psnge.js:81 request @ index-Dl9Psnge.js:80 ys.<computed> @ index-Dl9Psnge.js:81 (anonymous) @ index-Dl9Psnge.js:76 F2.queryCacheKey @ index-Dl9Psnge.js:81 queryFn @ index-Dl9Psnge.js:81 T @ index-Dl9Psnge.js:40 Q @ index-Dl9Psnge.js:40 nv @ index-Dl9Psnge.js:40 fetch @ index-Dl9Psnge.js:40 executeFetch @ index-Dl9Psnge.js:40 fetch @ index-Dl9Psnge.js:40 refetch @ index-Dl9Psnge.js:40 onFocus @ index-Dl9Psnge.js:40 (anonymous) @ index-Dl9Psnge.js:40 (anonymous) @ index-Dl9Psnge.js:40 p @ index-Dl9Psnge.js:40 onFocus @ index-Dl9Psnge.js:40 (anonymous) @ index-Dl9Psnge.js:40 (anonymous) @ index-Dl9Psnge.js:40 onFocus @ index-Dl9Psnge.js:40 (anonymous) @ index-Dl9Psnge.js:40 s @ index-Dl9Psnge.js:40
_request @ index-Dl9Psnge.js:81 request @ index-Dl9Psnge.js:80 ys.<computed> @ index-Dl9Psnge.js:81 (anonymous) @ index-Dl9Psnge.js:76 F2.queryCacheKey @ index-Dl9Psnge.js:81 queryFn @ index-Dl9Psnge.js:81 T @ index-Dl9Psnge.js:40 Q @ index-Dl9Psnge.js:40 nv @ index-Dl9Psnge.js:40 fetch @ index-Dl9Psnge.js:40 executeFetch @ index-Dl9Psnge.js:40 fetch @ index-Dl9Psnge.js:40 refetch @ index-Dl9Psnge.js:40 onFocus @ index-Dl9Psnge.js:40 (anonymous) @ index-Dl9Psnge.js:40 (anonymous) @ index-Dl9Psnge.js:40 p @ index-Dl9Psnge.js:40 onFocus @ index-Dl9Psnge.js:40 (anonymous) @ index-Dl9Psnge.js:40 (anonymous) @ index-Dl9Psnge.js:40 onFocus @ index-Dl9Psnge.js:40 (anonymous) @ index-Dl9Psnge.js:40 s @ index-Dl9Psnge.js:40
Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the error message you're seeing, there are a few potential issues that could be causing this problem with your Wasp app deployed on Render. Let's break it down and suggest some solutions:
1. Database Error:
The "Save failed: there was a database error" message suggests that there might be an issue with your database connection or migrations. This could be because:
a. Database migrations haven't been run on your production database. As mentioned in the Fly.io deployment logs (https://discord.com/channels/686873244791210014/1217295340785635418), this error can occur if you didn't run the database migrations. You might need to run migrations on your Render deployment.
b. There could be an issue with your database connection string or environment variables. Make sure your database connection details are correctly set in your Render environment variables.
2. Authentication Error:
The 401 (Unauthorized) error on the
/auth/me endpoint suggests an issue with the authentication process. This could be due to:
a. Incorrect configuration of Google Auth credentials. Double-check that your Google Client ID and Client Secret are correctly set in your Render environment variables, as described in the Google Auth setup documentation (https://wasp-lang.dev/docs/auth/social-auth/google#4-adding-environment-variables).
b. Mismatch between the authorized redirect URIs in your Google OAuth app and your Render deployment URL. Ensure that you've added the correct callback URL to your Google OAuth app settings, which should be something like <https://your-render-app-url.onrender.com/auth/google/callback.>
3. CORS Issues:
Although not explicitly mentioned in your error, CORS issues can sometimes cause authentication problems. Ensure that your server is configured to accept requests from your client's domain.
To resolve these issues, try the following steps:
1. Check your Render logs for any specific error messages related to database connections or migrations.
2. Verify that all necessary environment variables are correctly set in your Render deployment, including database connection details and Google OAuth credentials.
3. Run database migrations on your Render deployment if you haven't already. You might need to set up a release command (https://discord.com/channels/686873244791210014/1217295340785635418) in your Render configuration to run migrations before each deployment.
4. Double-check your Google OAuth app configuration, ensuring the correct redirect URIs are set.
5. If the issue persists, you might want to add some logging in your server-side authentication code to help identify where exactly the process is failing.
If you continue to face issues after trying these steps, it would be helpful to check the server logs on Render for more detailed error messages. The Wasp community on Discord (https://discord.com/channels/686873244791210014/1222916615151161374) is also a great resource for getting help with deployment-specific issues.
Remember, deploying to production often requires some additional configuration and troubleshooting compared to running locally, especially when it comes to authentication and database connections.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @cking!M, 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?Looking further at my console output in Render I see these errors:
PrismaClientKnownRequestError:
Invalid prisma.authIdentity.findUnique() invocation:
The table public.AuthIdentity does not exist in the current database.
at Ln.handleRequestError (/app/node_modules/@prisma/client/runtime/library.js:121:7753)
at Ln.handleAndLogRequestError (/app/node_modules/@prisma/client/runtime/library.js:121:7061)
at Ln.request (/app/node_modules/@prisma/client/runtime/library.js:121:6745)
at async l (/app/node_modules/@prisma/client/runtime/library.js:130:9633)
at getAuthIdFromProviderDetails (/app/.wasp/build/server/src/auth/providers/oauth/user.ts:67:32)
at finishOAuthFlowAndGetRedirectUri (/app/.wasp/build/server/src/auth/providers/oauth/user.ts:39:18)
at <anonymous> (/app/.wasp/build/server/src/auth/providers/oauth/handler.ts:97:31)
at <anonymous> (/app/.wasp/out/sdk/wasp/server/utils.ts:26:5) {
code: 'P2021',
clientVersion: '5.19.1',
meta: { modelName: 'AuthIdentity', table: 'public.AuthIdentity' }
}
š This error can happen if you did't run the database migrations.
HttpError: Save failed
at rethrowPossibleAuthError (/app/.wasp/out/sdk/wasp/auth/utils.ts:215:11)
at <anonymous> (/app/.wasp/build/server/src/auth/providers/oauth/handler.ts:118:11)
at <anonymous> (/app/.wasp/out/sdk/wasp/server/utils.ts:26:5) {
statusCode: 500,
data: { message: 'there was a database error' }
}
It does seem to be a database write error. I have a database deployed and running. I have also grabbed its internal URL and added it to the DATABASE_URL env variable on the Wasp Server's Web Service's environment variables. My understanding is that database should have been migrated during the Docker build process of the wasp server. Is this not the case?@cking!M I see you're talking with the bot.
If you need, human help, tag me and please summarise the question (to spare me from reading everything).
Btw, you should use three backtics for multilne code, you'll get better responses š
Like this:
@Filip Thanks for the tip. I need some help with my problem. I will try and explain in detail.
I have deployed my app to Render. It currently has 4 services: a PostgreSQL database, 2 Web services - 1 for a FastAPI backend and 1 for the Wasp server backend, and a Static Site for the frontend. For the Wasp server backend, I built it with "wasp build" on my local machine and deployed the Dockerfile. I am able to access the app on the web, however when I try to log into the app with Google Auth, it fails with the error below in my server's console:
Is database migration part of the Dockerfile launch?
The error I see on the website is as shown in the attached image
Thanks for the detailed info. Yeah, the migrations should be done as a part of the deployment.
Very strange.
Did you set the database URL? Can you connect to that DB and see whether thr tables exist?
Yes I did set it to the internal URL for the same region as the other services. In my local environment I used wasp db studio for connecting, how can I do that for the production db?
I managed to connect to it and I can see only a single table _prisma_migrations
Wohooo @cking!M, you just became a Waspeteer level 3!
Here is a screenshot of the database
@Filip I tried redeploying the Dockerfile. Here is the output from the process:
It would appear no migration happened -
Turns out I did not run wasp db migrate-dev before wasp build. That seems to have fixed it
Hey @cking!M, I'm back. Thanks for the patience!
If I got it right, you couldn't deploy to production without first migrating the production database explicitly with
wasp db migrate-dev. Is that correct?I've had success with using Github Actions + Render.com when deploying Wasp apps: https://github.com/wasp-lang/render-ghcr
I build the Docker images in Github Actions and then push them to Render.com so it can fetch them and deploy them. Render is expensive tho. 7$ per app
GitHub
GitHub - wasp-lang/render-ghcr: Example app that is deployed to Ren...
Example app that is deployed to Render.com using Github Container Registry - wasp-lang/render-ghcr