Need help deploying MERN App. Possibly a monorepo thing
Hello! I am in need of deployment with Railway, when I deploy, it goes to my backend. but I cannot get it to sync to the frontend. like show the frontend instead of the backend. I'm guessing it has to do with the [https://docs.railway.app/deploy/monorepo] (monorepo) thing, but I am still confused. Any help I can use, I will appreciate it.
184 Replies
Project ID:
2a1d0763-51d3-4df6-bb40-5297cd54f90f2a1d0763-51d3-4df6-bb40-5297cd54f90f
is the project id i think
can you share a link to your repo please?
GitHub
GitHub - talmax1124/sweetsbykarla
Contribute to talmax1124/sweetsbykarla development by creating an account on GitHub.
before we try to deploy the frontend, please follow this guide
https://help.railway.app/project-help/f9v3gkPQRy4UShk5SnoPDH/getting-your-create-react-app-running-on-railway/qHRsgxa5n57xLp1yVgk9fP
Where should I put this? In which Package.Json?
that guide pertains to the frontend
so in the package.json in the frontend
My current /frontend start script includes: "start": "PORT=4706 && react-scripts start",
I can see
so, should I just add what the guide says to that?
or maybe add a new one for just that?
like railway-start
no, please follow the guide, there's no need to over complicate this
for port I just leave it as is, correct?
yes follow the guide please
Ok. Trying railway up now
slow your roll
you are deploying from github, I don't know why you would use railway up
you need to set your root directory to
/frontend
in the service settingsWell, because I haven't added the repo yet to the service. I like seeing the process
instead of going to the actual website and waiting for it to load
Ok, still the same thing
https://sweetsbykarla-production-ad32.up.railway.app
^
I did
are you sure?
Sure
delete the procfile at the root dir
remove the build and start commands you have set
Sweets By Karla
Find the best products for the cheapest prices
blank screen
that would be an issue with your code, it does show for a split second
It's my error. Yes it is.
my ENV
I'm thinking
thanks
and similarly for your backend, you need to add another blank service to the same project, set the root directory appropriately and then add that repo to it
and of course add any service variables you may need
wdym?
So, its indeed a monorepo correct?
backend folder is missing package.json and the lock file, so you'll want to add those to the backend folder
yes it is
but its not using any packages. Sorry, I get confused on stupid stuff. So, do I need all of the packages from the root? Is that what I need and put it there?
your backend is most certainly using packages lol
Oh. I guess its why it doesn't make the website appear after the one second
I assume the package.json and pack-lock.json that are currently in the root directory are for the backend, just move them to the correct folder (the backend folder)
webpack config too
you also have an index.html in the root directory???
No, the index.html is not being used for anything in the root
if it's not used for anything then you can delete it lol
Yeah.
anything you need clarification on?
So, basically, everything here move it to the backend
yes, basically
though the railway.toml file is empty too, so you can delete that
so this
I just released that the .gitignore file is used by both backend and frontend, so keep that in the root
yes, move gitignore to root tho
Ok
so since now that I moved that to the backend. Do I need to change things in the package.json in both?
and you should not be setting any build or starts commands in your service settings, the build and start commands should be defined in your package.json scripts
no, you are done with the frontend, it deployed just fine, you just have a small code issue, don't touch frontend folder or it's contents right now
but the scripts in package.json that is now in the backend when I do npm run dev, runs the scripts to run both frontend and backend
so how is it going to work
I'm just confused. Sorry
change the start script to only start the backend
?
the backend start script should just be
node server.jsOk. so when I am in development, should I create a package.json in the root?
no?
just start the two apps yourself lol
you really like to over complicate things don't you
I've never done a monorepo thing, so this is all new to me
fair enough
like, when railway had the Heroku thing, all I had to do was add the environment variables and thats it
and when I use render, its easy too, but the free tier shuts off after 15 minutes.
not like railway thats always up
I'm about to hop into a plane in like 10 minutes, do you think you can do a pull request to my repo and help me?
yeah sure why not
what are you sitting in the lobby on your laptop lol
that's commitment
Yeah, well when you want to finish a project, you do it anytime you have
cool, I'll do the pr a bit later
enjoy your flight
Thanks. Could I have your github user so you can just commit without waiting for the request to be pulled. its about a 2hr 30 flight
brody192
Do you tutor or something? I can use your help in the future
i have never tutored
Oh ok.
Because I am working on like an options thing and I still can't finish it. Need some mentoring or rather guidance on creating / developing it
Invited you
I'll see what I can do, but this is a railway server after all, so it would have to be in DMS, I have also never done react before, so I don't even know how much help I could be
Oh yeah. Forgot.
its fine thanks
no worries, ttyl
yep, on mobile right now, so I won't get to it just yet
ok
are you est?
indeed
ok same
i thought i was going to have more time to txt w/ u
just in case of anything
aren't you getting on a plane?
yes, but after I arrive
Lol
lol I'll be here in 2 hours
I just boarded. but it leaves at like 10:25
Ok.
šš»
Thanks, @Brody . Ttyl hopefully
@Brody Just Landed. I'll check it out. thanks!
I'm guessing that for railway, I'll do the same thing but instead I'll use /backend correct? And since its two folders, any backend request i'll do it how now in the frontend
any request from the frontend will have to be made to to backend domain
and when I'm in local development.
make requests to the locally running backend
ok. when I get home, I'll try everything out. and get to you tmw since its late with any questions i have which hopefully if i figure it out will be none. Thanks for your help!
word of warning I didn't touch any code, but I did remove a bunch of frontend related dependencies you had in your backends package.json, I may have missed some, I may have removed something I shouldn't have, please go through the backends package.json and double check everything you need for only the backend is listed there
thx. I'll check when I get home.
Good Night
night man
Hello, @Brody. I got a question, I am deploying the backend, I just put it as a /backend. But I have this, any idea on how I can get it running?
Do I even need the /backend?
show me a screenshot of your railway project
looks fine I think
and you have a green check mark on the backend service, what seems to be the problem
your backend is trying to serve the frontend, remove that functionality since your frontend is setup with a way to serve itself now
but that does actually mean the backend is online!
But I don't think I have a script to serve the frontend
from the backend
you have some code that is trying to return an html file, remove that functionality
thats gonna be tough. Let me check
Still can't find where its serving that HTML File. in my server.js its not serving a HTML File, only if you go to the URL and the port. š®
Still looking...
Ok, so after looking and looking, there is no way to stop serving the HTML in that port.
It's something that React does already, @Brody
It's getting the backend from that port. Which is using this piece of code:
if (process.env.NODE_ENV === "production") {
app.use(express.static(path.join(__dirname, "/frontend/build")));
app.get("*", (req, res) =>
res.sendFile(path.resolve(__dirname, "frontend", "build", "index.html"))
);
} else {
app.get("/", (req, res) => {
res.send("API is running....");
console.log("API is running....");
});
}remove that code then lol
Still doesn't it to stop serving the HTML. Now it gets https://backend.sweetsbykarla.net
{"message":"Not Found - /","stack":null}
okay that's good
but how does it help that the frontend can't still catch the backend
in prod.
do you have any api routes defined?
yes you do, you have a bunch of api routes
call them like
https://<your backend's domain>/<your api route> from your frontendyou mean in my server.js?
no from your frontend
Ok. So I tried doing that, but with the ${process.env.Backend_URI}. I keep getting undefined. So I'm going to see if I can do if statements
which is prob going to take a while
variables would need to be prefixed with something
wdym by that
i forget, one sec
read this please
https://create-react-app.dev/docs/adding-custom-environment-variables/
I already have env set for both
FRONTEND_URI=http://localhost:2200
Backend_URI=http://localhost:2350
respectfully, if i ask you to read something, it would be in your best interest to read said thing
im not just sending you stuff to read for funnsies
I already saw it
you saw it, but you have not read the page
something like this in the doc is what I do: if (process.env.NODE_ENV !== 'production') {
analytics.disable();
}
not reading the documentation is not a good idea
read this please
https://create-react-app.dev/docs/adding-custom-environment-variables/
REACT_APP_FRONTEND_URI=http://localhost:2200/
REACT_APP_Backend_URI=http://localhost:2350/
I assume is the point
you are getting at correct?
yes! i cant spoon feed you everthing, thats not how you learn š
haha, youll get this
i know you will
Got it
in a console.log. Trying now
web dev hard
It is. But its something I want to do for my career
software dev
and almost everyone starts with web dev
well, and most people need a site
true, web dev good place to start
the cropped screenshot does not give me very much info
When calling the API, it gives me that
I changed all my API's in the frontend
Would you like to hop on a Live Share>
what browser is that
Safari
Visual Studio Code for the Web
Build with Visual Studio Code, anywhere, anytime, entirely in your browser.
safari gives shit error messages
you prob need this
https://expressjs.com/en/resources/middleware/cors.html
Oh, I tried that package once. Didn't work for me
that well
well these errors aren't railway specific so you can totally do your own research here!
Wdym Railway specific. I'm still on local
I haven't deployed the new API Changes to Railway, @Brody .
aren't*
?
^
Oh, sorry
I guess I'm famous at misreading things.
very true
I don't know why this is harder than having things already set up like render or heroku does š¦
Just a lot more setup.
render and heroku do a whole crap ton of hand holding to fix broken code
which is why I guess why they charge a lot
Well, with render, its free, the only thing that is bad is the downtime
but this is the outcome of developing without giving any thought to how a cloud server will run your app, you get a whole lot of head aches
Well, I built this using a course by Brad. Because I'm still pretty much a React newbie. well not that newbie.
railway runs your code as is, and expects you to have done things more of less correctly
Yeah.
But its because they have NixPackas
NixPacks
because before they deprecated the Heroku thing, I set it up easily
I wasn't here for that deprecation thankfully
I still have a project on Railway with Heroku Procfile but if I want to do another project, I have to use nixpacks now
So, adjusting to this is very different
it would have been a bunch of "why doesn't my code work anymore" with the answer being "you have done absolutely nothing correctly and heroku was doing the heavy lifting fixing everything for you"
since I never had to deal with this
True
First time for everything
railway has rudimentary support for Procfiles
I'm just going to do if statements, so that I don't get the Control Access Things
since locally it works well
without using the ENV
incoming hacky code š«¤
tsk tsk tsk
sometimes hacky code works
š¬
just trying to make this thing run and work.
Mostly all, no some my code is hacky and outdated. But it works, obviously, I update here and there, but at least I don't have to worry a lot about re-creating and re-learning the new version of React until I don't need to which yes, is a bad bad idea, but whatevertime to learn next
nextjs?
Most of the things I do, don't really need the dynamic power of a project, like an e-commerce store. So, most of the time, for what my clients need, I use Astro or 11ty.
got any astro apps deployed on railway?
I want to do Next, but I haven't even done a project by myself using React, because all the time I've been improving the same project
No. I use vercel to deploy Astro Apps
I like how they make deployment be easier
lmfao
so why the hell arent you using vercel for your frontend for this project
Because of the same reason, I couldn't figure the f on how to make it work. I tried there. No luck.
damn even vercel couldnt make out what the hell your repo was
The only place I could make it work was Render.
render prob has a team of people who make patches for bad user code
You know of Brad Traversy right?
no
then nevermind
hes prob a nerd
Anyways, this project was from his e-commerce course
just over the years I kept adding on it on my own
an old one
is it even for an irl store
yurr
cool
But his course makes the thing unsecure and all that so, I just been making things better, yk. But still the thing that I can't make work, is this. what you've been helping me on
and now I have a stripe error, ugh.
ive seen a few people who said they followed a course, and their code and repo where pure spaghetti, no offense
Yeah. It's why I keep on trying to improve it.
youll prob want to properly configure cors, you currently have a wildcard
But if I was a good dev, I would be able to make one of my own and make it a good one, but until then, I just have to make a spagetti code into a better one
fair
Let me do these if statements to at least see if I can get something running.
and I'll fix it later in the line
Hey @Brody! Hacky code works. https://sweetsbykarla.net
Sweets By Karla
Find the best products for the cheapest prices
yes hello bakery shop, i would like to place an order for one iphone 13
Lmafo. Now, I just got to recheck my routes, and see that everything works
awsome, happy you got it working
Sure, would you like the frosty that has 256GB or do you want me to still keep getting your money by keeping it plain? LMAO
I'd like to buy the 256gb frosty with cash please