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.

Project 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

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

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 changes

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

can you send the current repo thats in use?

regarding copying the nixpacks.toml and caddyfile, I'm not too sure
https://github.com/nepthius/Clio

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_URI

hm 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

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 domain

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?

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.app

love 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?

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.json

gotcha

and for a sanity check, show me the variable you set in railway and the variable you have in your .env.local file

Regarding 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 involved

ah 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 redundant

ah 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 || 4000

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

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.json

set 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

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

Sure! https://github.com/nepthius/Clio

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 ❤️