a month ago
My problem is that my frontend of my website isn't being served at all despite being properly built in dist and it's being called properly in index.js.
it works perfectly in local production, the port is properly read, and I don't know why the frontend isn't being served at all. Please help me god do I need it
github: https://github.com/Krish54491/PianoWizards/tree/main
I first build the vite frontend, then host the backend server
build command: cd client && npm install && npm run build
then from the root folder do the predeploy command: npm install
then deploy: node index.js
Pinned Solution
a month ago
maybe Railway's proxy can't reach localhost? the server must bind to all interfaces:
wrong, only accessible locally
app.listen(port, () => console.logServer running on port ${port}));
accessible from Railway proxy
app.listen(port, '0.0.0.0', () => console.logServer running on port ${port}));
or use:
app.listen(port, () => console.logServer running on ${process.env.HOST || '0.0.0.0'}:${port}));
first try binding to 0.0.0.0. most likely fix
if still 502, check if Railway health check is hitting a specific route that fails
EDIT sorry i just saw you're doing that already. what exact port is Railway setting (echo $PORT in the deploy command) and is there a health check configured in Railway settings that's failing? maybe something else is running on port 8080?
21 Replies
a month ago
I checked your repo you have debug logs in index.js that print whether client/dist exists. Can you share what those lines show in your railway deploy/runtime logs?
a month ago
Of course!
Starting Container
npm warn config production Use --omit=dev instead.
up to date, audited 72 packages in 617ms
found 0 vulnerabilities
Stopping Container
Starting Container
Dist exists: true
Dist contents: [
'LilitaOne-Regular.ttf',
'assets',
'background.png',
'favicon.png',
'forfeit.png',
'hand.png',
'iconmonstr-copy-clipboard-lined.svg',
'index.html',
'keyboard.png',
'logo.png',
'media',
'menu',
'peggle.png',
'wizard.png'
]
Serving from: /app/client/dist
Server running on port 8080
Attachments
a month ago
based on repo in client/main.js line with connectWebSocket(), you have const port = process.env.PORT || 3000. process.env doesn't exist in the browser this will crash your entire frontend js. for fixing it you don't even need that line since you're already using location.host for the WebSocket URL which is correct. Just remove the process.env.PORT line and the unused testUrl (client/main.js remove line 495 and line 497)
Also It works locally because vite's dev server replaces process.env during development, but in production it's raw browser code and process is undefined.
dharmateja
based on repo in client/main.js line with connectWebSocket(), you have const port = process.env.PORT || 3000. process.env doesn't exist in the browser this will crash your entire frontend js. for fixing it you don't even need that line since you're already using location.host for the WebSocket URL which is correct. Just remove the process.env.PORT line and the unused testUrl (client/main.js remove line 495 and line 497)Also It works locally because vite's dev server replaces process.env during development, but in production it's raw browser code and process is undefined.
a month ago
I just changed it and tragically that wasn't it, but at least the code has less useless stuff
krish54491
I just changed it and tragically that wasn't it, but at least the code has less useless stuff
a month ago
What exactly you see when visiting the railway URL is it a Railway error page saying "Application failed to respond" or a blank white/black page?can you also share runtime logs after the latest deploy (after removing those lines)
a month ago
Starting Container
npm warn config production Use --omit=dev instead.
up to date, audited 72 packages in 507ms
found 0 vulnerabilities
Stopping Container
Starting Container
]
Serving from: /app/client/dist
Server running on port 8080
'assets',
'background.png',
'media',
'favicon.png',
'menu',
'peggle.png',
Dist exists: true
'wizard.png'
'forfeit.png',
'hand.png',
Dist contents: [
'iconmonstr-copy-clipboard-lined.svg',
'LilitaOne-Regular.ttf',
'index.html',
'keyboard.png',
'logo.png',
and the https logs all gave 502 errors with one of them trying to get / and the other /favicon.ico
Attachments
a month ago
Your latest deployments are all failing the build succeeds but the app crashes at runtime. 2 things to do: 1. Disable GitHub Pages in your repo (Settings -> Pages -> Source -> None) to stop the failing Jekyll action
2. Add this at the very top of your index.js to catch the crash reason:
process.on('uncaughtException', (err) => {
console.error('UNCAUGHT:', err);
});
Push and share the new logs so that I can see what's actually killing the process.
a month ago
1.github pages was already disabled, I just had multiple railway projects I forgot to delete.
2. the logs are unchanged from the previous ones:
Starting Container
npm warn config production Use --omit=dev instead.
up to date, audited 72 packages in 697ms
found 0 vulnerabilities
Stopping Container
Starting Container
'favicon.png',
'forfeit.png',
'hand.png',
'iconmonstr-copy-clipboard-lined.svg',
'index.html',
'keyboard.png',
'logo.png',
'media',
'menu',
'peggle.png',
'wizard.png'
]
Serving from: /app/client/dist
Server running on port 8080
Dist exists: true
Dist contents: [
'LilitaOne-Regular.ttf',
'assets',
'background.png',
krish54491
1.github pages was already disabled, I just had multiple railway projects I forgot to delete.2. the logs are unchanged from the previous ones:Starting Containernpm warn config production Use --omit=dev instead.up to date, audited 72 packages in 697msfound 0 vulnerabilitiesStopping ContainerStarting Container'favicon.png','forfeit.png','hand.png','iconmonstr-copy-clipboard-lined.svg','index.html','keyboard.png','logo.png','media','menu','peggle.png','wizard.png']Serving from: /app/client/distServer running on port 8080Dist exists: trueDist contents: ['LilitaOne-Regular.ttf','assets','background.png',
a month ago
You're using Express 5 (^5.2.1) which has breaking changes from Express 4. Your catch-all app.use((req, res, next) => ...) behaves differently
in v5. Try two things:
1. Change your catch-all from app.use to app.get:
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, "client/dist/index.html"));
});
2. If that doesn't work, downgrade to Express 4 in your package.json:
"express": "^4.21.0"
Delete package-lock.json, push, and redeploy.
Hope this works 
a month ago
1.this is the logs from that attempt:
Starting Container
Stopping Container
Starting Container
'media',
'menu',
'peggle.png',
Dist exists: true
Dist contents: [
'LilitaOne-Regular.ttf',
'assets',
'background.png',
'iconmonstr-copy-clipboard-lined.svg',
'favicon.png',
'wizard.png'
'index.html',
]
'forfeit.png',
'keyboard.png',
Serving from: /app/client/dist
'logo.png',
'hand.png',
UNCAUGHT: PathError [TypeError]: Missing parameter name at index 1: *; visit https://git.new/pathToRegexpError for info
at name (/app/node_modules/path-to-regexp/dist/index.js:96:19)
at parse (/app/node_modules/path-to-regexp/dist/index.js:113:68)
at pathToRegexp (/app/node_modules/path-to-regexp/dist/index.js:267:58)
at Object.match (/app/node_modules/path-to-regexp/dist/index.js:237:30)
at matcher (/app/node_modules/router/lib/layer.js:86:23)
at new Layer (/app/node_modules/router/lib/layer.js:93:62)
at Function.route (/app/node_modules/router/index.js:428:17)
at Function.route (/app/node_modules/express/lib/application.js:257:22)
at app.<computed> [as get] (/app/node_modules/express/lib/application.js:478:22)
at file:///app/index.js:26:5 {
originalPath: '*'
}
2. I don't think it did anything, but it didn't break anything more:
Starting Container
found 0 vulnerabilities
up to date, audited 75 packages in 726ms
npm warn config production Use --omit=dev instead.
Stopping Container
Starting Container
'favicon.png',
'forfeit.png',
'hand.png',
'iconmonstr-copy-clipboard-lined.svg',
'index.html',
'keyboard.png',
'logo.png',
'media',
'menu',
'peggle.png',
'wizard.png'
]
Serving from: /app/client/dist
Server running on port 8080
Dist exists: true
Dist contents: [
'LilitaOne-Regular.ttf',
'assets',
'background.png',
krish54491
1.this is the logs from that attempt:Starting ContainerStopping ContainerStarting Container'media','menu','peggle.png',Dist exists: trueDist contents: ['LilitaOne-Regular.ttf','assets','background.png','iconmonstr-copy-clipboard-lined.svg','favicon.png','wizard.png''index.html',]'forfeit.png','keyboard.png',Serving from: /app/client/dist'logo.png','hand.png',UNCAUGHT: PathError [TypeError]: Missing parameter name at index 1: *; visit https://git.new/pathToRegexpError for infoat name (/app/node_modules/path-to-regexp/dist/index.js:96:19)at parse (/app/node_modules/path-to-regexp/dist/index.js:113:68)at pathToRegexp (/app/node_modules/path-to-regexp/dist/index.js:267:58)at Object.match (/app/node_modules/path-to-regexp/dist/index.js:237:30)at matcher (/app/node_modules/router/lib/layer.js:86:23)at new Layer (/app/node_modules/router/lib/layer.js:93:62)at Function.route (/app/node_modules/router/index.js:428:17)at Function.route (/app/node_modules/express/lib/application.js:257:22)at app.<computed> [as get] (/app/node_modules/express/lib/application.js:478:22)at file:///app/index.js:26:5 {originalPath: '*'} 2. I don't think it did anything, but it didn't break anything more:Starting Containerfound 0 vulnerabilitiesup to date, audited 75 packages in 726msnpm warn config production Use --omit=dev instead.Stopping ContainerStarting Container'favicon.png','forfeit.png','hand.png','iconmonstr-copy-clipboard-lined.svg','index.html','keyboard.png','logo.png','media','menu','peggle.png','wizard.png']Serving from: /app/client/distServer running on port 8080Dist exists: trueDist contents: ['LilitaOne-Regular.ttf','assets','background.png',
a month ago
Your second attempt shows the server running with no crashes. Is your site actually loading now? Can you visit your railway URL and check?
a month ago
nope the server was running before as well and the site still isn't loading, thats why I'm really confused
krish54491
nope the server was running before as well and the site still isn't loading, thats why I'm really confused
a month ago
Since the server runs fine with no crashes but still doesn't respond are you 100% sure you're visiting the domain for this specific
deployment? You mentioned having multiple Railway projects earlier.can you go to this service in Railway dashboard -> Settings -> Networking -> copy the exact domain, and try that URL? Also, does curl https://your-exact-railway-domain.up.railway.app/ return anything or timeout?
a month ago
the domain is https://pianowizards-production.up.railway.appI just curled in my powershell:
curl pianowizards-production.up.railway.app
curl : {"status":"error","code":502,"message":"Application failed to respond","request_id":"Poeq_BnDTf6TzbcB8u2xcg"}
At line:1 char:1
+ curl pianowizards-production.up.railway.app
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : InvalidOperation: (System.Net.HttpWebRequest:HttpWebRequest) [Invoke-WebRequest], WebExc
eption
+ FullyQualifiedErrorId : WebCmdletWebResponseException,Microsoft.PowerShell.Commands.InvokeWebRequestCommand
Attachments
krish54491
Starting Containernpm warn config production Use --omit=dev instead.up to date, audited 72 packages in 507msfound 0 vulnerabilitiesStopping ContainerStarting Container]Serving from: /app/client/distServer running on port 8080'assets','background.png','media','favicon.png','menu','peggle.png',Dist exists: true'wizard.png''forfeit.png','hand.png',Dist contents: ['iconmonstr-copy-clipboard-lined.svg','LilitaOne-Regular.ttf','index.html','keyboard.png','logo.png',and the https logs all gave 502 errors with one of them trying to get / and the other /favicon.ico
a month ago
Your server is running on port 8080 while your URL is mapped to port 3001.
Make sure those two ports match.
dharmateja
update port
a month ago
(The screenshot literally shows a Railway generated domain...??)
0x5b62656e5d
(The screenshot literally shows a Railway generated domain...??)
a month ago
Ah sorry, I saw the +Custom Domain button and assumed there was no domain generated lol
0x5b62656e5d
Your server is running on port 8080 while your URL is mapped to port 3001.Make sure those two ports match.
a month ago
The url doesn't use the port anymore, but even when it did the ports were matched
a month ago
maybe Railway's proxy can't reach localhost? the server must bind to all interfaces:
wrong, only accessible locally
app.listen(port, () => console.logServer running on port ${port}));
accessible from Railway proxy
app.listen(port, '0.0.0.0', () => console.logServer running on port ${port}));
or use:
app.listen(port, () => console.logServer running on ${process.env.HOST || '0.0.0.0'}:${port}));
first try binding to 0.0.0.0. most likely fix
if still 502, check if Railway health check is hitting a specific route that fails
EDIT sorry i just saw you're doing that already. what exact port is Railway setting (echo $PORT in the deploy command) and is there a health check configured in Railway settings that's failing? maybe something else is running on port 8080?
24 days ago
the problem was so stupid, I had the port set wrong in railway's public networking, I apologize for my stupidity
Attachments
Status changed to Solved brody • 24 days ago