looks good to me

getting a cors error that ive been trying to deal w

refer to your notes about the express backends you've done when working with angular

you would need the same environment variable and cors middleware code

sorry i am being unclear! i understand the error, and why cors is needed (this helped explain that to me pretty well: (https://www.stackhawk.com/blog/react-cors-guide-what-it-is-and-how-to-enable-it/)

what i mean is i think i dealt with the error in the way that is needed, but i keep getting the same error.

error:

me implementing cors on the backend in my sevrer

this post request is being sent to your frontend domain

i thought my backend railway service should have the frontendurl as a variable? like this:

i switched it as youre suggesting, but it's returning undefined because i dont have that variable here whereas with the frontend variable i do have in my backend service

what i said didnt have anything to do with the backends service variables.

your frontend is making api calls to the frontend domain, it needs to make api calls to the backend domain.

my frontend domain has the backend url

as you can see by these error messages, your frontend is calling the frontend domain

now it's correct

though now I find it odd that your locally running frontend is making requests to the backend on railway

after i got locally running correctly. i tried to set up production. so i have this in a .env

just as a sanity check can you show me your frontend making calls to your locally running backend without issues?

sure thing!

one sec

can you send the repo again please

https://github.com/ChiomaGrace/ReactApp

you keep commiting your node_modules folder

i have them in two gitignores!!

so idk why thats happening

https://github.com/ChiomaGrace/ReactApp/blob/main/.gitignore

what happens if you just open the backend domain in your browser

it just spins but i can see my console logs in railway

please send me the domain

i gave you access to the project! i think it shouldve emailed ya

please send the domain

https://react-app-backend-production.up.railway.app/

there would be a code issue here somewhere

okay. should i make another post and ask the thread? cause ive been poking around today and not too sure what it is

yeah thats a good idea

I think you need a mentor.

You should find someone near you.

If you cannot find, I can mentor you. But you must mentor my youngest sister too. She has so much potential but is not utilizing all that wonderful potential.
She plays soccer just like you at the state level in Imo State where we come from. But recently, she just stopped. Someone who got to that level.

She's smart enough to code too if she wanted to, but she hasn't indicated interest in coding. The coding part, she can decide not to. That is no problem.

She's your age and I believe your lingo would rhyme with hers.

If you can get her start getting her back on track for me, I will make you a badass coder.

can start*

Hi Max!

I think with sports, just like anything in life, the individual person has to want it, so I don't know if anything I could say could make her want it to happen if that makes sense. But if she has any questions about soccer or something, I'd be happy to answer them the best I can!

I see. OK.
I'll talk with her.

Meanwhile, is your app up?

It's getting there! I figured out what was causing the deployment to fail on the backend folder and frontend folder.

Now my question is how do I correctly setup a deployment for the react app? Do I need a caddyfile and nixpacks.toml?
Right now my app works deployed when it is basic html. I find it errors when I include routing. My routing works locally, but the routing causes the deployment to fail when deployed. Is there some configuation I am missing that is needed for routing in deployment? <@539512869780455445> <@965732512720617492>

yes you do need the nixpacks.toml and Caddyfile that ive previously linked

i included both. https://github.com/ChiomaGrace/testDeployment/blob/main/frontend/nixpacks.toml
https://github.com/ChiomaGrace/testDeployment/blob/main/frontend/Caddyfile

Right now my app is deployed just like this: https://testdeployment-frontend-production.up.railway.app/
The buttons in the nav do not route anywhere. The minute I configure them to route somewhere and then push the changes live, the deployment fails

build logs please

ooo looks like i solved it! now i will try to tackle the api issue from earlier

what solved it?

it didn't like that i had a stylesheet i imported on a component that i wasn't using (yet)

interesting

then the backend errors where coming from my multer/cloudinary packages.

locally the api request works (so when the post url is ('http://127.0.0.1:8000/submitResident')
when i try to use the railway variable the api request ${process.env.REACT_APP_BACKEND_URL}/submitResident) is just pending

ive been digging around and i saw this guy use the port key as an environment variable in railway..do u think i should give that a go?
https://www.youtube.com/watch?v=N9hrClMJFqk (1 min 54 sec)
he seemed to have success w configuring that way

you already do, at least you did last time i checked your backend code

oh yeah true

i guess you dont need a frontend and backend service variables for react? as long as i have the port key it seems to work?

that video is not good, it leaves so many things out, and that causes you to leave them out

what did i leave out?

from your last message, you seem to want to leave out some variables?

no. i am saying when i orginially set this app for deployment i followed how i did it for angular. so my frontend service had a backendurl variable and vice versa with my backend service

then when i tried to use the backendurl in a .env file it wouldnt work. however when the api link was the localhost it did work

so all i did was leave it as the localhost url and it still works in deployment

which surprises me

yes theres something wrong with your backend deployment

so it is incorrect to use the localhost url?

cause it worked locally and deployed

just because something "works" doesnt mean its correct

you need to find out why your backend on railway is just infinitely loading

it's not

haha

oh you've fixed it?

yeah it doesn't infinite load anymore. it is like this now

https://react-app-backend-production.up.railway.app/

the issue now is the api request doesnt go through and it pends

cool, what was the issue?

the issue now is the api request doesnt go through and it pends

what was the issue with the backend

^

oh that was causing it to infinity load?

it appears so

okay and where can i see an issue with the frontend?

frontend is also deployed w no issue

the problem i have now is the api request/submitting a form

yes please send me a link to where i can see this issue happening

Sorry for being late to the party. I was having the same issue with React on Railway.
Another way is to use "yarn" for your package manager instead of "npm".
I usually do not want to go through the stress of adding extra files.

And when using yarn in your package manager, add this line to your list of commands in your package.json file:
"start": "npx http-server ./dist"

This line uses the http-server package to serve your react files.
Railway on seeing that command, I noticed, installed the http-server for me and served my files

And finally,
For the settings on your Railway, change the build command to:
"yarn build" (without the quotes of course)

And the start command, make it:
"yarn start" (without the quotes of course)

I would also like to try this pattern sometime

The routing I use currently is HashRouter (if you are using react-router).
But one thing about this is that your URL looks untidy.
Give it a browse.
Replace BrowserRouter with HashRouter.

https://react-app-frontend-production.up.railway.app/

please dont make these kinds of recommendations, i understand you're trying to help but it would only add to the complexity

Again, if you want to use BrowserRouter on production, there is another pattern yet. I will give you a detailed guide on how I implemented it, if it works. Because I am planning on using it on my next project.

Ah OK

i did see this being suggested in some stackoverflows

chioma, please stick with npm and the nixpacks.toml and Caddyfile

That is what I have been using on the quick projects I am building in React

^

while http-server is better than a development server, it is still far from ideal in so many ways

OK. Please, do so, <@1150235403157241856> .
Just know there is another way for another time.
I only feel it is good to have options.

having options is good, only when the proposed option is a good option

sticking with it sounds good! thanks for trying to help max:)

agree, thank you

okay back to the topic, where am i supposed to be seeing errors?

i made some more changes so i think you can see now. if you go to the create component and look at the console log when you try to submit something

its working?

it's submitting

but i hav e no idea how

cause it's not going to the create function

otherwise i would see my console logs in said function

but it saves into the mongodb

it's very strange

just seems like a code issue?

it's the api link

when it is a http://127.0.0.1:8000/submitResident

works like a charm

please do not hardcode the url

not my plan

just trying to show u the difference

one sec for when i use the railway backend service variable

lets see the backend logs

these are local logs

those are backend logs

nope, those are you local backend logs

last I checked railway does not show you a windows terminal

i guess i am not understanding why you want to see the railway logs when we can see the issue locally not working

my angular app when i was using railway run start when i submitted a form, i could see the logs and then check on railway and see the data stored in my database
what i am trying to explain here is that my react ap with the railay api i cannot see the logs of my create function

because your frontend is making an api call to the backend that's running on railway, therefore the backend on railway would have the logs

okay. i thought it would show that locally

one sec let me grab them

ah i see what u mean. my logs are there, so it IS working as i expected

1210776410122231838

yes, you're probably just incorrectly setting the backend environment variable locally

how come you say that? because i should see those cosole logs in my local termina?

because your locally running frontend should not be making a call to the backend running on railway

therefore you have the variable set wrong

oh yeah thats def how i set it up

what should my lcoal front end be making a call to then?

in this screenshot you have a .env file in your frontend, you should not have a .env file in your frontend, it should be a .env.local file like we have talked about

unless you are doing some specific testing, the locally running frontend should be making a call to the locally running backend

gotcha. i adjusted now

do i do the same for .env.production now? and then put the railway url there

in this case, production stuff stays in the railway service

you should really only have one type of .env file in your frontend and that would be the .env.local file

you know how in angular i could run production mode locally

is this not possible in react?

this is what i am trying to achieve

in my angular app i was using the railway domain locally for my api. i was trying to replicate this in my react app

railway run npm run dev

same thing you do for the backend

and still npm run start for the frontend or npm run build?

no need to run a build locally, since you run a dev server for the frontend locally

right on. the lightbulb in my head finally went on
i think what i was struggling with was not seeing my logs but when u said check railway and i saw them it helped clear a lot of confusion for me
thanks soo much brody. always make things super clear and i leave w a better understanding. appreciate your time!!

happy to help!

You're welcome

Hi @Brody! Is this chat still open?

we are at 445 messages, would you mind opening a new thread?

sure thing!

https://discord.com/channels/713503345364697088/1222693316106387566

Hi @Brody

I don't have a Railway related question. My question is for NodeJs. Do you know a Discord community I can go to join and ask by chance? The only one I saw/tried to join didn't allow me to post questions

I dont sorry, is it not something you could google for?

Shoot okay thanks. I thought I'd try to ask ya to see.
I've been trying but not having too much luck

I'll keep looking!

well you got me curious, whats the question?

haha you sure?

yeah I'm just curious, it's unlikely that I'd be able to answer

I am attempting to implement a Google authorization on my React Native App. I've read a lot and watched a lot of videos, but this one made the most sense to me, so I attempted this method (https://www.youtube.com/watch?v=Qt3KJZ2kQk0)

I am at 21 minutes in the video. For Tom in his video, when he clicked on the button to trigger his api call, the Google dialog box appeared. For me, this doesn't happen. So that's where I am stuck

I do not get any errors, and I do see the same console logs at this point in the video. The only difference is the Google dialog box doesn't pop up for me. S'close!

ah okay my curiosity is satisfied, and I indeed don't have an answer for that

hahahaha

i understand

want an update if i figure it out?

yes!

https://tenor.com/view/spongebob-many-months-later-three-weeks-later-waiting-so-much-later-gif-16351997

i figured it out🥹

but on react native web so works in a web browser
now i have to do it for android and ios. it is a processs

glad to hear that!!

Can you check your DM? 😁

Sorry Brody/Chioma I was wondering if you could help me out with deploying a react native web project on railway! Thanks so much!!

Can you please open your own thread and describe the issues you are having?

Hi Brody! Still active here?

He can be! @Brody

👋