R
Railway12mo ago
entiger

Help setting up a monorepo

I'm getting this error when deploying my project. I made sure no other deployments are running, but that does not help.
No description
232 Replies
Percy
Percy12mo ago
Project ID: 2be2441e-29e4-4499-b3c0-5fdf32556887
entiger
entiger12mo ago
Project ID: 2be2441e-29e4-4499-b3c0-5fdf32556887 help how do I close an issue? ticket
Brody
Brody12mo ago
@entiger - have you solved your problem?
entiger
entiger12mo ago
yup! however I'm having an issue with the fullstack application the backend runs but I think the frontend is taking too long to build?
Brody
Brody12mo ago
for anyone who may stumble upon this issue in the the future, do you care to tell us what solved your problem?
entiger
entiger12mo ago
I'm getting a kill-9 error yeah it was a bit silly, but just further specified port 3000 in package.json for the frontend as it was overlapping even though it wasn't before
Brody
Brody12mo ago
oh i see what you have done theres a lot to tackle here to get you up and running smoothly
entiger
entiger12mo ago
😅
Brody
Brody12mo ago
would you mind sharing your repo so i can work out a plan of action for you?
entiger
entiger12mo ago
sure!
entiger
entiger12mo ago
thanks for waiting, you should be able to view it here: https://github.com/nepthius/Clio
GitHub
GitHub - nepthius/Clio
Contribute to nepthius/Clio development by creating an account on GitHub.
Brody
Brody12mo ago
you seemed to have just leaked your .env file
entiger
entiger12mo ago
uh oh
Brody
Brody12mo ago
time to go regen! let me know when youve done that and once you have the new variables, put then in the railway service variables
entiger
entiger12mo ago
Hi Brody this may actually end up taking a while. Is it okay if I can check in with you tomorrow?
Brody
Brody12mo ago
for sure
entiger
entiger11mo ago
Hi Brody, apologies for the delay I had a few things to take care of. Here is the new github repo: https://github.com/nepthius/Clio
GitHub
GitHub - nepthius/Clio
Contribute to nepthius/Clio development by creating an account on GitHub.
Brody
Brody11mo ago
youre back!
entiger
entiger11mo ago
yup haha
Brody
Brody11mo ago
okay lets get situated, show me a screenshot of your railway project
entiger
entiger11mo ago
Apologies having a bit of WiFi troubles, but will send the ss once I’m able to reconnect
Brody
Brody11mo ago
haha no worries
entiger
entiger11mo ago
okay back in business, I moved to a place with somewhat decent Wi-Fi Would you like to send you a ss of the settings section?
Brody
Brody11mo ago
nope, just the project i need to see whats up
entiger
entiger11mo ago
No description
entiger
entiger11mo ago
right now I'm only hosting backend but if I change the command
Brody
Brody11mo ago
that uses your custom domain, so that will need to be the frontend going forward
entiger
entiger11mo ago
Gotcha, so I should change it to only the frontend?
Brody
Brody11mo ago
yes but we need to get your frontend in a state that is ready to deploy to railway - rename your frontend's start script to dev in the package.json - copy the nixpacks.toml and Caddyfile into your frontend folder - remove any and all build or start commands that you may have set in the service settings - set the root directory to /frontend in the service settings - push your changes
entiger
entiger11mo ago
Had to change a few things around since I just realized the old project was pointing to the old repo. Here is the project id of the new repo: cdaee948-8fa4-417c-b46b-589f6d18b4d1. Got it, I changed the script to dev and pushed to github, removed the build commands, and set the root to frontend
Brody
Brody11mo ago
can you send the current repo thats in use?
entiger
entiger11mo ago
regarding copying the nixpacks.toml and caddyfile, I'm not too sure
entiger
entiger11mo ago
GitHub
GitHub - nepthius/Clio
Contribute to nepthius/Clio development by creating an account on GitHub.
Brody
Brody11mo ago
theres no changes?
entiger
entiger11mo ago
It's the one I sent earlier ^, the old project id was pointing to the old repo yup apologies for the confusion
Brody
Brody11mo ago
push your changes please
entiger
entiger11mo ago
Where can I access the nixpacks.toml and caddyfile? I pushed the other changes though
Brody
Brody11mo ago
entiger
entiger11mo ago
no worries, thanks! I see that there's a port variable in the caddy file, but I also have a port varible in the backend env that is right now set for 4000 in the railway project. Should I change this to 3000 since we are working with the frontend and that's the frontend port?
Brody
Brody11mo ago
nope, remove the port from the service variables, dont touch the caddyfile right now
entiger
entiger11mo ago
gotcha Pushed the changes 👍
Brody
Brody11mo ago
looks good, did the service redeploy?
entiger
entiger11mo ago
Yup it's building right now
entiger
entiger11mo ago
No description
entiger
entiger11mo ago
I'm getting this error I removed the build commands from railway, but I did not from the package.json file - I'm guessing the error lies there?
Brody
Brody11mo ago
you need a build script in the package.json, dont remove that
entiger
entiger11mo ago
gotcha
Brody
Brody11mo ago
so the reason your build is failing is because you have warnings theres two options, fix them, ignore them and fix them later your choice
entiger
entiger11mo ago
hm gotcha, I think for now I'll ignore em and fix them later
Brody
Brody11mo ago
okay, set a service variable CI to false and let railway redeploy
entiger
entiger11mo ago
👍 okay the project was deployed
entiger
entiger11mo ago
No description
entiger
entiger11mo ago
those are the messages I'm getting
Brody
Brody11mo ago
looks good to me can you open the site?
entiger
entiger11mo ago
No description
entiger
entiger11mo ago
seems I'm getting this error, but everything seems to look good on cloudflare and railway's project settings?
Brody
Brody11mo ago
when did you set that domain up?
entiger
entiger11mo ago
I bought the domain several months ago, but fixed the dns to change the targeted railway app around half an hour ago
Brody
Brody11mo ago
okay then you just have to wait for dns propagation but in the mean time, have you set tls to full in cloudflare?
entiger
entiger11mo ago
Nope it was flexible, just changed it to full
Brody
Brody11mo ago
domain works now
entiger
entiger11mo ago
yup! should I create a seperate project for the backend? hm it seems that it broke down again
Brody
Brody11mo ago
no no, create a blank service in the same project can you send the domain as a clickable link
entiger
entiger11mo ago
https://www.weareclio.com/ it seems to work on mobile but not on the computer for some reason...?
Brody
Brody11mo ago
have you changed anything at all? ah I see, it's just the www subdomain that doesn't work, you must have not set that up correctly
entiger
entiger11mo ago
Apologies had to attend an RA floor meeting
Brody
Brody11mo ago
no worries do you want a www subdomain anyway?
entiger
entiger11mo ago
Oh shoot Hmm Naw not too keen on it Didn’t realize that’s what messed it up lol
Brody
Brody11mo ago
you may still wanna redirect www to non www then but thats outside of the scope
entiger
entiger11mo ago
Gotcha, thanks for the suggestion!
Brody
Brody11mo ago
cloudflare has docs for that okay so frontend works
entiger
entiger11mo ago
Yup
Brody
Brody11mo ago
create a new service in the same project, a blank or empty service
entiger
entiger11mo ago
I think I’m just overlooking it, but I’m not exactly sure where the button to do that is in the project? Nvm just found it Okay created Okay I think I see how to do it Hopefully it works lol
Brody
Brody11mo ago
slow your horses you need mongo go ahead and add mongo to the project
entiger
entiger11mo ago
Like setting up the variables?
Brody
Brody11mo ago
we havent got that far yet
entiger
entiger11mo ago
Ah apologies Is that in integrations?
Brody
Brody11mo ago
dont know what that means + new > databases > mogo
entiger
entiger11mo ago
Gotcha Okay added it
Brody
Brody11mo ago
add a variable MONGO_URI to the backend, and reference it to the mongodb's MONGO_URL variable https://docs.railway.app/develop/variables#reference-variables and then show me a screenshot with the value shown for that variable so i know its good
entiger
entiger11mo ago
No description
No description
entiger
entiger11mo ago
It connected to the right database I believe
Brody
Brody11mo ago
nope that is wrong make sure you are using a variable referance like the screenshot in the docs show also we were not at the point of connecting the repo
entiger
entiger11mo ago
gotcha I removed it and changed the var value
No description
Brody
Brody11mo ago
still no, you also didnt remove it lol railway should auto fill it for you remove both of those are try again please
entiger
entiger11mo ago
I meant I removed the github connection, the ss I sent was of the backend service. The ss I just attached is of the MongoDB variables
No description
Brody
Brody11mo ago
you dont even need to go into the mongo plugin, please have a look at this docs section https://docs.railway.app/develop/variables#reference-variables railway will auto fill the MONGO_URL for you, all you have to do is change its name to MONGO_URI
entiger
entiger11mo ago
hm I'm a tad bit confused, the mongoDB plugin did autofill all that information Is there something else I should change?
Brody
Brody11mo ago
No description
Brody
Brody11mo ago
see, autofill, you never even needed to open the mongodb plugin
entiger
entiger11mo ago
ahhh I see
No description
entiger
entiger11mo ago
I removed MONGO_URL
Brody
Brody11mo ago
is the root dir set to /backend?
entiger
entiger11mo ago
yup!
Brody
Brody11mo ago
add the repo
entiger
entiger11mo ago
Connected 👍
Brody
Brody11mo ago
well test it out assuming it hasnt crashed or something
entiger
entiger11mo ago
It seems I’m getting a “Uncaught (in promise) Syntax Error: Unexpected tonten ‘<‘, “!doctype “… is not valid json” error I think I know the error though Nvm, for some reason I’m getting HTML back rather than JSON But it seems to be working when I run it locally
Brody
Brody11mo ago
send me a link that i can test
entiger
entiger11mo ago
React App
Web site created using create-react-app
Brody
Brody11mo ago
something that i dont have to put in information for
entiger
entiger11mo ago
yeah the profiles are supposed to load in automatically
entiger
entiger11mo ago
No description
entiger
entiger11mo ago
so like below the find providers option there should be a load up of a few profiles
Brody
Brody11mo ago
you are making a request to https://weareclio.com/api/listings you need to make the request to your backend domain
entiger
entiger11mo ago
Gotcha, so if I don't want to expose it publicly with a domain and I'm given the link project-name.railway.internal in the settings should I do project-name.railway.internal/api/listings instead?
Brody
Brody11mo ago
this is a public website, any request a user makes like to listings would need to be on a public domain
entiger
entiger11mo ago
ah gotcha, so I should add the same custom domain (weareclio.com) to the backend project
Brody
Brody11mo ago
not quite, you would want api.weareclio.com or backend.weareclio.com you get the idea
entiger
entiger11mo ago
Gotcha, thanks!
Brody
Brody11mo ago
railways backend is called backboard even backboard.railway.app
entiger
entiger11mo ago
love waiting for the DNS probe 🥲
Brody
Brody11mo ago
use cloudflares dns resolvers 1.1.1.1 1.0.0.1
entiger
entiger11mo ago
gotcha, I'll take a look into it
Brody
Brody11mo ago
what was the outcome of this?
entiger
entiger11mo ago
I was able to fix the cloudflare issue, but some of the tailwind css styles were not loading in when hosting so I'm trying to fix that right now. However, I'm having an error when I try to run the npm run start command locally saying "Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options.allowedHosts[0] should be a non-empty string" The backend however works I believe, I just need to fix a few things with the fetch request on the frontend
Brody
Brody11mo ago
what's your current start script?
entiger
entiger11mo ago
"start": "react-scripts start",
Brody
Brody11mo ago
share your repo again?
entiger
entiger11mo ago
GitHub
GitHub - nepthius/Clio
Contribute to nepthius/Clio development by creating an account on GitHub.
Brody
Brody11mo ago
but are you using the start command from the root's package.json?
entiger
entiger11mo ago
just pushed in the most recent changes I'm using the start command from the frontend folder for the frontend and then the backend folder for the backend not sure if this helps, but the backend works completely fine for local hosting, it's just the frontend that is having this issue
Brody
Brody11mo ago
so you just cant start it locally lol
entiger
entiger11mo ago
yeah, I found that error to stop appearing when I remove "proxy": "http://localhost:3000" on the frontend's package.json file but now I need to find a way to connect the backend so I'm looking through overflow lol. I had assumed the error may have been from some configuration done when setting up the hosting. I think I should be able to figure it out now tho
Brody
Brody11mo ago
oh well thats easy, just use a variable for your backend
entiger
entiger11mo ago
variable for backend?
Brody
Brody11mo ago
in railway have a frontend service variable REACT_APP_API_URL = https://${{ <the name of your backend service>.RAILWAY_PUBLIC_DOMAIN }} locally have a .env.local file with the same REACT_APP_API_URL but equal to http://127.0.0.1:3000 then just use process.env.REACT_APP_API_URL wherever you call your backend from the frontend code then theres no need for the proxy and you dont have to go manually changing anything between developing locally and running on railway for more information you can look at react-scripts docs for environment variables https://create-react-app.dev/docs/adding-custom-environment-variables/
entiger
entiger11mo ago
okay so I created a .env file with that variable, so with this I should delete proxy from the package.json file?
Brody
Brody11mo ago
make sure its an .env.local file and yes you should delete the proxy thing in your package.json
entiger
entiger11mo ago
gotcha
Brody
Brody11mo ago
and for a sanity check, show me the variable you set in railway and the variable you have in your .env.local file
entiger
entiger11mo ago
Regarding the variable set in railway, is that from the frontend?
No description
Brody
Brody11mo ago
yes set that referance variable in the frontend service
entiger
entiger11mo ago
No description
Brody
Brody11mo ago
without the arrow brackets actually
entiger
entiger11mo ago
oops, gotcha
Brody
Brody11mo ago
and that is the name of your backend right?
entiger
entiger11mo ago
No description
entiger
entiger11mo ago
No description
entiger
entiger11mo ago
yup
Brody
Brody11mo ago
looks good to me but i have a nit pick https://github.com/nepthius/Clio/blob/main/backend/server.js#L32 change it to process.env.PORT || 4000 this will use the railway assigned port when on railway, and it will use 4000 when running locally, i assume you had previously done a PORT=4000 before running your server locally?
entiger
entiger11mo ago
added the change 👍 yup!
Brody
Brody11mo ago
also, its a good idea to use 127.0.0.1 instead, since theres no name resolution involved
entiger
entiger11mo ago
ah gotcha, I'll change that up then
entiger
entiger11mo ago
changed it here and for the local env port variable in the backend
No description
Brody
Brody11mo ago
and remember, now you will need to go through your frontend's code and use process.env.REACT_APP_API_URL in place of where you make your api calls to the backend for example https://github.com/nepthius/Clio/blob/main/frontend/src/pages/directory.js#L98 this would turn into process.env.REACT_APP_API_URL + '/api/listings'
entiger
entiger11mo ago
so in this example where I make a fetch call, should I do the url and then add the '/api/listings'
No description
entiger
entiger11mo ago
answered the question before I asked it 😂
Brody
Brody11mo ago
one step ahead of you
entiger
entiger11mo ago
thanks! That fix worked! I'll change up all the api calls now and let you know the results on the hosting side
Brody
Brody11mo ago
so you can make calls to the backend locally without issue now?
entiger
entiger11mo ago
yup
Brody
Brody11mo ago
awsome btw https://github.com/nepthius/Clio/blob/main/frontend/package.json#L34 react-scripts start starts on port 3000 by default so the PORT=3000 is a bit redundant
entiger
entiger11mo ago
ah right, I'll change that up now then
entiger
entiger11mo ago
Hm for some reason the API calls don't work when hosting, but do work locally. I attached an image of the current setup in case there may be any problems there
No description
Brody
Brody11mo ago
the url for the api requests are correct, but your backend is returning an empty array https://backend.weareclio.com/api/listings any idea why? is there anything in the logs of the backend?
entiger
entiger11mo ago
That's really odd, I attached a picture of the deployment logs
No description
Brody
Brody11mo ago
oh, this is a brand new mongo database, its not gonna have any data lol
entiger
entiger11mo ago
oh shoot did I attach the wrong mongo database then when setting up?
Brody
Brody11mo ago
when you run your backend locally, what database does it use?
entiger
entiger11mo ago
it uses the clio database from mongodb the same one
Brody
Brody11mo ago
i dont think so, i had you add it https://discord.com/channels/713503345364697088/1144444122111946762/1146620872476594177 so what database where you using before you even opened this help thread
entiger
entiger11mo ago
this one, and I'm pretty sure I used the same MONGO_URI var value as the env file
Brody
Brody11mo ago
i have no clue what that is, but you where not using the mongo database thats in the current project, simply because it didnt exist before you created this thread
entiger
entiger11mo ago
apologies I took a screenshot of the mongodb account that had the values in it from the site. What steps would you recommend taking to connect the one that shows up on the local version?
Brody
Brody11mo ago
who did you use to host your mongodb when you where developing this app?
entiger
entiger11mo ago
Atlas MongoDB Atlas
Brody
Brody11mo ago
ah there we go, that makes sense, so do you want to continue using atlas, or do you wanna use a railway mongodb?
entiger
entiger11mo ago
totally cool using railway I guess that solves the issue then lol
Brody
Brody11mo ago
that means youd need to dump the data from your atlas database and restore it to the railway database if that sounds like something you dont want to get into, then you can just use the atlas database instead
entiger
entiger11mo ago
Gotcha, I think I may have accidentally deleted a model called listings in the process from the test collection 😅 . The data is all for testing anyways, so I can just dump it and create new data
entiger
entiger11mo ago
listings is gone from railway here, but I'm assuming it'll be restored once I create a new object and push it to the database <-- nvm I was being silly
No description
Brody
Brody11mo ago
well its up to you, dump the atlas database https://www.mongodb.com/docs/database-tools/mongodump/#mongodb-binary-bin.mongodump and restore it to the railway database https://www.mongodb.com/docs/database-tools/mongorestore/#mongodb-binary-bin.mongorestore or just put new data into the railway database
entiger
entiger11mo ago
gotcha, thanks for the links!
Brody
Brody11mo ago
no prob
entiger
entiger11mo ago
btw is it okay if I can add your github to the project, I'd prefer keeping to repo private for now 😅
Brody
Brody11mo ago
oh sure, its brody192
entiger
entiger11mo ago
thanks! When running the backend locally I'm getting this error thrown: Error: listen EACCES: permission denied http://127.0.0.1:4000. I ran the sudo lsof -i :4000 to check if there was activity in the port, but nothing showed up. I'm also getting a similar issue thrown in the frontend: POST http://localhost:4000/api/validate-password net::ERR_CONNECTION_REFUSED. Not too sure what's going on here the backend seems to work if I remove the (http://) for some reason? nevermind it doesn't work on the second rerun that's weird
entiger
entiger11mo ago
Screenshot of the issue if that helps
No description
entiger
entiger11mo ago
okay it runs if I make the port equal to 4000, but not http://127.0.0.1:4000 Still have no idea why, I'm assuming I wrote the latter wrong but I'm not sure how, but the site is working now
Brody
Brody11mo ago
why where you setting a local PORT environment variable to http://127.0.0.1:4000?
entiger
entiger11mo ago
yeah I recently realized I messed up there lol
Brody
Brody11mo ago
you shouldn't need to set anything of the sort that's why I had you change the server.js port code to process.env.PORT || 4000
entiger
entiger11mo ago
For some reason during hosting the selector.jsx tailwind styling is not popping up and makes the country selection bar unusable. Locally when I run the code the styling works, however. Not sure if it's related to this warning that I see popping up: Warning (519:3) Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin before Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before. WARNING in ./src/index.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css) Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (519:3) Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin before Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting webpack compiled with 1 warning. Not too sure how to solve this. I am using Creact React App if that helps
Using with Preprocessors - Tailwind CSS
A guide to using Tailwind with common CSS preprocessors like Sass, Less, and Stylus.
Brody
Brody11mo ago
what version of node are you using locally?
entiger
entiger11mo ago
v18.10.0
Brody
Brody11mo ago
what version is railway using? this can be found in the build table at the top of the build logs
entiger
entiger11mo ago
seems 16 is the defualt?
No description
Brody
Brody11mo ago
yes but what is your build using
entiger
entiger11mo ago
where is the build logs? I only see deploy logs nvm Hmm
Brody
Brody11mo ago
click the build logs button 🤣
entiger
entiger11mo ago
No description
entiger
entiger11mo ago
😅
Brody
Brody11mo ago
for fun set engines.node to 18 in your package.json
entiger
entiger11mo ago
set it 👍
Brody
Brody11mo ago
let's see
entiger
entiger11mo ago
didn't work :/
Brody
Brody11mo ago
is it using node 18 though
entiger
entiger11mo ago
yup
No description
Brody
Brody11mo ago
send me the site so I can check it
entiger
entiger11mo ago
weareclio.com
entiger
entiger11mo ago
No description
entiger
entiger11mo ago
this is how it looks
Brody
Brody11mo ago
clickable link and a specific url to what's not working please
entiger
entiger11mo ago
but it's supposed to look like this
No description
entiger
entiger11mo ago
React App
Web site created using create-react-app
Brody
Brody11mo ago
password 🤨
entiger
entiger11mo ago
I'll dm you the password yeah 😅
Brody
Brody11mo ago
#🛂|readme #5
entiger
entiger11mo ago
oh oops, sorry about that here it is then: Jle8
Brody
Brody11mo ago
yeah not seeing any errors in the browser, get that css build error sorted out and we will go from there
entiger
entiger11mo ago
gotcha will do If I wanted to remove the MongoDB component from Railway and switch it back to Atlas (and did not care about the lost data), how should I go about doing that? Thank you!
Brody
Brody11mo ago
you can delete it from within its settings you'd then just need to update the service variables to point to the atlas database, and then let the service redeploy one thing to note is that atlas requires IP whitelisting, and railway doesn't have static ips so you'd need to whitelist all ips somehow
entiger
entiger11mo ago
Gotcha, thank you!
Brody
Brody11mo ago
no prob!
entiger
entiger11mo ago
Oops, seems it was an issue on my side haha
Brody
Brody11mo ago
you fixed it?
entiger
entiger11mo ago
Yup!
Brody
Brody11mo ago
do tell me what the problem was
entiger
entiger11mo ago
The country selector was not displaying properly when hosting but it did when running locally (the country selector had tailwind css in it). It seems it was because Create React App does not allow nested CSS w tailwind and the only solution to that was ejecting create react app according to stackoverflow, the github, etc. So I converted all the tailwind css to regular css. (Probably not the most optimal solution, but it's what finally worked after being stuck on this for a day 😅 )
Brody
Brody11mo ago
mind if i look at your repo again? just to make sure you didnt misconfigure anything on the caddy or nixpacks side of things
Brody
Brody11mo ago
it doesn't look like you ejected?
entiger
entiger11mo ago
yup I didn't I converted the tailwind css to regular css
Brody
Brody11mo ago
fair enough all looks good
entiger
entiger11mo ago
sweet, thanks!
Brody
Brody11mo ago
no problem! im happy you got it all working! i had to give it a more applicable name
entiger
entiger11mo ago
definitely fits better haha
Brody
Brody11mo ago
I just realized you sent me trains!!! thank you so much, you really didn't have to do that
entiger
entiger11mo ago
don't even mention it, your help has been the best. It was the least I could do 😁
Brody
Brody11mo ago
thank you ❤️