Wasp-lang•3mo ago

Backend public?

Is there a way that I can make my api accessible from localhost while its on prod? The current frontend and api are hosted already and working, but I want to also access it from localhost(for now) and other domains later on.

41 Replies

kapa.ai•3mo ago

Hi @fustuk.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can make your API accessible from localhost and other domains by configuring Cross-Origin Resource Sharing (CORS) settings. In the context of Wasp, there's an open discussion on GitHub about making CORS more restrictive. The idea is to pull origins from a CORS_ORIGINS environment variable. When running in development mode, localhost is also added. Users are advised to set CORS_ORIGINS to the correct value on the hosting provider when deploying source (https://github.com/wasp-lang/wasp/issues/94). There's also a suggestion to add a global property inside an App element to specify the domain and allowed origins. This would automatically allow localhost and the specified domain. For more advanced users, there's a suggestion to allow more domains simultaneously by specifying domains in an array or parsing an array from an environment variable source (https://github.com/wasp-lang/wasp/issues/94). Please note that these are still open discussions and may not be implemented yet. You may want to follow the discussion or contribute to it to stay updated on the progress. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @fustuk., 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?

fustuk.OP•3mo ago

@kapa.ai

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: Sorry @fustuk., 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?

fustuk.OP•3mo ago

@kapa.ai

kapa.ai•3mo ago

fustuk.OP•3mo ago

export const apiMiddleware: MiddlewareConfigFn = (middlewareConfig) => { const customMiddleware: express.RequestHandler = (_req, _res, next) => { next() } middlewareConfig.set('custom.middleware', customMiddleware) return middlewareConfig } This is my middleware can I add it here somehow? @kapa.ai

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can add your custom middleware to the middleware configuration in Wasp. Here's how you can do it: 1. Global Middleware: If you want to apply your custom middleware to all operations and APIs, you can modify the global middleware. You can do this by defining a middlewareConfigFn in the server field of your app declaration. Here's an example:

app MyApp {  
 // ...  
 server: {  
  setupFn: import setup from "@src/serverSetup",  
  middlewareConfigFn: import { myMiddlewareConfigFn } from "@src/myServerSetupCode.js"  
 },  
}

app MyApp {  
 // ...  
 server: {  
  setupFn: import setup from "@src/serverSetup",  
  middlewareConfigFn: import { myMiddlewareConfigFn } from "@src/myServerSetupCode.js"  
 },  
}

In your myServerSetupCode.js file, you can define your myMiddlewareConfigFn like this:

export const myMiddlewareConfigFn = (middlewareConfig) => {  
 const customMiddleware = (_req, _res, next) => {  
  next()  
 }  
 middlewareConfig.set('custom.middleware', customMiddleware)  
 return middlewareConfig  
}

export const myMiddlewareConfigFn = (middlewareConfig) => {  
 const customMiddleware = (_req, _res, next) => {  
  next()  
 }  
 middlewareConfig.set('custom.middleware', customMiddleware)  
 return middlewareConfig  
}

This will apply your custom middleware to all operations and APIs source (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware). 2. API-specific Middleware: If you want to apply your custom middleware to a specific API, you can do this by defining a middlewareConfigFn in your api declaration. Here's an example:

api myApi {  
 fn: import { myApiFn } from "@src/apis",  
 middlewareConfigFn: import { myApiMiddlewareFn } from "@src/apis",  
 httpRoute: (POST, "/myApi"),  
 auth: false  
}

api myApi {  
 fn: import { myApiFn } from "@src/apis",  
 middlewareConfigFn: import { myApiMiddlewareFn } from "@src/apis",  
 httpRoute: (POST, "/myApi"),  
 auth: false  
}

In your apis.js file, you can define your myApiMiddlewareFn like this:

export const myApiMiddlewareFn = (middlewareConfig) => {  
 const customMiddleware = (_req, _res, next) => {  
  next()  
 }  
 middlewareConfig.set('custom.middleware', customMiddleware)  
 return middlewareConfig  
}

export const myApiMiddlewareFn = (middlewareConfig) => {  
 const customMiddleware = (_req, _res, next) => {  
  next()  
 }  
 middlewareConfig.set('custom.middleware', customMiddleware)  
 return middlewareConfig  
}

This will apply your custom middleware to the specified API source (https://wasp-lang.dev/docs/advanced/middleware-config#2-customize-api-specific-middleware). 3. Per-Path Middleware: If you want to apply your custom middleware to all APIs under a common path, you can do this by defining a middlewareConfigFn in your apiNamespace declaration. Here's an example:

apiNamespace myApiNamespace {  
 middlewareConfigFn: import { myApiNamespaceMiddlewareFn } from "@src/apis",  
 path: "/myApiNamespace"  
}

apiNamespace myApiNamespace {  
 middlewareConfigFn: import { myApiNamespaceMiddlewareFn } from "@src/apis",  
 path: "/myApiNamespace"  
}

In your apis.js file, you can define your myApiNamespaceMiddlewareFn like this:

export const myApiNamespaceMiddlewareFn = (middlewareConfig) => {  
 const customMiddleware = (_req, _res, next) => {  
  next()  
 }  
 middlewareConfig.set('custom.middleware', customMiddleware)  
 return middlewareConfig  
}

export const myApiNamespaceMiddlewareFn = (middlewareConfig) => {  
 const customMiddleware = (_req, _res, next) => {  
  next()  
 }  
 middlewareConfig.set('custom.middleware', customMiddleware)  
 return middlewareConfig  
}

This will apply your custom middleware to all APIs under the specified path source (https://wasp-lang.dev/docs/advanced/middleware-config#3-customize-per-path-middleware). Please replace myApp, myServerSetup, myMiddlewareConfigFn, myApi, myApiFn, myApiMiddlewareFn, myApiNamespace, and myApiNamespaceMiddlewareFn with the actual names in your project. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @fustuk., 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?

fustuk.OP•3mo ago

I found this, so I guess the github issues 2 years ago are not implemented.Is there any way I can make this accessible from local :? @Wasp Team

Vinny (@Wasp)•3mo ago

So the issue is that you can't hit your external api due to cors errors? If so, then you'd need to redeploy and set cors origins to all, i.e. *

fustuk.OP•3mo ago

but where do I set it in this function ? getProductionConfig

Vinny (@Wasp)•3mo ago

//main.wasp 
app todoApp {
  // ...

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

//main.wasp 
app todoApp {
  // ...

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

//src/serverSetup.ts
import cors from 'cors'
import { config, type MiddlewareConfigFn } from 'wasp/server'

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Example of adding an extra domains to CORS.
  middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, 'https://example1.com', 'https://example2.com'] }))
  return middlewareConfig
}

//src/serverSetup.ts
import cors from 'cors'
import { config, type MiddlewareConfigFn } from 'wasp/server'

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Example of adding an extra domains to CORS.
  middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, 'https://example1.com', 'https://example2.com'] }))
  return middlewareConfig
}

that would modify ALL operations and api endpoints though

Vinny (@Wasp)•3mo ago

if you want to only modify specific enddpoints, follow this: https://wasp-lang.dev/docs/advanced/middleware-config#2-customize-api-specific-middleware

Configuring Middleware | Wasp

Wasp comes with a minimal set of useful Express middleware in every application. While this is good for most users, we realize some may wish to add, modify, or remove some of these choices both globally, or on a per-api/path basis.

fustuk.OP•3mo ago

which one, would this work getProductionConfig or do I have to modify serverMiddlewareFn Im fine with allowing all endpoints

Vinny (@Wasp)•3mo ago

I'm not away or the getProductionConfig function. What/where is that?

fustuk.OP•3mo ago

hmm its in the build dir app/.wasp/out/sdk/wasp/dist/server/config.js I guess I cant edit that, nvm will use the approach you suggested thank you

Vinny (@Wasp)•3mo ago

ah you don't want to touch anything in the .wasp folder. that's the output folder being creating by the compiler

fustuk.OP•3mo ago

yeah I didnt saw the location at first mb setupFn: import setup from "@src/serverSetup", @Vinny (@Wasp) sorry but what is that suppose to be

Vinny (@Wasp)•3mo ago

you can remove that, unless you want to run something immediately on server start. This could be like a script or something

fustuk.OP•3mo ago

gotcha, thanks again!

fustuk.OP•3mo ago

Now im getting 422 :/ @Vinny (@Wasp) any suggestions

Vinny (@Wasp)•3mo ago

what does your middleware function look like also calling @miho to the rescue here

fustuk.OP•3mo ago

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
    middlewareConfig.set('cors', cors({ origin: [process.env.WASP_WEB_CLIENT_URL, 'http://localhost:3000'] }))
    return middlewareConfig
}

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
    middlewareConfig.set('cors', cors({ origin: [process.env.WASP_WEB_CLIENT_URL, 'http://localhost:3000'] }))
    return middlewareConfig
}

main.wasp
  server: {
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
  },

main.wasp
  server: {
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
  },

nvm guys it was just wrong payload sorry for the inconvenience

miho•3mo ago

The middleware looks okay 👍 I've just tested it.

martinsos•3mo ago

@fustuk. I am curious, why did you need this, to be able to access your production server from the local machine? Also, if CORS was an issue, I am guessing you were accessing it via browser, and not via CLI (e.g. using curl)?

fustuk.OP•3mo ago

wasnt me, but another developer, they are creating new frontend repo(not wasp, they dont like monorepos so created a new one for the frontend) and for some reason dont want to use the server localy, rather just gave them access to prod, which is not something im a fan of but its not my concern any more.

martinsos•3mo ago

Oh wow as you said that doesn't sound good at all, but ok, I get that it is out of your hands. I would at least recommend them to spin up a staging server instead of a production one. Ok, makes sense!

fustuk.OP•3mo ago

agree, they dont know what they are doing really, the investor that bought it from me isnt technical he has 1 russian dev that that works for him and thats it

tom•2mo ago

Hello, I am using this settings but i have server error [ Server!] TypeError: middlewareConfig.set is not a function [ Server!] at setup (//my-project/app/src/serverSetup.ts:6:20) Do you have any idea how can i fix it? Also I had to add a line with export default serverMiddlewareFn import cors from 'cors' import { config, type MiddlewareConfigFn } from 'wasp/server' export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => { // Example of adding an extra domains to CORS. middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, 'https://example1.com', 'https://example2.com'] })) return middlewareConfig } export default serverMiddlewareFn Otherwise i get this error**

[ Server!] [!] RollupError: src/server.ts (6:7): "default" is not exported by "../../../src/serverSetup.ts", imported by "src/server.ts".
[ Server!] https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module
[ Server!] src/server.ts (6:7)
[ Server!] 4: import { config } from 'wasp/server'
[ Server!] 5: 
[ Server!] 6: import setup from '../../../../src/serverSetup'
[ Server!]           ^
[ Server!] 7: import { ServerSetupFn } from 'wasp/server'
[ Server!] 8: import { ServerSetupFnContext } from 'wasp/server/types'

MEE6•2mo ago

Wohooo @tom, you just became a Waspeteer level 1!

tom•2mo ago

SOLVED: This code from another discussion solved my problem https://discord.com/channels/686873244791210014/1297928864319799337/1297938317165461545

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

// src/serverSetup.js
import cors from 'cors'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: '*' }))
 return middlewareConfig  
}

martinsos•2mo ago

@tom , I get that new code works, but I am not sure I got what was the issue with the old code, do you know? @miho do you have an idea? I see that in the new code, function is not typed. Is it possible that our type for MiddlewareConfigFn is wrong?

miho•2mo ago

I have tested the posted code and the types worked for me, I was not able to reproduce the type errors mentioned here 🤷‍♂️

martinsos•2mo ago

@miho hm, but Tom is not the first with this error, so it seems multiple are havin git

miho•2mo ago

What do you propose we do? Trying to recreate the error with the provided code didn't get me far 😄 I've created a new project, copy pasted the middleware and saw the code working.

Is it possible that our type for MiddlewareConfigFn is wrong?

Here's the type:

export type MiddlewareConfigFn = (middlewareConfig: MiddlewareConfig) => MiddlewareConfig
export type MiddlewareConfig = Map<string, RequestHandler>

export type MiddlewareConfigFn = (middlewareConfig: MiddlewareConfig) => MiddlewareConfig
export type MiddlewareConfig = Map<string, RequestHandler>

It's a map, it has the set function. Node.js has support for Maps since version 0.12.0 which was released in 2015.

martinsos•2mo ago

Hm, I don't know, but even if we can't reproduce it, people are hitting it, so I am sure we can figure it out! @tom any way you can help us reproduce it? Do you have an idea what caused it? @miho have you seen the last answer in the discord convo @tom linked just above? Seems that issue was that user tried using this function in two places in main.wasp file (or maybe I got that wrong)?

miho•2mo ago

Where did you see this bit:

Seems that issue was that user tried using this function in two places in main.wasp file

As I understood it, the user was trying to set up the CORS config but it didn't work for them. User didn't report the same error related to the .set function not existing. They reported issues with CORS in general, which I suspect has to do something with Nginx, but the user didn't confirm that was the issue in the end, so we don't know for sure, at least for now. EDIT: found the other user you probably wanted to reference and wrote the root cause there: https://ptb.discord.com/channels/686873244791210014/1276521669661429832/1299049948847013891 @tom solved their issue by using Javascript instead of Typescript, but I have tried with Typescript and it worked out - so it might have been some transitive TS language server issue.

martinsos•2mo ago

I think @tom also imported the middlewareConfig as setupFn, since he also had TypeError: middlewareConfig.set is not a function at the start, but let's see what he says.

tom•2mo ago

@martinsos I am very unexperienced with this type of technology, but I will try to elaborate. Before I had the setupFn line in my server in main.wasp ---- server: { setupFn: import setup from "@src/serverSetup", middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup" }, ---- With this line present in main.wasp I instantly get this error [ Server!] [!] RollupError: src/server.ts (6:7): "default" is not exported by "../../../src/serverSetup.ts", imported by "src/server.ts". And this lead me to adding this line to end of the serverSetup.ts export default serverMiddlewareFn And this cause the .set error instantly [ Server!] TypeError: middlewareConfig.set is not a function [ Server!] at setup (/Users/tomaskucharzyk/my-project/app/src/serverSetup.ts:5:19) [ Server!] at startServer (/Users/tomaskucharzyk/my-project/app/.wasp/out/server/src/server.ts:25:10) [ Server!] at process.processTicksAndRejections (node:internal/process/task_queues:95:5) So to make it work I had to remove the setupFn from server in main.wasp. Even if I keep the export default now, it is working, but it also show me an error in my vs code (see screenshot) . I have a project that i created by using the opensaas tutorial on official website. The only thing i did is adding some models to prisma and adding one api to parse a json from chrome extension to a table. It was working fine with postman, but when i sent the json from extension i got the cors problem. Also I went to the website with the CORS problem and followed the code there, but got the default error and then .set error. Then i googled my errors and after few other sites I ended up in the discord.

miho•2mo ago

@tom a good explanantion! Yep, this line was problematic setupFn: import setup from "@src/serverSetup", since Wasp then used serverMiddlewareFn as the setup function - which caused the error 🙂 You can try renaming the file to serverSetup.ts and then doing this:

import { type MiddlewareConfigFn } from "wasp/server";

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // ... your code
  return middlewareConfig;
};

import { type MiddlewareConfigFn } from "wasp/server";

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // ... your code
  return middlewareConfig;
};

to get rid of that type error in VS Code 🙂

tom•2mo ago

Thank you @miho , now it is working and I have no type error 🙂

martinsos•2mo ago

@tom awesome, thanks for explanation! I am curious, how did you end up adding setupFn: import setup from "@src/serverSetup" line to your main.wasp, what inspired you to do so? Because you rae not the first person to make this mistake so i am trying to figure out if we have that snippet somewhere in our docs or what.

Gaming

Programming

Backend public?