Deploying Django Back End & React Front End
Hello
I'm having trouble finding information about deploying Django REST backend and React front end on Railway.
Could someone shed some light on this for me?
Thank you
203 Replies
Project ID:
N/AN/A
they would need to be deployed as separate railway services, one service for the frontend, one service for the backend.
how is your project structured right now? a lot of developers try to have their backend serve the frontend but that's just not the right way to go about it when hosting on railway and leads to a lot of difficulties when trying to do it that way
Thank you for the quick answer Brody. Yes i was thinking about doing that so i wouldn't have to deploy and manage them separately, but i know that it can cause slower loading times or cors problems. I know there's a way to do it with Heroku for DJANGO REST and Netlify for React but as i already have my db and one other project hosted on railway, i would like to host everything on railway
that's a perfectly valid reason, lots of people host their frontends on railway and when done right it works pretty nicely.
think you could share your repo? so I can get an understanding of your projects structure in order to best help you!
Yes for sure, i send you a DM
I saw the link to the repo but we shall continue the conversation here
Ok
and it looks like you have your project structured in such a way that it will make it very easy to deploy to railway with some very minor tweaks!
Nice !
you are just missing a few things, like .gitignore files for the front and backend, a requirements.txt for the backend.
and then you want to delete the things that would normally get ignored, like the pycache folders
you can use this site to create your .gitignore files https://www.toptal.com/developers/gitignore/
so let me know when that's all done!
Ok
Will i also need the procfile and the runtime ?
a Procfile is a heroku thing, and while it is semi supported on railway, there are better alternatives that are railway specific, we will get to that soon enough though.
runtime.txt is only needed if you want railway to use a different than default python version, the default currently being 3.8
Alright !
I have node_modules in my react gitignore, i did my requirements.txt for django rest but i actually don't know what to include in the gitignore of my backend, settings.py ?
oh no you definitely don't want to ignore settings.py
just type in stuff like python and django into that site I gave you and use the .gitignore it creates for you
oh ok i just copy/paste
yep
ok all good
juste have to commit
What's next ?
did you commit the changes?
yep
mind specifying all technologies involved when using the site I linked, for example
node, react for the frontend and python, django for the backendIt seems to me that the relative to Python is already written in the gitignore of django and react only the node_modules count, no?
while I don't see a build folder in your frontend, you want to have it ignored anyway
and make sure you are deleting stuff like the backends pycache folders
Ok done. Should i add my package-lock.json for react ?
nope you want that in the repo so that railway can install the deps from the lock file
ok, do i run npm build and commit the build ?
nope, we don't want to ever commit the build folder, that's why I've asked you to gitignore the build folder
oh yes sorry
lines 80 to 89 of your settings.py
please use environment variables for those credentials
like how it's done here https://github.com/railwayapp-starters/django/blob/main/mysite%2Fsettings.py#L81-L90
ok
Done, i also changed the secret key
please use the same name for your database variables as shown by my example
the engine doesn't need to be an environment variable
ok, i just have one diff with the name of your exemple, i don't have the psycopg2 part
use the same engine the example uses
ok done
please use the same names for your database environment variables as shown by my example
DONE
sorry
done*
add this railway.json file to your backend
done
what does your railway project currently look like? screen shot?
cool, go ahead and add a new database
The DB is hosted on another project
wait i send you a screen
you want it to be in the same project
okay then delete this project
this will be the project we use going forward
Done
add a new empty service to your project (going to be doing a few railway steps now, please send a screenshot after each step)
to that empty service, set up your database variables, please use referance variables.
make sure the variable names are the same you have used in your settings.py file
https://docs.railway.app/guides/variables#service-variables
https://docs.railway.app/guides/variables#referencing-another-services-variable
Alright, now i understand why you asked me to use the exact same names as in your example. Do i also add the secret key ?
yes!
now if done right you should be able to show me the raw values for all the database variables without leaking anything
what do you mean without leaking anything ?
you want me to send you the raw values in dm ?
you should be able to send them here
did you use reference variables?
yes
the input box will show you the variables that you can reference https://docs.railway.app/guides/variables#autocomplete-dropdown
okay then send a screenshot of the raw editor window please
This is how i added the variables
looks good to me, then you should be able to show me the raw editor without leaking your database credentials
PGDATABASE=${{Postgres.PGDATABASE}}
PGHOST=${{Postgres.PGHOST}}
PGPASSWORD=${{Postgres.PGPASSWORD}}
PGPORT=${{Postgres.PGPORT}}
PGUSER=${{Postgres.PGUSER}}
Damn seems that there is a problem with the secret key
i mean i didnt need to see the key
whats wrong with the key though?
Ah no i thought it was supposed to be displayed the same way as the db
ah nope, thats just a regular string
ok good
quick can you send your domain so i dont have to write it out myself
damn i forgot the domain
no no dont jump to stuff please
theres an order to this
just send the domain so i dont have to write it out
musiquizapp
thats not your domain?
wait
No that's the domain of another project
thats a portfolio site, why does that same project have the database you are using for the music quiz app?
That was a mistake
is there data in the database?
Yes
Otherwise i would have deleted it
okay then its easier to move the portfolio site to a different project
and would have used the other project
can we do that now to get it out of the way?
oh ok
yes please
whats the tech stack for the portfolio site?
django js
so python js html css
okay, go into that service and remove the custom domain
then delete the entire service
then create a new project, with an applicable name "My Portfolio"
and an empty service within that project, name it as well
then add your custom domain to it, setting up the cname as needed
then deploy your code to it
Ok, can we just do that later ? Because i'll have to connect to cloudflare, i don't remember exactly what i did to set up the proxy so it's maybe going to take a while
the proxy for the custom domain name
and use the empty service i created with the variables
sure we can do that later, for now we will ignore the portfolio service
ok cool
did you have a custom domain for this new app? or where you just going to use the railway provided domain for now?
no because i have to see with my client for the custom domain so i was just going to use the railway domain
gotcha
okay go and generate a domain, this will be the backend's domain so name the subdomain applicably
musiquizdata.up.railway.app
what do you have in mind for the frontend railway domain?
musiquizapp.fr for the custom domain name
else musiquizapp.up.railway.app
thats a custom domain? you said you didnt have one yet
ah gotcha
okay the service now has that domain?
yep
did you commmit the railway.json to the repo?
now yes haha
okay in the service settings, set the root directory to
/Back-Enddone
add the repo to the service
ok just one thing tho. In media, i wasn't able to download all the audio files that are needed for the game. For now they are on the media file on my computer. Will we be able to bundle them with all the other files for the deployment ?
how much audio do you have size wise?
569 Mo
is this dmca free audio or do you have the rights to it?
Don't think they are dmca free, these are all old songs from french singers
doesnt sound like something you should be uploading to github then, especially when the repo is being deployed to railway.
look into a cdn you can upload the media to, but thats slightly out of the scope of this thread
what if i use the cli in vs code to deploy the project ? The files are in the folder. That's what i did for my portfolio but only had images
railway does not want you uploading/playing/using music you dont have the rights to, thats why music bots are a big no no and often get people banned
id strongly recommend you host the music elsewhere on a cdn, just dont want you getting banned
thats also far more data than you can railway up to the service (max 40 or 50mb i forget the exact number)
Ok so like if i host the samples on soundcloud for example, then i'll just have to modify their address on the db and it'll be good to go
sounds about right, dont know if soundcloud would like that, but as long as its not on railway im good with it
Ok i'm in the phone with my client to see how we're going to do it
sounds good, but in the mean time, would your backend fail to deploy without those audio files?
Sorry i just finished the call
Yes i think so
okay are you gonna update your code and then after that continue with the railway deployment?
He said that he will download the songs on soundcloud but doesn't know when. So i think i'll wait until he's done it to continue. I'll send you a DM, is it ok for you ?
we can continue this thread when you are ready
you can ping me here
Alright cool thank you brody
no problem!
Hey Brody, the music is hosted on a CDN, we can continue if that's ok for you !
haha sure, but unfortunately im not available right now due to some irl stuff
Sure nothing's urgent, just ping me when you're ready !
Hello Brody, are you free now ?
I am now
where did we leave off
hey @Dadz did you still need help with this?
Hey Brody, yes i do, don't know why i didn't receive the notification of your answer
no worries
lets pick up where we left off
did you share your github repo with me?
Yes i did
I tried to deploy, i was missing pillow and python-dotenv in requirements.txt, i'm currently trying to deploy again
But it's taking way too long something's wrong
haha okay let's slow down a bit
let me get caught up before we try things again
can I have a screenshot of your railway project canvas
haha every screenshot but none of them are the project canvas
Back End is deployed and seems to be working
https://musiquizapp.up.railway.app/api/
going forward these cropped screenshots are not the best, can you please send full screenshots of the browsers viewport, I can always zoom in if I need to
for all I know you could very well have a 3rd service off the to the left of those two
Ok i didn't think the other services would matter as they don't link to MusiQuiz. Here you have the full screen
every little bit of information matters
We discussed about the fact that i had the database for MusiQuiz set up in my portfolio project (a mistake) and decided to keep it that way because the db had data so it would have been better to move the portfolio but as i have a private domain name with cloudflare as a proxy it would take too much time to remove the custom domain
okay so would you be interested in adding me to both of your railway projects (for the portfolio and music quiz) and your github repo for music quiz? that way i can make all the changes needed without the back and forth
The thing is i would like to understand the changes so that i'll be able to deploy this type of configuration by myself in the future
fair enough
then we shall walk through it
Sorry for the late response
so what was the situation with the database again?, does both your portfolio and musicquiz app have data on that same database?
No only MusiQuiz
can we remove the music quiz service from the project then? and start fresh in a new project
Yes sure
Without moving the database then ?
well you said the database is only used by the portfolio, so you dont need to touch it and it can stay in that project
No when you asked me i said that only MusiQuiz has data in that database
oops, my bad
haha no worries
so we can move the portfolio to another project, since its easier to move an app service than it is to move a database
Yes that is what you told me last time we talked but remember i asked you if this was necessary as moving the portfolio project would require to remove the custom domain and i didn't remember what i did exactly to set up the proxy so it would maybe take a while. You told me then let's ignore the portfolio service
you wouldnt actually need to do any dns setup given the fact that you have already done the dns setup once
just remove the domain from old service and then add it to the new service, and it will work instantly with zero dns setup, at least it always has for me
Ok that's done but i get Internal Server Error for the first version of the portfolio
The V2 with the custom domain is working fine
check its logs?
I forgot the Secret Key in the variables
It's all good now
okay now you can remove the domain from the old service and then add it to the new service, ignore any dns setup as it is not needed
Yes it's done
okay now you can remove those two old services and rename the project
Just had to change the CNAME on cloudflare
Done also
you didnt
What ?
ignore any dns setup as it is not needed it will work instantly with zero dns setup
Railway asked me to copy a variable and to add it as a cname
I had to do that also when i changed from V1 to V2
And it's working fine
yes, but it wasn’t strictly needed, no harm either way though
Ah ok
i was just trying to simplify the process for you by telling you it wasnt needed
Ok thanks
can i have a screenshot of the project now?
perfect
rename that service to
MusiQuiz - Frontend since it will be the frontend service
and then add a new empty service that is named MusiQuiz - Backend you get the point 😉This is the back end
But yes i get the point haha
the domain name would suggest otherwise
frontend domain ->
musiquizapp.up.railway.app
backend domain -> api-musiquizapp.up.railway.app
at least until you add your custom domainsOk
let me know when you have that done!
I'm solving a lot of issues since my last message haha, serving of static files for django rest, fetching the right api, chunks of code i forgot to push on my git hub repo, and now i'm struggling on Django Admin Panel CSRF token validation
okay no worries, let me know when you are ready to proceed, just make sure you arent trying to get django to serve the frontend
The app is up and running !
Thanks for your help Brody
you have your frontend and backend running as seprate services?
Yes
what have you done to not run your frontend as a dev server?
i didn't do anything
then you are likely running a development server for your frontend
thats going to cause random issues and cost a lot when running on railway
Oh yes i just saw the metrics
😂
Then i guess we're not done yet
https://github.com/brody192/vite-react-template
Copy the nixpacks.toml and Caddyfile from this repo into your frontend folder.
If you have any build or start commands set in the frontend's service settings, please remove them.
done
and let me know if there any issues with the new deployment
full build logs please https://bookmarklets.up.railway.app/log-downloader/
can you link your repo again?
why do you now have two seprate repos?
Because i was confused so i separated the back and front in two separate repos
But now that i understand how it works i could merge them
Does this have anything to do with the deployment problem?
oh i see what i did wrong
i linked you the wrong repo
https://github.com/brody192/create-react-app-starter
use the nixpacks.toml and Caddyfile from this repo instead
Yes it's working but it still taking the same memory space
show me the source settings you have on your frontend service please
What do you mean the source settings ?
the package-json ?
in your railway service
That's all i have in the source settings
i dont even know how thats working
set the root directory to
/Front-End/musiquizapp/Yep memory is low now
do you know why ?
wrong directory
Ok, we're all set ?
i think so haha
Ok perfect thank you again Brody
happy to help