wasp start in custom port that added in .env

i have to start wasp app in dynamic port every time like this, but how i can use .env variable in vite.config.ts

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    open: true,
    port: process.env.WASP_WEB_CLIENT_URL_PORT,
  },
})

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    open: true,
    port: process.env.WASP_WEB_CLIENT_URL_PORT,
  },
})

when i run wasp start , the console returns error

[Client!] failed to load config from /mnt/directory-address/.wasp/out/web-app/vite.config.ts
[Client!] error when starting dev server:
[Client!] TypeError: Cannot read properties of undefined (reading 'VITE_REACT_APP_WASP_WEB_CLIENT_PORT')
[Client!]     at file:////mnt/directory-address/.wasp/out/web-app/vite.config.ts.timestamp-1716384226844-ee0a203ae7d89.mjs:10:27
[Client!]     at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
[Client!]     at async Promise.all (index 0)
[Client!]     at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
[Client!]     at async loadConfigFromBundledFile (file:///mnt/directory-address/.wasp/out/web-app/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:66337:21)
[Client!]     at async loadConfigFromFile (file:///mnt/directory-address/.wasp/out/web-app/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:66186:28)
[Client!]     at async resolveConfig (file:///mnt/directory-address/.wasp/out/web-app/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:65782:28)
[Client!]     at async _createServer (file:///mnt/directory-address/.wasp/out/web-app/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:65051:20)
[Client!]     at async CAC.<anonymous> (file:///mnt/directory-address/.wasp/out/web-app/node_modules/vite/dist/node/cli.js:763:24)

[Client!] failed to load config from /mnt/directory-address/.wasp/out/web-app/vite.config.ts
[Client!] error when starting dev server:
[Client!] TypeError: Cannot read properties of undefined (reading 'VITE_REACT_APP_WASP_WEB_CLIENT_PORT')
[Client!]     at file:////mnt/directory-address/.wasp/out/web-app/vite.config.ts.timestamp-1716384226844-ee0a203ae7d89.mjs:10:27
[Client!]     at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
[Client!]     at async Promise.all (index 0)
[Client!]     at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
[Client!]     at async loadConfigFromBundledFile (file:///mnt/directory-address/.wasp/out/web-app/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:66337:21)
[Client!]     at async loadConfigFromFile (file:///mnt/directory-address/.wasp/out/web-app/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:66186:28)
[Client!]     at async resolveConfig (file:///mnt/directory-address/.wasp/out/web-app/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:65782:28)
[Client!]     at async _createServer (file:///mnt/directory-address/.wasp/out/web-app/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:65051:20)
[Client!]     at async CAC.<anonymous> (file:///mnt/directory-address/.wasp/out/web-app/node_modules/vite/dist/node/cli.js:763:24)

7 Replies

kapa.ai•7mo ago

Hi @hosseinkhalili. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error you're encountering is because environment variables are not directly accessible in the vite.config.ts file. However, you can specify the port for your Wasp app using environment variables in the .env files. Here's how you can do it: 1. Define the port in the .env.client and .env.server files. For example, if you want to run the server on port 4040 and the client on port 8000, you would specify the following: In .env.client:

   PORT=8000
   REACT_APP_API_URL=<http://localhost:4040>

   PORT=8000
   REACT_APP_API_URL=<http://localhost:4040>

In .env.server:

   PORT=4040
   WASP_WEB_CLIENT_URL=<http://localhost:8000>

   PORT=4040
   WASP_WEB_CLIENT_URL=<http://localhost:8000>

These environment variables will be recognized when you run your Wasp commands like wasp start (source (https://wasp-lang.dev/docs/project/env-vars#defining-env-vars-in-development)). 2. In your vite.config.ts, you can then use the process.env.PORT to access the port number. However, note that Vite expects the port option to be a number, so you'll need to convert the environment variable from a string to a number:

   import { defineConfig } from 'vite'

   export default defineConfig({
     server: {
       open: true,
       port: Number(process.env.PORT),
     },
   })

   import { defineConfig } from 'vite'

   export default defineConfig({
     server: {
       open: true,
       port: Number(process.env.PORT),
     },
   })

This will set the port for the Vite dev server to the value of the PORT environment variable (source (https://wasp-lang.dev/docs/project/custom-vite-config#examples)). Please note that changing the dev server port requires updating the WASP_WEB_CLIENT_URL environment variable in your .env.server file (source (https://wasp-lang.dev/docs/project/custom-vite-config#examples)). If you're still encountering issues, it might be due to the fact that Wasp currently has hardcoded ports (3000 for the frontend and 3001 for the backend). There's an open issue to make these ports configurable (source (https://github.com/wasp-lang/wasp/issues/730)). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @hosseinkhalili, 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?

hosseinkhaliliOP•7mo ago

@kapa.ai doesnt help

rt
[Server]  > npm run build && npm run start
[Server]
[Client!] node:internal/errors:484
[Client!]     ErrorCaptureStackTrace(err);
[Client!]     ^
[Client!]
[Client!] RangeError [ERR_SOCKET_BAD_PORT]: options.port should be >= 0 and < 65536. Received NaN.
[Client!]     at new NodeError (node:internal/errors:393:5)
[Client!]     at validatePort (node:internal/validators:372:11)
[Client!]     at Server.listen (node:net:1613:5)
[Client!]     at httpServer.listen (file:///mnt/e/projects/graphay/octopus_plugin/example/law-consultant/.wasp/out/web-app/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:65353:20) {
[Client!]   code: 'ERR_SOCKET_BAD_PORT'
[Client!] }
[Client!]
[Client!] Node.js v18.12.0

rt
[Server]  > npm run build && npm run start
[Server]
[Client!] node:internal/errors:484
[Client!]     ErrorCaptureStackTrace(err);
[Client!]     ^
[Client!]
[Client!] RangeError [ERR_SOCKET_BAD_PORT]: options.port should be >= 0 and < 65536. Received NaN.
[Client!]     at new NodeError (node:internal/errors:393:5)
[Client!]     at validatePort (node:internal/validators:372:11)
[Client!]     at Server.listen (node:net:1613:5)
[Client!]     at httpServer.listen (file:///mnt/e/projects/graphay/octopus_plugin/example/law-consultant/.wasp/out/web-app/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:65353:20) {
[Client!]   code: 'ERR_SOCKET_BAD_PORT'
[Client!] }
[Client!]
[Client!] Node.js v18.12.0

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message RangeError [ERR_SOCKET_BAD_PORT]: options.port should be >= 0 and < 65536. Received NaN. indicates that the port number received is not a valid number (NaN stands for Not a Number). This suggests that the environment variable PORT is not being correctly read or parsed in your vite.config.ts file. Here are a few things you can check: 1. Ensure that the PORT environment variable is correctly defined in your .env.client file and that it is a valid number between 0 and 65535. 2. Make sure that you are correctly parsing the PORT environment variable as a number in your vite.config.ts file. Here's how you can do it:

   import { defineConfig } from 'vite'

   export default defineConfig({
     server: {
       open: true,
       port: parseInt(process.env.PORT, 10),
     },
   })

   import { defineConfig } from 'vite'

   export default defineConfig({
     server: {
       open: true,
       port: parseInt(process.env.PORT, 10),
     },
   })

The parseInt function converts the PORT environment variable from a string to a number. The second argument, 10, specifies that the number should be parsed as a base-10 number. 3. If you're still encountering issues, it might be due to the fact that Wasp currently has hardcoded ports (3000 for the frontend and 3001 for the backend). There's an open issue to make these ports configurable (source (https://github.com/wasp-lang/wasp/issues/730)). If none of these suggestions resolve the issue, it might be helpful to provide more information about your setup or any changes you've made to the default Wasp configuration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @hosseinkhalili, 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?

hosseinkhaliliOP•7mo ago

@kapa.ai are you there?

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, I'm here. How can I assist you further with Wasp? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @hosseinkhalili, 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?

hosseinkhaliliOP•7mo ago

wasp start 🐝 --- Starting compilation and setup phase. Hold tight... ------------------------ 🐝 --- Compiling wasp project... -------------------------------------------------- 🐝 --- Setting up database... ----------------------------------------------------- ✅ --- Database successfully set up. ---------------------------------------------- ✅ --- Your wasp project has successfully compiled. ------------------------------- 🐝 --- Listening for file changes... ---------------------------------------------- 🐝 --- Starting up generated project... ------------------------------------------- [Server] > [email protected] watch [Server] > nodemon --exec 'npm run build-and-start exit 1' [Server] [Client] > [email protected] start [Client] > npm run validate-env && vite [Client] > [email protected] validate-env [Client] > node -r dotenv/config ./scripts/validate-env.mjs [Client] [Client] 🔍 Validating environment variables... [Server] [nodemon] 2.0.22 [Server] [nodemon] to restart at any time, enter rs [Server] [nodemon] watching path(s): src/*/ .env [Server] [nodemon] watching extensions: ts,mts,js,mjs,json [Server] [nodemon] starting `npm run build-and-start exit 1` [Server] [Server] > [email protected] build-and-start [Server] > npm run build && npm run start [Server] [Client] VITE v4.5.3 ready in 1788 ms [Client] [Client] ➜ Local: http://localhost:3000/ [Client] ➜ Network: http://172.18.141.175:3000/ [Client] ➜ press h to show help [Server] > [email protected] build [Server] > npx tsc [Server] > [email protected] start [Server] > npm run validate-env && NODE_PATH=dist node -r dotenv/config dist/server.js [Server] [Server] [Server] > [email protected] validate-env [Server] > node -r dotenv/config ./scripts/validate-env.mjs [Server] [Server] 🔍 Validating environment variables... [Server] 🚀 "Username and password" auth initialized [Server] Server listening on port 3001 i want project start in port 3032 instead of 3000 i want project start in port 3032 instead of 3000

martinsos•7mo ago

Hey @hosseinkhalili , so you trying to change the port at which the client works during the development, right? We have instructions for this here: https://wasp-lang.dev/docs/project/custom-vite-config#custom-dev-server-port . But I get it that you want to load it from the env var. Here is how it is normally done in Vite: https://vitejs.dev/config/#using-environment-variables-in-config . The question is, does in Wasp, Vite by default load our .env.server file? Because that is where you defined WASP_WEB_CLIENT_URL, right? I have to admit I never tried that, but if it is not working for you, then that is likely the issue, that .env.server is not being loaded for Vite at that point. We can confirm this is so by you setting WASP_WEB_CLIENT_URL=... in directly in the terminal in which you call wasp and then calling wasp start, and I would expect Vite to then pick this up. If it does, then we know the problem is it is not picking up stuff from .env.server . To pick up stuff from .env.server, you could tell it directly to do so, they have instructions for that in that link I linked above.

Gaming

Programming

wasp start in custom port that added in .env