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.
232 Replies
Project ID:
2be2441e-29e4-4499-b3c0-5fdf32556887Project ID: 2be2441e-29e4-4499-b3c0-5fdf32556887
help
how do I close an issue?
ticket
@entiger - have you solved your problem?
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?
for anyone who may stumble upon this issue in the the future, do you care to tell us what solved your problem?
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
oh i see what you have done
theres a lot to tackle here
to get you up and running smoothly
😅
would you mind sharing your repo so i can work out a plan of action for you?
sure!
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.
you seemed to have just leaked your .env file
uh oh
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
Hi Brody this may actually end up taking a while. Is it okay if I can check in with you tomorrow?
for sure
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.
youre back!
yup haha
okay lets get situated, show me a screenshot of your railway project
Apologies having a bit of WiFi troubles, but will send the ss once I’m able to reconnect
haha no worries
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?
nope, just the project
i need to see whats up
right now I'm only hosting backend
but if I change the command
that uses your custom domain, so that will need to be the frontend going forward
Gotcha, so I should change it to only the frontend?
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 changesHad 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
can you send the current repo thats in use?
regarding copying the nixpacks.toml and caddyfile, I'm not too sure
GitHub
GitHub - nepthius/Clio
Contribute to nepthius/Clio development by creating an account on GitHub.
theres no changes?
It's the one I sent earlier ^, the old project id was pointing to the old repo
yup
apologies for the confusion
push your changes please
Where can I access the nixpacks.toml and caddyfile?
I pushed the other changes though
omfg
im so sorry
from this repo https://github.com/brody192/create-react-app-starter
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?
nope, remove the port from the service variables, dont touch the caddyfile right now
gotcha
Pushed the changes 👍
looks good, did the service redeploy?
Yup it's building right now
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?
you need a build script in the package.json, dont remove that
gotcha
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
hm gotcha, I think for now I'll ignore em and fix them later
okay, set a service variable
CI to false and let railway redeploy👍
okay the project was deployed
those are the messages I'm getting
looks good to me
can you open the site?
seems I'm getting this error, but everything seems to look good on cloudflare and railway's project settings?
when did you set that domain up?
I bought the domain several months ago, but fixed the dns to change the targeted railway app around half an hour ago
okay then you just have to wait for dns propagation
but in the mean time, have you set tls to full in cloudflare?
Nope it was flexible, just changed it to full
domain works now
yup!
should I create a seperate project for the backend?
hm it seems that it broke down again
no no, create a blank service in the same project
can you send the domain as a clickable link
https://www.weareclio.com/
it seems to work on mobile but not on the computer for some reason...?
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
Apologies had to attend an RA floor meeting
no worries
do you want a www subdomain anyway?
Oh shoot
Hmm
Naw not too keen on it
Didn’t realize that’s what messed it up lol
you may still wanna redirect www to non www then
but thats outside of the scope
Gotcha, thanks for the suggestion!
cloudflare has docs for that
okay so frontend works
Yup
create a new service in the same project, a blank or empty service
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
slow your horses
you need mongo
go ahead and add mongo to the project
Like setting up the variables?
we havent got that far yet
Ah apologies
Is that in integrations?
dont know what that means
+ new > databases > mogo
Gotcha
Okay added it
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
It connected to the right database I believe
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
gotcha I removed it and changed the var value
still no, you also didnt remove it lol
railway should auto fill it for you
remove both of those are try again please
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
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_URIhm I'm a tad bit confused, the mongoDB plugin did autofill all that information
Is there something else I should change?
see, autofill, you never even needed to open the mongodb plugin
ahhh I see
I removed MONGO_URL
is the root dir set to /backend?
yup!
add the repo
Connected 👍
well test it out
assuming it hasnt crashed or something
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
send me a link that i can test
React App
Web site created using create-react-app
something that i dont have to put in information for
yeah the profiles are supposed to load in automatically
so like below the find providers option there should be a load up of a few profiles
you are making a request to
https://weareclio.com/api/listings you need to make the request to your backend domainGotcha, 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?
this is a public website, any request a user makes like to listings would need to be on a public domain
ah gotcha, so I should add the same custom domain (weareclio.com) to the backend project
not quite, you would want api.weareclio.com
or backend.weareclio.com
you get the idea
Gotcha, thanks!
railways backend is called
backboard even
backboard.railway.applove waiting for the DNS probe 🥲
use cloudflares dns resolvers
1.1.1.1 1.0.0.1
gotcha, I'll take a look into it
what was the outcome of this?
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
what's your current start script?
"start": "react-scripts start",
share your repo again?
GitHub
GitHub - nepthius/Clio
Contribute to nepthius/Clio development by creating an account on GitHub.
but are you using the start command from the root's package.json?
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
so you just cant start it locally lol
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
oh well thats easy, just use a variable for your backend
variable for backend?
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/okay so I created a .env file with that variable, so with this I should delete proxy from the package.json file?
make sure its an
.env.local file
and yes you should delete the proxy thing in your package.jsongotcha
and for a sanity check, show me the variable you set in railway and the variable you have in your
.env.local fileRegarding the variable set in railway, is that from the frontend?
yes set that referance variable in the frontend service
without the arrow brackets actually
oops, gotcha
and that is the name of your backend right?
yup
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?added the change 👍
yup!
also, its a good idea to use
127.0.0.1 instead, since theres no name resolution involvedah gotcha, I'll change that up then
changed it here and for the local env port variable in the backend
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'so in this example where I make a fetch call, should I do the url and then add the '/api/listings'
answered the question before I asked it 😂
one step ahead of you
thanks!
That fix worked! I'll change up all the api calls now and let you know the results on the hosting side
so you can make calls to the backend locally without issue now?
yup
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 redundantah right, I'll change that up now then
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
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?
That's really odd, I attached a picture of the deployment logs
oh, this is a brand new mongo database, its not gonna have any data lol
oh shoot did I attach the wrong mongo database then when setting up?
when you run your backend locally, what database does it use?
it uses the clio database from mongodb
the same one
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
this one, and I'm pretty sure I used the same MONGO_URI var value as the env file
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
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?
who did you use to host your mongodb when you where developing this app?
Atlas
MongoDB Atlas
ah there we go, that makes sense, so do you want to continue using atlas, or do you wanna use a railway mongodb?
totally cool using railway
I guess that solves the issue then lol
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
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
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
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
gotcha, thanks for the links!
no prob
btw is it okay if I can add your github to the project, I'd prefer keeping to repo private for now 😅
oh sure, its brody192
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
Screenshot of the issue if that helps
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
why where you setting a local PORT environment variable to
http://127.0.0.1:4000?yeah I recently realized I messed up there lol
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 || 4000For 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.
what version of node are you using locally?
v18.10.0
what version is railway using? this can be found in the build table at the top of the build logs
seems 16 is the defualt?
yes but what is your build using
where is the build logs? I only see deploy logs
nvm
Hmm
click the build logs button 🤣
😅
for fun set
engines.node to 18 in your package.jsonset it 👍
let's see
didn't work :/
is it using node 18 though
yup
send me the site so I can check it
weareclio.com
this is how it looks
clickable link and a specific url to what's not working please
but it's supposed to look like this
oh yeah sure: https://weareclio.com/directory
React App
Web site created using create-react-app
password 🤨
I'll dm you the password
yeah 😅
#🛂｜readme #5
oh oops, sorry about that
here it is then: Jle8
yeah not seeing any errors in the browser, get that css build error sorted out and we will go from there
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!
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
Gotcha, thank you!
no prob!
Oops, seems it was an issue on my side haha
you fixed it?
Yup!
do tell me what the problem was
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 😅 )
mind if i look at your repo again? just to make sure you didnt misconfigure anything on the caddy or nixpacks side of things
it doesn't look like you ejected?
yup I didn't
I converted the tailwind css to regular css
fair enough
all looks good
sweet, thanks!
no problem! im happy you got it all working!
i had to give it a more applicable name
definitely fits better haha
I just realized you sent me trains!!! thank you so much, you really didn't have to do that
don't even mention it, your help has been the best. It was the least I could do 😁
thank you ❤️