deployment successful but frontend does not open
i have successfully deployed the database and server and frontend with logs not showing any apparent issues. The url for the backend opens successfully but the frontend url opens to an error. The only error I can see is "Failed to load resource: the server responded with a status of 503 ()" I cannot see any other error. I think it may be due to the caddyfile not opening the frontend..
152 Replies
Project ID:
N/Ahttps://myfitness-client-production.up.railway.app/ this is the url of the frontend
02fafef7-7f8e-49a0-a465-98566e3f143e is the project id
Project ID: 02fafef7-7f8e-49a0-a465-98566e3f143e
hello, can you share your deployment logs https://bookmarklets.up.railway.app/log-downloader/
and your repo please
https://github.com/Eugenepython/RAILWAY-FITNESS this is my github repo
GitHub
GitHub - Eugenepython/RAILWAY-FITNESS
Contribute to Eugenepython/RAILWAY-FITNESS development by creating an account on GitHub.
these are the deploy logs
you have a typo in the nixpacks.toml file, you have it named nixpack.toml (missing the 's')
oh" just fixed it now
okay let me know how that goes!
i still get an error.....
can you provide the deployment logs please?
these are the deploy logs
make sure you clear any and all build or start commands you may have set in the service settings
oh wow it works now to open it... but i get the CORS problem again
that i thought i knew how to fix ;?
looking
oh... i think ive seen the issue, ! i forgot to switch the backendURL back to the railway url
you are correct, but theres an easy way to do it so that you will never have to manually switch ever again
but first lets fix up some things
you have node_modules folders and a .env file in your repo
add the contents of this link https://www.toptal.com/developers/gitignore/api/node into a .gitignore at the root of your repo
then go and delete the node_modules folders and .env from the repo
let me know when done!
delete from repo but not my visual studio code right?
correct!
just trying to get this .gigignore file going sorry as ive two already in client and server
while youre doing that, can i get a screenshot of your entire railway project?
in terms of
this is it
so i deleted contents of the .env file
and deleted node modules
add the contents of this link https://www.toptal.com/developers/gitignore/api/node into a .gitignore at the root of your repo
if this isnt done the node_modules folders will keep coming back
ok ive done it and trying to push it through... the only problem is that in github when i delete the .env file, i cannot push changes again, until i pull the changes in github which would mean my .env file would be deleted in my local code?
your local .env file is fine, you dont need to touch that, the .gitignore wont delete anything locally, it just prevents the file/folder from making its way into your repo
yes but i deleted my .env file in github
if i pull changes locally it would delete the local .env file would it not?
and without pulling i cant push the .gitignore
The gitignore makes Github ignore the file, pulling won't delete it
but you can always just copy it onto your desktop or whatever until after you pull
ok so ive pushedthe gitignore.... and added in the .env file
i mean i pated the contents back into my local .env file
delete the .env file from the repo please
ah ok deleted it completely now
we want to use environment variables to seamlessly switch between your local backend url when running locally and the backend url while running on railway, so that you aren't switching urls in code before deploy.
- in the client railway service set a service variable
VITE_BACKEND_API_URL to https://${{myfitness-server.RAILWAY_PUBLIC_DOMAIN}}
- in your client code within App.jsx the backendUrl const should be import.meta.env.VITE_BACKEND_API_URL
- in your client folder within the project add a .env.local file with VITE_BACKEND_API_URL=http://localhost:3000 in it
that way, when developing locally, the local backend url is used automatically from the .env.local file, and when running on railway the backend url from the service variable is used, giving you a seamless transition from developing locally to running on railway! no more switching the backendUrl const around manually!in your client folder within the project add a .env.local file with VITE_BACKEND_API_URL=http://localhost:3000 in it sorry does this mean my local code?
yes you'd create that folder locally, that file would have no problems being in your repo so don't worry about that
just never place anything remotely sensitive in a .env.local file
gotcha
ok so ill push the code now
can you show me the variable I asked you to add to the railway service?
this is server variables
looks good, show me the const variable in app.jsx please
i assigned it here
looks good
show me your .env.local file?
(not at a computer so it's just faster if you'd show me please)
its in my client
as opposed to the .env in my server
it needs to be named
.env.local
just changed it
does the other one too in server?
.env and a .env.local are two different files that serve different purposes
nope, just the clientah cool ok
okay push your changes, I think you've done it all correctly
sorry...
sorry?? what happened?
sorry cut out
stil lget the CORS issues
seems to relate to the 3000 address
will look after lunch
const prodFrontendURL = process.env.FRONTEND_URL;
const devFrontendURL = 'http://localhost:5173';
app.use(
cors({
origin: [prodFrontendURL, devFrontendURL],
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
credentials: true,
})
);
i had this in servr code
ok thanks you! for your help
you are still hardcoding
http://localhost:3000/abs in some places
https://github.com/Eugenepython/RAILWAY-FITNESS/blob/main/Client/src/Modals/AbsModal.jsx#L19
https://github.com/Eugenepython/RAILWAY-FITNESS/blob/main/Client/src/Modals/EntryModal.jsx#L97
make sure you are using import.meta.env.VITE_BACKEND_API_URL whenever you fetch something from the backendthanks.. i changed that. i still get new errors though ;😂
haha but bro
that is not Railway
im assuming your login is requesting some api somewhere ?
error 500 is usually just the code failing
and CORS, do you have access to where the login data is getting sent ?
you can temporarily disable CORS client-side to see if it does work then, several plugins in google chrome webstore
CORS disabling/enabling plugin: (https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf)
Allow CORS: Access-Control-Allow-Origin
Easily add (Access-Control-Allow-Origin: *) rule to the response header.
let me know 🙂 i dont wanna overcomplicate prematurely
signature move
i tried locally
fetch(
${import.meta.env.VITE_BACKEND_API_URL}/register, { its this line that causes the problem, just wanted to check, as per further up the conversation, this is the right line to use for backend?
feel like im close otherwise haha
though going sleep now so dont stress about replying hahayou haven't overcomplicated anything, but when errors aren't properly caught and the framework has to send the 500, most frameworks don't end up setting the cors headers in that case, so the cors issue isn't really the problem, I'm fairly certain they do have cors setup correctly
but yes morpheus is correct, 500 is something went wrong with the backend code, please provide deployment logs for the backend
these are the server logs, new erros
you still have the .env file in your server folder, please please keep that file out of your repo going forward
yes just seen that ! ! it seems to keep getting pushed sorry
should the gitgnore file not keep it out? deleting it now
it should
i deleted the .env file again, it seems to be still looking for a 5432 port? by default?
should i use import.meta.env.DB_PORT instead of process.env.DB_PORT, does it read process.env correctly here, and if not revert to the default 5432?
i had these logs in my database deployment
actually let me try DB_USER not PGUSER for the variables
sorry i had got the wrong names for the variables DB instead of PG_ "lol"
so pleas ignore above messages, didnt want to delete them as thought that might cause even moreonfusion lol
import.meta.env is only for frontend stuff like vite, you still want to use process.env in node
okay so where are we at?
hey sorry just adjusting code further... i made the stupid mistake among others of using DB for local environment variables and PG for my production enviornmental variables which had confused things
ah yeah that would cause errors
hi, so i have progressed a bit further. specifically i used the session middleware which i hadnt realised wasnt being utilised in my development. In development i created another table in the database called 'sessiontable' and was able to connect to it locally. This is to store the session data.
However, when using railway, i tried creating this table in my database postgres, along with my 2 other tables, but it doesnt seem to be recognised by my railway server production
these are my deployment logs for the database im not sure why there are now issues with the third table
these are my deployment logs for the server, it says it does not recognise "sessiontable"
it all worked fine locally
what do you use to input data into postgres locally?
i store it in my postgresql
pool.query('SELECT * FROM SESSIONTABLE', (err, result) => {
if (err) {
console.error('Error querying sessionTable:', err);
} else {
console.log('Connected to sessionTable successfully');
}
}); this confirms connection to sessiontable locally
you would want to use that same SQL shell to connect to the postgres on railway too
do not use the data or query tabs in railway
oh so dont use a table in railway for this particular purpose? ok so i will try and connect to a remote SQL shell in production...
exactly!
my sql shell is only local so id need a remote sql shell
actually you might like gui software like dbgate better
im trying to use dbgate for the session data table
sorry just progressing with dbgate
no worries
so i created a table called "another name on my db gate and also another called "sessiontitle"
"another name" seems to have found its way across from dbgate to postgres database
i was just wondering, is there a way to delete tables from the database on railway? there doesnt seem to ben an option to do this, it seems you ahve to delete the whole database?
please please do not rely on the data or query tabs, I would never trust the information it shows you, use dbgate to delete tables or really to do anything with the database
as im not sure if the "sessiontitle" table here is the one i created earlier on railway, or a new one pulled from dbgate
it would be much easier if you exclusively used dbgate going forward, in fact, pretend railway doesn't even have a data or query tab
oh really, for everything including the two tables i have of "users" and "workout_history"? ok will do
so i would have to delete my postgres on railway,
and have no database at all on railway?
yes I can't stress enough how unreliable those data and query tabs are, dbgate is your absolute best bet to do stuff with any database you may host on railway
what no, who said anything about deleting your railway database
dbgate is simply just a graphical user interface to manage your data on postgres
so maintain the database on railway, but create the tables on dbgate after linking to railway....?
right, keep the database on Railway, but use dbgate exclusively for inputting data, deleting tables, rows, checking if the data you or your app created is there, etc
ok i get you, the tables appear on my postgres databas on railway straight after creation on dbgate so i just wanted to clarify
yes they do, because that's the database dbgate is putting data into, but the data tab in railway is not reliable, so take what it shows you with a grain of salt
ah ok
im still having porblems deploying my server and its connection to the database though..
i get these erros
are you sure your app is connecting to the same database that you are connecting to with dbgate?
the railway postgres database?
yes
i think they should be by the environemtnal variables...
yeah that looks good to me
im sure they were prevously as well connected
but is that the same database dbgate is connecting to? or are you using dbgate to connect to your local database by mistake?
i dont think so, as in my dbgate i created the new tables which then appeard on the railway postgres database so they are defintiely connected
it console logs the correct environment variables in the logs but just cannot find the tables from the database
https://github.com/Eugenepython/RAILWAY-FITNESS/blob/main/Server/app.js#L27
you use
process.env.PG_NAME when you should use process.env.PG_DATABASEi think maybe my pool is not quite correct
indeed
yes just saw that !!
IVE LITERALLY JUST PUSHED CHAGNES THRU
https://github.com/Eugenepython/RAILWAY-FITNESS/blob/main/Server/app.js#L27
it should print as
railway but yeahyes it works"!!
awsome!!
postgres
6349
Server is running on port 6570
Connected to users successfully
Connected to sessionTable successfully
woohoo
so im logged in and all working. got some issues with the photos not pulling through haha but i thik i can review this later and try and get it working
but main thing i s i can log in etc now
thanks s o much again for help and patience
of course, happy to help!
HEY first off, just bought you 3 trains as small token of my appreaciation!
the app works well apart from one thing which is the mages overlay. you can see above the difference betwee development and productin
<img
className = "image-layer"
src= './public/images/abs.png'
alt="Abs Overlay"
style = {theStyle}
/> i have the images coded here,
i have other images which work as intermidate displays which are coded in the css which come up fine
im just not sure why these imags are not showing
the overlay images are shown in my vsc like this but they do overly properly in development
holy i accidently read that i coded in css
haha
im not sure if anyone suggested this alrdy
but have you tried an image url? instead of the filepath
i can give you a cdn link of all your images if you want to test
sure ok i could try this, do you mean links to my github images as online urls?
yes just send me the images and i'll make you cdn links for all of them
so you will just specify the web url as source
as obviously urls are not prone for filepathing issues or mistakes
makes it easier to pinpoint the root issue sometimes
send me the images over discord
or DM whatever you prefer
these are all the images here
i have otherimages stored which work fine, i have them as background images in css as opposed to coded into a module compontent
https://api.xylex.ai/cdn/image/VIENNA_abs.png
https://api.xylex.ai/cdn/image/VIENNA_arms.png
https://api.xylex.ai/cdn/image/VIENNA_back.png
https://api.xylex.ai/cdn/image/VIENNA_chest.png
https://api.xylex.ai/cdn/image/VIENNA_legs.png
https://api.xylex.ai/cdn/image/VIENNA_shoulders.png
https://api.xylex.ai/cdn/image/VIENNA_thebody.png
lmk if this works
return (
<div >
<img
className="image-layer"
//src='./public/images/legs.png'
src="https://api.xylex.ai/cdn/image/VIENNA_legs.png"
alt="Legs Overlay"
style = {theStyle}
/>
</div> ); };
</div> ); };
thanks but it still doesnt work lol
send screenshot of console
this is the deployment logs of the client frontend
sorry hang on....
they do appear
sorry i will update the urls with the rest o fthe modals i think the issue was that the opacity was set at minimum
sorry it actually seems to be working with the online urls now!
yes it now seems to be working perfeclty with the online urls for the images thanks! im not sure why the file paths did not work as there was no error in devlopment and no way to test in production
thanks for thehelp!
glad it was resolved!
thank you so much ❤️