Wasp-lang•13mo ago

Custom domain with Fly.io not working?

Currently trying to set up a custom domain with Fly.io. I can see the certs being created and the site is reachable, but every time I go to the log in page I am met with the attached error. Where could I configure this CORS header in wasp?

25 Replies

shayne•13mo ago

there was some recent discussion about this here: https://discord.com/channels/686873244791210014/1108677930151850004 essentially you can either: a) update a server secret to point to your new custom domain, or b) use custom middleware to override it and add as many extra as you want

SoyMilkIsOk•13mo ago

Following the instruction on the page linked in that thread (https://wasp-lang.dev/docs/guides/middleware-customization#1-customize-global-middleware) nets me this error

Middleware Customization | 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.

MEE6•13mo ago

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

shayne•13mo ago

you will need to swap your serverSetup file extension from js to ts sorry about that i will make a note to update docs

SoyMilkIsOk•13mo ago

Tried that but also get this after:

shayne•13mo ago

we don't bundle the @types/cors package into wasp i believe. it should still build fine with that i will make a note for that too. worst case you could add to your wasp dependencies in your .wasp file but try running and it should still be fine

SoyMilkIsOk•13mo ago

Still doesnt seem to work now, DB wont connect on dev build

shayne•13mo ago

what is error in terminal?

SoyMilkIsOk•13mo ago

Something wrong with cors now after VSCode attempted to "Quick Fix" the reference I think, any quick way to rebuild the wasp project without losing progress?

shayne•13mo ago

you can do wasp clean to clear out your generated project, and then run wasp start. you will want to be sure it didnt put any node_modules stuff though in your wasp project dir let me do a quick local test too ~~trying the example locally, after running wasp clean i see the cors red line. if you run wasp compile (which wasp start does under the covers) it goes away for me~~ but let me make sure its not due to some other transitive dependency or something yeah it was because i am working on some websocket stuff that got pulled in. when i do a wasp compile the redline is still there, but it should still run ok yeah it still runs so long story short, that TS warning wont prevent you from running/using it but i will just add it to our builtin types to avoid confusion as for what the quickfix does, let me check to help you undo it you will want to remove these:

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        src/server/node_modules/
        src/server/package-lock.json
        src/server/package.json

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        src/server/node_modules/
        src/server/package-lock.json
        src/server/package.json

to undo what that quick fix did for me

SoyMilkIsOk•13mo ago

Thank you, ended up recloning my repo and that fixed the "Quick Fix" want to be sure I have the file structure correct though. This is what it looks like now

shayne•13mo ago

you dont need the node_modules or package*.json in your wasp project dir... that stuff is automatically done by wasp compile/start and lives in .wasp so you can safely remove those, do a wasp clean if you'd like, then try wasp start and see if the issue goes away

SoyMilkIsOk•13mo ago

Headed to lunch sorry I will try this when I get home!

SoyMilkIsOk•13mo ago

Reloaded all my code and now get the following error:

SoyMilkIsOk•13mo ago

Read the docs again, saw I need to import into the .wasp as a js regardless of ts designation, fixed it, now I still get this error trying to run the code

MEE6•13mo ago

Wohooo @SoyMilkIsOk, you just became a Waspeteer level 2!

shayne•13mo ago

All imports should use js extensions. Yep: https://wasp-lang.dev/docs/typescript

TypeScript Support | Wasp

TypeScript is a programming language that brings static type analysis to JavaScript. It is a superset of JavaScript (i.e., all valid JavaScript programs are valid TypeScript programs) and compiles to JavaScript before running. TypeScript's type system detects common errors at build time (reducing the chance of runtime errors in production) and e...

shayne•13mo ago

If you are not using a named import you must use export default on the function defining side I’m a bit under the weather but the team can probably give more general TS/JS guidance when they are back online in the European AM 👍🏻 Hi @SoyMilkIsOk we’re you able to get the export working?

SoyMilkIsOk•13mo ago

@shayne I was not, moved onto other work yesterday, I'll be off work today at 3pm and can give it another shot after that though!

shayne•13mo ago

sounds good. also feel free to throw in the contents of that file, and how you are importing it 👍

SoyMilkIsOk•13mo ago

Reopening this issue, here is my code in ServerSetup.ts:

import cors from 'cors'
import { MiddlewareConfigFn } from '@wasp/middleware'
import config from '@wasp/config.js'

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

export default serverMiddlewareFn

import cors from 'cors'
import { MiddlewareConfigFn } from '@wasp/middleware'
import config from '@wasp/config.js'

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

export default serverMiddlewareFn

And here is the error I'm getting:

[Server]  src/server.ts(18,10): error TS2352: Conversion of type 'MiddlewareConfigFn' to type 'ServerSetupFn' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
[Server]    Types of parameters 'middlewareConfig' and 'context' are incompatible.
[Server]      Type 'ServerSetupFnContext' is missing the following properties from type 'Map<string, RequestHandler<ParamsDictionary, any, any, ParsedQs, Record<string, any>>>': clear, delete, forEach, get, and 8 more.
[Server]  [nodemon] app crashed - waiting for file changes before starting...

[Server]  src/server.ts(18,10): error TS2352: Conversion of type 'MiddlewareConfigFn' to type 'ServerSetupFn' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
[Server]    Types of parameters 'middlewareConfig' and 'context' are incompatible.
[Server]      Type 'ServerSetupFnContext' is missing the following properties from type 'Map<string, RequestHandler<ParamsDictionary, any, any, ParsedQs, Record<string, any>>>': clear, delete, forEach, get, and 8 more.
[Server]  [nodemon] app crashed - waiting for file changes before starting...

SoyMilkIsOk•13mo ago

Also here is how I import it in main.wasp

shayne•13mo ago

Here you are exporting your serverMiddlewareFn as named constant and as default, and then importing that as your setupFn. However, that has a different use and type, as noted. So TS is catching the error for you 👍 just remove the setupFn line and it should work. I would recommend checking out the Wasp docs for more about this: https://wasp-lang.dev/docs/language/features#setupfn-serverimport-optional Also I would recommend checking out the full Wasp tutorial for a better idea of what is happening if you haven't already. feel free to give it a try by removing that line and let me know if you are still stuck btw those imports in the Wasp file follow from the normal JS/TS import rules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

SoyMilkIsOk•13mo ago

Just figured that out right when I got your message! Appreciate the help. After following the tutorial and removing that line I deployed to fly.io and all custom domains work with no problems, I will mark this issue as closed.

shayne•13mo ago

Fantastic! Glad you’re up and running

Gaming

Programming

Custom domain with Fly.io not working?