Issue Deploying Django - React app
project id: cf5bc495-571c-4915-b19a-756158afb65f brasserie_frontend project id: 0d63b40b-9ef7-4871-b11f-7d69818a1caa
First things first, i have a django rest framework which i use for api calls , and a frontend app with React. I combined them and now React app is the frontend of the drf. I Have to mention i have a railway file i posted it. and a photo of staifiles_dirs where i mentioned my frontend static . i tried to put whitenoise but it has some problems , i installed it , put it in installed aps, in middleware and i get and error. the log messages are with whitenoise commented. It is very tricky for me with the static files which is which, i have to mention i need to upload some photos in the app, in this setup , the uploading and viewing them is correctly so i guess it is correct for now.
250 Replies
could you share your repo?
delete node_modules and all pycache folders from the repo
then add this https://www.toptal.com/developers/gitignore/api/python,node as a
.gitignore file to your repoi will try in a minute
same thing
i will redeploy manually
haha I know, that wasn't going to fix it, it just was something that needed to be done
ah ok
is it fixable ?:)
maybe, but your repo has disappeared
yeah. i will give it back didnt want to be seen by everyone
do i need whitenoise ?
whats this little arrow
because django recognise it as static file i guess
make it not have an arrow lol
in VS i don't see an arrow
of course not, thats github
mok , i don't know why it has an arrow then
okay but let me know when it doesnt have an arrow anymore
so the arrow its because it is a git submodule or a subdirectory
make it a regular folder
ok
I KINDA DELETED IT FROM MY PROJECT NOW
my frontend
it still has an arrow lol
no. man i deleted it locally
by accident
that's what the recycle bin is for
can i undo it localy ?
oh ok
its done
arrow still exists
man i dont have it locally
of course not
Remove-Item -Path .\frontend -Recurse -Force i used it
now i need to respore it ..
restore it
let me know when you remove the arrow folder from github, I don't know why you are messing around with the local folder
is it any chance i can restore the local folder ?
i didnt delete it manually . the comand deleted it Remove-Item -Path .\frontend -Recurse -Force
yeah now i understand why it couldnt see the file...because the frontend wasnt uploading to github
and the only copy i had is the one i delete dy accident just now
oopsies
i cant even restore it
do you have any knowledge about that ?
if i can restore it ?
probably not if you force deleted it lol
ok ty
let me know when you have it sorted out
yeah .. maybe in a week . i have to do it again
sounds good, I'll be around
Hi can you check my repo why it fails to build ? . I am not done yet with the frontend but i managed to make that folder be ok
i edited deployment id
@Tsh - can you please show me a screenshot of your railway project, just so I can get an idea of what you're working with
you have two apps in your repo, a fontend and a backend, this means you need two railway services, please create another railway service
And what do i have to put in railway.js for each?
once you have your railway project and repo setup properly I don't think you would need a railway.json
so we can just forget about that for now
but one step at a time, so let me know when you have two railway services, one named Frontend and one named Backend
if i have 2 services i will pay for each or its a base price at 5$ ?
no thats only a subscription fee for the entire railway account
ok thank you . i will do that in the morning, i have to make modifications at backend . because backend is looking in frontend folder for the pages
good idea, the backend should not try to serve any frontend files
I saw a tutorial which said it should deploy as any django project
but you have a django app and a frontend app
ik. however. if i want to connect to a database, i saw postgres as a service. Does it have any limit of connections ? on heroku for a base plan i could do only 20
there is, whatever the default is, over 100, but your backend should only keep a few constant connections open to postgres for pooling, you would not need 20 even if 20 was the limit
i thought that number of connections represent the number of ppl accessing it
maybe if you did something really wrong
i did nothing , i just enabled the add-on and connected to my settings file
then you should be fine
this is a django rest api right?
this is , that one on heroku is not
cool
thank you for the replies
no problem!
hi i separated frontend from backend but it fails to build
1 step ahead of me with the repo lol
:))
i got used to it
this is a whole other repo?
i just separted
its the same content from the full one
i know, what was wrong with the frontend and backend folders in a single repo though?
well, you said there're separated apps so i need 2 services and i thought i do a repo for each one
i just want to test it . at least the frontend one
two folders in one repo was preferable
but doesnt matter all that much
ok i have that too
https://github.com/brody192/create-react-app-starter
copy the nixpacks.toml and Caddyfiles from this repo into yours
this has same repo 2 folders
send me a screenshot of your railway project please
ok then i preffer the one with same repo 2 folders. so i put that nixpacks in this one ?
i prefer that one too
?
where is the backend service?
well i started to upload only the frontend
gotcha
do you have the root directory of that service set to
/frontend?yes
do you have those two files copied?
i forgot the caddyfiles , one sec
ok , done
let me know when the most recent build fails
so now i try to upload the one with the 2 folders
oh you dont have that repo attached, yes use that repo for the source
failed after 1:10 minutes
build logs please https://bookmarklets.up.railway.app/log-downloader/
this is a build log for python
what do you have the root directory set to in the service settings
maybe there is something to modify at railway.json ?
root for what ? static ?
the root directory in the service settings, set it to
/frontendyeah mb, i forgot i changed the structure again
is it ok if i specified it like this ?
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ 'C:/Users/toshd/DjangoxReact/brasserieProductie/brasserie/frontend/build', ], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ]
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ 'C:/Users/toshd/DjangoxReact/brasserieProductie/brasserie/frontend/build', ], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ]
you should remove all the frontend stuff from django
is it mandatory for now , will i get an error if i have it like this for now ?
you havent deployed django yet, but you must do that before you deploy django
send me your most recent build logs
i will remove them now
please show me what your service root directory is set to in railway
is set to "/"
set it to
/frontendsorry i did not know what were you reffering .
please set it to /frontend
its redeploying
i was looking in my settings didn't know it must be done in railway
thats not all the logs, please wait until you see all the logs before downloading them
set a service variable
CI = false
a small victory
page not found when i pressed the link
just wait lol
i am just telling you what happend to give you context
thank you man
i would need the admin panel from django, what can i do ?
you need a seprate service for django
but first, have you removed all the frontend stuff from django?
i will continue removing it now. one moment
sounds good
done
create a new service in your railway project and show me a screenshot of your railway project when done
and then i set the root directory to backend ? 🙂
indeed, but still send the screenshot
ofc
your screen shot. i set he CI to false and i ll do the variable
where is the new service?
what are you doing to your frontend service, it was working!
oh sorry i started a new project instead
in your railway project
i got it now
please pay attention to the instructions
you should have a project with two services
there we go
yeah ik , sorry , its 6 am. I skip the sleep very often
it was 6 am too when i deleted the frontend :))
dont skip sleep lol
i just can't. university stuff. is killing from inside
damn
the stress man
real
i think i need another file in backend folder ?
i sent you the logs
add this as a railway.json file to the backend folder
or the first nixpacks was supposed to be in main folder , not just in frontend
ok
you can delete the railway.json in the root of the repo though
i know where you got it from, and they where doing something completely different than what your doing
its active now
awsome
so the admin panel should be at the url/admin now or am i missing something ?
should be
<backend url>/adminit didnt give me a backend url
like i did for frontend
go to the backend's setting and generate one
oh ok
so i must set now the proxy to that url
no proxy needed
for the api calls , i have a proxy
your frontend will just simply make its api calls to your backend domain
you dont need a proxy
ok
nice
i connect it in my settings and then i do the migrations and it should be done right ?
the start command for the backend automatically does migrations
oh ok
do you have any template for database setup related to the variables in the service ?
https://github.com/railwayapp-templates/django/blob/main/mysite/settings.py#L81-L90
this shows you how to connect to postgres in code, it also shows you what service variables you will need
ty. i have to set them localy too right ?
use the railway cli locally, with railway shell
because i have an error in django
install it https://docs.railway.app/develop/cli
ok then
open your backend folder
do you have all the service variables setup on the railway service?
i installed cli with npm command so far
?
if you are reffering to those yes
do i need to setup here something too ?
those where there by default lol, you need to set the variable on your django service that you need for postgres
ok gotcha
and now ?
please reference this
oh, got it , i changed it manualy in settings
please use the proper names as shown in the code
. in my settings.py i change directly with the values or i leave it as it is in your example ?
please reference this
ok now i have it like that
show me please
+
looks fine i think
while your shell is open to the backend folder:
run
railway login
run railway link link to your backend service
run railway shell
run whatever command you normally do to start djangocan i run it with venv activated or not ?
yes you can
raise ImproperlyConfigured("Error loading psycopg2 or psycopg module")
django.core.exceptions.ImproperlyConfigured: Error loading psycopg2 or psycopg module ... i installed psycopg2 in the venv and i put it in requirements.txt and still got this
i did
that error wouldnt be related to railway so please do some research on how you can fix the error
ok
those 2 must be one after other ? run railway shell
run whatever command you normally do to start django . after i entered railway shell it deactivated my venv
okay gotcha, then just use
railway run <whatever command you normally do to start django> inside your venvi have to do all the linking again ?
no
railway run manage.py runserver
[19656:1106/074032.003:ERROR:display_layout.cc(551)] PlacementList must be sorted by first 8 bits of display_id
i usually run "python manage.py runserver"
i tried all the combinations
railway run python manage.py runserveri used it and got that psycopg2 not found error. but i have it installed
you should not be in the railway shell anymore, it may be best for you to close the terminal and open another one, activate the venv and then only using this command
i was not in shell
ok
same thing
then there's an issue with your setup or code that doesn't relate to railway
ok , i set a new venv . and it works . so for any old command now i have to use railway run ? or for ""makemigrations" & "migrate" is as it is ?
i understand that it needs railway run for running the server because it needs those variables
sure you can run migrations locally
just use
railway run <your desired command>ok thank you
you are awesome
you are too
thank you for your time and especially, for your patience
no problem 🙂
Can i increase the number of connections to the db? lets say i have a traffic of more than 100 at the same time
tweak the pool settings
any intel of this ? i set them
have you read the information on that page, and also read the docs it's linking to?
i did
okay then please implement the suggestions that page gave you, or further research about this error in djangos docs
i solved it
heil 
for real
my react app can t do the fetches 😦
why not
i still have the proxy on tho, without it ,locally i get errors
you don't need a proxy
ok i will remove it and then i will debug it
for local development, you run both the frontend and backend locally, then your local frontend makes requests to your locally running backend
oh , locally is fine . mb
then on railway your frontend makes requests to the backend on railway
perhaps you are getting cors errors?
i ll push the code without proxy and then i ll give an update
Uncaught (in promise) SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON that was the message
what's the status code
i ll tell you after redeployment if the issue isnt gone
i guess i got tricked bcs the fetch took too long on local
i see no fetch in network
because there s an error somewhere
Uncaught (in promise) SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
await (async)
(anonymous) @ Menu.jsx:34
il @ react-dom.production.min.js:244
xu @ react-dom.production.min.js:286
uu @ react-dom.production.min.js:273
Hi @ react-dom.production.min.js:127
(anonymous) @ react-dom.production.min.js:283
Su @ react-dom.production.min.js:281
ou @ react-dom.production.min.js:270
S @ scheduler.production.min.js:13
L @ scheduler.production.min.js:14
what's the status code
And i have the app in allowed hosts, cors trusted origins
where i see that ?
it the network tab of the dev tools
nothing there
as i said
you have other selected
-_- mb
what's the status code of the failed request
304
and what's the full url of that request
the app ?
React App
Web site created using create-react-app
what is the full url for the failed request
the failed one is this . if it is not what are you referring...i don't know
type document
that's the url for the frontend, I'm asking for the url of the request that is failing
its the url for the frontend 🙂
why is your frontend requesting itself
you have something configured wrong
wait
well 304 is not really an error
its just saying its not have been modified
I know, but it's causing errors
still though?
review your code, find out why you are even making that request in the first place
i will come back after i get some sleep
thank you for now
you're welcome 🙂
i kinda solved it , for production only . now the fetch works , i changed the fetch url to the backend url / api / endpoint, but now the problem is locally. is any setup it must be done ? i tried to do it like this. in production works , locally not
does your backend run locally on port 8000?
yes
it s up
what's the error you get locally then
Menu.jsx:178
Uncaught (in promise) TypeError: Failed to fetch at getPlat (Menu.jsx:178:1) at Menu.jsx:45:1 at commitHookEffectListMount (react-dom.development.js:23150:1) at commitPassiveMountOnFiber (react-dom.development.js:24926:1) at commitPassiveMountEffects_complete (react-dom.development.js:24891:1) at commitPassiveMountEffects_begin (react-dom.development.js:24878:1) at commitPassiveMountEffects (react-dom.development.js:24866:1) at flushPassiveEffectsImpl (react-dom.development.js:27039:1) at flushPassiveEffects (react-dom.development.js:26984:1) at performSyncWorkOnRoot (react-dom.development.js:26076:1) the same i had on live server before i think its cors error but i mentioned them there
Uncaught (in promise) TypeError: Failed to fetch at getPlat (Menu.jsx:178:1) at Menu.jsx:45:1 at commitHookEffectListMount (react-dom.development.js:23150:1) at commitPassiveMountOnFiber (react-dom.development.js:24926:1) at commitPassiveMountEffects_complete (react-dom.development.js:24891:1) at commitPassiveMountEffects_begin (react-dom.development.js:24878:1) at commitPassiveMountEffects (react-dom.development.js:24866:1) at flushPassiveEffectsImpl (react-dom.development.js:27039:1) at flushPassiveEffects (react-dom.development.js:26984:1) at performSyncWorkOnRoot (react-dom.development.js:26076:1) the same i had on live server before i think its cors error but i mentioned them there
+ the status is 200 in backend terminal
but i set them
are you sure that's the proper way to set cors for api requests?
i will check again
i needed to use whitelist instead of allowed origins
I see