RAILWAY DEPLOYMENT - AutoDeploy and any deployment isn't happening
Hi! I pushed my changes to my Github and usually Railway autodeploys. This time it did not, and I tried to do so manually, and this is also not working. It only deploys the last commit instead of my latest committ. Can someone assist please?
359 Replies
Project ID:
N/A8fc2ded2-11c3-4036-a22b-7b24c3e630b0
Please send a screenshot of your Railway service's connected repo + auto deploy branch
Hi Adam! Okay it is an angular app so i have a frontend service and backend service...which one would you like to see?
Whichever one's failing to deploy
it is not so much failing is that it's not deploying my latest committ. the deployment it currently ran was a commit from awhile ago
Please send a screenshot of your service's source repo and branch like the screenshot below
Which branch are you deploying to?
If the answer is main/master, try removing the source repo and readding it
they don't have a branch connected in their screenshot
when i disconnect and reconnect the deploy fails
logs please
screenshot of your repo please
GitHub
AngularApp/backend at main · ChiomaGrace/AngularApp
Contribute to ChiomaGrace/AngularApp development by creating an account on GitHub.
delete the node_modules folder
deleted it and failed again
you still have the node_modules folder
delete in front and back end?
yes
you never want that folder in your repo
got it
i remember that and thought i removed it but clearly not
make sure it's in your .gitignore
it is working now but it is still an old committ and it isnt my latest commit
push another commit
like just change something to push a commit?
yeah
same situation
not doing it
what makes you think it's not your latest commit?
i deployed this app first to avoid headaches so all i had to do when i was finished was commit and push so it orginially looked like this
ive built a crud app now and locally it looks like this
send the link?
you also have the dist folder in your repo, another folder you never want in there, sorry I didn't notice that sooner
add the contents of this https://www.toptal.com/developers/gitignore/api/node,angular as a
.gitignore file in your frontendGitHub
AngularApp/.gitignore at main · ChiomaGrace/AngularApp
Contribute to ChiomaGrace/AngularApp development by creating an account on GitHub.
or are u saying it needs to be in the frontend folder?
add the one I gave you to the frontend
the contents are identical
but my question for u
is are u saying put it IN the frontend folder?
right now my gitignore is outside both the backend and front end folder
so just want to confirm
contents aren't identical but please put the .gitignore I gave you in the frontend, your current .gitignore is fine where it us
added!
still some issue though:/
gotta delete that dist folder though
ah thank goodness. now it's up. thank u. i thought the gitignore took care of the dist and node modules but it didnt
it only prevents them from coming back
my data isnt showing though..does the service need a restart?
where are you storing your data?
is your backend connecting to the correct database when on railway?
yes!
I have no ideas what could be going on then
yeah i think something funky i'll peep at it
cause i opened the console and saw this error
just a little code issue
yeah i have no idea what though haha. i'll look at it tomorrow. thanks again for the help!! if u think of any ideas of where i should look for that error please feel free to tell me. id take any hints ! ha
looks like you are calling the front-end when you should be calling the backend
hmm not sure if that's it cause the url has both in it when fully opened
im reading stackoverflow and some people say it might be cors but still digging
just atrange cause all api calls work locally
That url looks really funky... Why is it your frontend and backend URLs stapled together?
all the code for the http calls in your shared.service.ts file look fine with correct usage of the environment variable, so that leaves me to believe the service variable you set was incorrect, so please show us what you have for that
as in where i have
NG_APP_BACKEND_URL declared?you would have that declared on the frontend service in railway, what do you have it set to?
i realize i didn't set it to anything. do u think that's the issue? when i searched it, it only appeared in the http calls i defined in my shared.service.ts
when looking at a different project i did i declared it like this:
should i replicate that?
do you not have it declared on the railway frontend service?
oh! yeah i do there
what is it set to?
angular-app-backend-production.up.railway.app
show the raw editor instead please
set it to
https://${{Angular App Backend.RAILWAY_PUBLIC_DOMAIN}}howd you know to do that!?
i do have another error (unrelated), but what you just sent me fixed the previous error
I'm been using railway a very long time, it's also not the first time we have done this exact thing
also, please take your mongo url out of the frontend's .env.local file, that is only to be used for non sensitive information
so u have to manually change the raw editor? i don't remember doing that last time. what i sent in the first screenshot of the raw editor is what was there when i created the variable, so i need to always manually change it to what u sent in the future?
I mean you wouldn't have to change anything if you entered the correct reference variable the first time 😅
but yes that what you will need for all backend url variables in this context, of course replace the service name with the applicable service name in the future
but i dont get how i entered it incorrectly i guess cause i clicked generate domain initally
here are the notes i took/was following
it's wrong for two reasons
1. it's not a url, since it's missing the
https:// part
2. it's not a reference variable, the variable I gave you is
okay so on my step 5 if i put http: angular-app-backend-production.up.railway.app
then it would've been fine?
it would have worked, yes.
though that's called a hardcoded variable, we don't want that, we want to use a reference variable.
consider this scenario for a hardcoded url like what you just suggested:
you change the domain on the backend, maybe you just want to change the railway provided domain or you want to add a domain you bought, but you have hardcoded that variable on the frontend service and have forgotten to update it manually so it is no longer correct and if the domain is incorrect your app fails to call the backend, this is not ideal.
now here's the scenario where you use a variable reference like I gave you:
you change the domain on the backend again for whatever reason, that reference variable is automatically updated when you deploy the frontend, no intervention needed since it will always reference the backend's domain, just makes things so much easier.
okay i think i understand so in the future i declare the variable
and then select one of these options here:
is that correct?
and not hardcode it
nope
please see the variable I gave you
you need to specify the backend service name as it's shown in your project canvas
yeah but i dont understand where this came from at all. this was not an option when i clicked generate domain
it may reference the domain, but it doesn't really have anything to do with generating a domain, it's something you need to set at your discretion
so this should be changed too then huh? syntax wise..my frontend url?
yes, remember everything I've just said and give it a shot!
on it
you're missing
https://
otherwise, the reference syntax itself is correctshoot! adjusted and fixed my notes so i def got it down
AND that fixed the other error. i can see my data now!
that actually helped me learn alot...that mistake
thanks for walking me through thar
happy to help!
also i think i did this because it was the only way it was saving to my database on railway, locally
it's not, you want to use
railway run but even so it doesn't belong in your frontend, since the frontend doesn't connect to mongoyoure right! idk why i did it then
okay everything is good to go! thanks for the help
gunna start learning react tomorrow and try to do aproject on there
have a good night brody! thanks again:)
no problem! 🙂
Hi @Brody ! Are you still on this thread?
im here
Lovely! I was using your starter pack as a guide(https://github.com/brody192/create-react-app-starter) to push my react app on railway
I (think) I have setup my Railway as needed, so I connected my Repo to my two service variables. This potentially might be a question for Discord Github, but when I push my changes to Github, it does not commit my frontend or backend folder. It only committed the react skeleton if that makes sense. Is this normal?
GitHub
GitHub - brody192/create-react-app-starter
Contribute to brody192/create-react-app-starter development by creating an account on GitHub.
GitHub
GitHub - ChiomaGrace/ReactApp
Contribute to ChiomaGrace/ReactApp development by creating an account on GitHub.
1. your repo is not a clone of mine, it's just the bare standard app
2. it's not a monorepo like your angular apps are, the repo only contains the front-end
1. yes i did not clone it. as i mentioned i was using yours as a guide/referencing it
2. yes but my structure in vs code does not only contain the front-end. however it only pushed the front end to Github. This is what I found strange
1. you'd need the Caddyfile and nixpacks.toml from my repo
2. that repo only contains the front-end, therefore pushing to it would only deploy the front-end, perfectly normal
this is what is in my code
i have what youre saying! i am just confused why it isnt pushing to Github
empty commit message
that was an old error
ive deleted the remote and redone my first commit and it continues to only do the front end
this repo is only your front-end
correct haha thats my question
it's not pushing my backend folder
this is my code setup
it's not pushing the backend folder because that's not part of the front-ends repo
your backend and frontend are in separate repos
ohh really?
that's how you set it up for a railway deployment for react? two repos?
you can do it either way, but that's how you have done it
not intentionally
i set up my code like i did in vs
then pushed to github
and it keeps only showing my frontend
so how do i include backend with the same repo
create a new repo, copy the two folders into the repo
sorry dumb question..but youre saying in github right?
not recreate my project in vs code?
correct in github
this time i am doing by the command line instead of in vs code
i got this error
just use github desktop
never used that before. hopefully i did it right
got this now in github
GitHub
GitHub - ChiomaGrace/ReactApp
Contribute to ChiomaGrace/ReactApp development by creating an account on GitHub.
backend service variable deployed
frontend service variable failed
you have the frontend folder linked to something else, and the nixpacks.toml and caddyfile are in the wrong folder but thats the least of your concerns
linked to something else?
yeah, i dont know how it works either, but i know that it shouldnt be like that
okay i will delete and try again
the desktop github you told me to download im not really understanding how to use
github desktop, its far easier than git cli
i am so confused haha
it just keeps making source repos
that i now cant delete
i really think i setup my railway correctly so the minute i am able to just upload my code to github i think it'll work
wasnt expecting this step to be so problematic
you are definitely gonna confuse yourself if you try to do source control in vscode.
create a new repo, copy your frontend and backend folders into it, push it
no i didnt
i used the app like u said
the screenshot you just sent was you trying to use git in vscode
nope
just showing u what has now occured
and i cant remove it
dont do git in vscode please
create a new repo with github desktop, click the show in explorer button, copy your frontend and backend folders into it, commit the changes.
i dont know what that is
github desktop
not what mine looks like, but close enough
so what am i clicking there
plus button
then this correct?
its not going to be just the react app, so give it an applicable name
it is cause it's just a practice one for me
so create repository yeah?
its not going to be just the react app, so give it an applicable name
can i not change it later/
its simplest if you name it correctly now
im fine w the name. so is it cool if we continue? or u really want me to change it that bad
go for it, im only saying whats best
i get ya
this happens
follow the steps please
create a new repo with github desktop - done!
click the show in explorer button
copy your frontend and backend folders into it
commit the changes.
it doesnt show any of the react files in my frontend
but when i click frotend it takes me to that folder containing everything in vs code
not really sure what to tell you here, you just need to copy the frontend and backend folders into the folder github desktop makes, it's just drag and drop at that point
i did
then commit and publish
it wont let me
why not
because there is nothing in the frontend as i showed
make sure the frontend folder contains the frontend files please
it's not
github desktop seems to think otherwise
it doesnt when i click on it
Hi Brody,
I finally got Github Desktop to work. Sorry about that. My frontend service variable deployed on railway, but here is the error with my backend service. Would you mind terribly taking a look please?
ah shoot got it. didn't hit save in that file
all good now thank you !!
no problem!
Hi again @Brody ! This chat still open?
What problem are you having? I do not work for Railway. But let's see if we can help you, Chioma.
Okay, thanks!
I am having a problem getting my railway backend service variable to work in a react app. Everytime I try to submit my post request, I get a 503 Service Unavailable Error.
Here is my component with my form and .env file:
Here is my error:
Can you assist please?
Yes
Seems you are offline as well
Let us meet here in exactly an hour. I believe we both should be available by then.
Went back to work after waiting for your reply.
But I will be available to work it through with you in an hour.
Later then
looks like we are all online now
Not fully
line 19 of that jsx file, the fetch call should use the format
process.env.REACT_APP_BACKEND_URL + /path
your .env file should be a .env.local file instead
line #2 of your .env.local file should be REACT_APP_BACKEND_URL=http://127.0.0.1:<the port the backend runs on>
as for the railway side of things, you have some misconfigurations there too, but let's get this working locally firstI am now available
did I miss anything?
No. You're in order.
I see her problem is more of React than hosting
That was why I offered to help
indeed, there will be some misconfigurations on the railway side of things most likely too
Apparently
At least with your help in familiarizing me with the system, I would say I have some little Railway cloud knowledge
Thanks again
happy to help where I can!
hi guys
so sorry for the delay
thank you for looking at my screenshots and trouble shooting
i have made the suggested changes, but i am still getting the same error
you haven't saved the .env.local file by the looks of it
ah i see what u mean cause the variable didnt change in the html. saved it now but still the same error
somewhere in code you're not using that backend url environment variable to make an api call
the variable name is also incorrect, please carefully read what changes I've asked you to make
yup naming syntax was off. it is working now locally
awesome, now let's see what service variables you have on the frontend service in railway
i am assuming i need to change this to just BACKEND_URL..is this correct?
yeah that's for angular, you need to have the applicable environment variable set in the service variables
adjsuted!
that's not the same variable you use in code
it is not. apologies
what is the raw value of that variable
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.
StackHawk
React CORS Guide: What It Is and How to Enable It
A brief guide on what CORS is and how it works. See it in action and learn how to enable CORS in a React application.
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
GitHub
GitHub - ChiomaGrace/ReactApp
Contribute to ChiomaGrace/ReactApp development by creating an account on GitHub.
you keep commiting your node_modules folder
i have them in two gitignores!!
so idk why thats happening
GitHub
ReactApp/.gitignore at main · ChiomaGrace/ReactApp
Contribute to ChiomaGrace/ReactApp development by creating an account on GitHub.
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
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? @Brody @maxralph01
yes you do need the nixpacks.toml and Caddyfile that ive previously linked
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
React App
Web site created using create-react-app
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
Cand Dev
YouTube
Deploy React & Node Express App Online in Minutes with Railway (No ...
In this video, you will learn how to easily deploy a React web application and a Node.js/Express server online using Railway.
Build AI Image Generator With OpenAI, ReactJs and Tailwindcss
- https://youtu.be/Yh2gz1sz-b8
👨💻Code:
Frontend - https://github.com/candraKriswinarto/genieart
backend - https://github.com/candraKriswinarto/genieart-api...
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/
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.
React App
Web site created using create-react-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 waysOK. Please, do so, @Chioma .
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?
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
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 backendand 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!
TomDoesTech
YouTube
Google OAuth 2.0 With NodeJS (No Passport or googleapis)
Repository: https://github.com/TomDoesTech/Google-OAuth-NodeJS
📚 Concepts & technologies covered
- OAuth 2
- JWT
- Authentication & authorization
- TypeScript
- Node.js
- Google OAuth 2.0
🌎 Follow me here:
Discord: https://discord.gg/4ae2Esm6P7
Twitter: https://twitter.com/tomdoes_tech
Facebook: https://www.facebook.com/tomdoestech
Instagram:...
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!
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
👋