R
Railway•13mo ago
Tsh

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.
No description
No description
No description
No description
250 Replies
Brody
Brody•13mo ago
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 repo
Tsh
Tsh•13mo ago
i will try in a minute
Tsh
Tsh•13mo ago
same thing
No description
Tsh
Tsh•13mo ago
i will redeploy manually
Brody
Brody•13mo ago
haha I know, that wasn't going to fix it, it just was something that needed to be done
Tsh
Tsh•13mo ago
ah ok is it fixable ?:)
Brody
Brody•13mo ago
maybe, but your repo has disappeared
Tsh
Tsh•13mo ago
yeah. i will give it back didnt want to be seen by everyone do i need whitenoise ?
Brody
Brody•13mo ago
whats this little arrow
No description
Tsh
Tsh•13mo ago
because django recognise it as static file i guess
Brody
Brody•13mo ago
make it not have an arrow lol
Tsh
Tsh•13mo ago
in VS i don't see an arrow
Brody
Brody•13mo ago
of course not, thats github
Tsh
Tsh•13mo ago
mok , i don't know why it has an arrow then
Brody
Brody•13mo ago
okay but let me know when it doesnt have an arrow anymore
Tsh
Tsh•13mo ago
so the arrow its because it is a git submodule or a subdirectory
Brody
Brody•13mo ago
make it a regular folder
Tsh
Tsh•13mo ago
ok I KINDA DELETED IT FROM MY PROJECT NOW my frontend
Brody
Brody•13mo ago
it still has an arrow lol
Tsh
Tsh•13mo ago
no. man i deleted it locally by accident
Brody
Brody•13mo ago
that's what the recycle bin is for
Tsh
Tsh•13mo ago
can i undo it localy ? oh ok its done
Brody
Brody•13mo ago
arrow still exists
Tsh
Tsh•13mo ago
man i dont have it locally
Brody
Brody•13mo ago
of course not
Tsh
Tsh•13mo ago
Remove-Item -Path .\frontend -Recurse -Force i used it now i need to respore it .. restore it
Brody
Brody•13mo ago
let me know when you remove the arrow folder from github, I don't know why you are messing around with the local folder
Tsh
Tsh•13mo ago
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
Brody
Brody•13mo ago
oopsies
Tsh
Tsh•13mo ago
i cant even restore it do you have any knowledge about that ? if i can restore it ?
Brody
Brody•13mo ago
probably not if you force deleted it lol
Tsh
Tsh•13mo ago
ok ty
Brody
Brody•13mo ago
let me know when you have it sorted out
Tsh
Tsh•13mo ago
yeah .. maybe in a week . i have to do it again
Brody
Brody•13mo ago
sounds good, I'll be around
Tsh
Tsh•13mo ago
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
Tsh•13mo ago
Brody
Brody•13mo ago
@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
Tsh
Tsh•13mo ago
No description
Brody
Brody•13mo ago
you have two apps in your repo, a fontend and a backend, this means you need two railway services, please create another railway service
Tsh
Tsh•13mo ago
And what do i have to put in railway.js for each?
Brody
Brody•13mo ago
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
Tsh
Tsh•13mo ago
if i have 2 services i will pay for each or its a base price at 5$ ?
Brody
Brody•13mo ago
no thats only a subscription fee for the entire railway account
Tsh
Tsh•13mo ago
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
Brody
Brody•13mo ago
good idea, the backend should not try to serve any frontend files
Tsh
Tsh•13mo ago
I saw a tutorial which said it should deploy as any django project
Brody
Brody•13mo ago
but you have a django app and a frontend app
Tsh
Tsh•13mo ago
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
Brody
Brody•13mo ago
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
Tsh
Tsh•13mo ago
i thought that number of connections represent the number of ppl accessing it
Brody
Brody•13mo ago
maybe if you did something really wrong
Tsh
Tsh•13mo ago
i did nothing , i just enabled the add-on and connected to my settings file
Brody
Brody•13mo ago
then you should be fine this is a django rest api right?
Tsh
Tsh•13mo ago
this is , that one on heroku is not
Brody
Brody•13mo ago
cool
Tsh
Tsh•13mo ago
thank you for the replies
Brody
Brody•13mo ago
no problem!
Tsh
Tsh•13mo ago
hi i separated frontend from backend but it fails to build
Brody
Brody•13mo ago
1 step ahead of me with the repo lol
Tsh
Tsh•13mo ago
:)) i got used to it
Brody
Brody•13mo ago
this is a whole other repo?
Tsh
Tsh•13mo ago
i just separted its the same content from the full one
Brody
Brody•13mo ago
i know, what was wrong with the frontend and backend folders in a single repo though?
Tsh
Tsh•13mo ago
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
Brody
Brody•13mo ago
two folders in one repo was preferable but doesnt matter all that much
Tsh
Tsh•13mo ago
ok i have that too
Brody
Brody•13mo ago
https://github.com/brody192/create-react-app-starter copy the nixpacks.toml and Caddyfiles from this repo into yours
Tsh
Tsh•13mo ago
this has same repo 2 folders
Brody
Brody•13mo ago
send me a screenshot of your railway project please
Tsh
Tsh•13mo ago
No description
Tsh
Tsh•13mo ago
ok then i preffer the one with same repo 2 folders. so i put that nixpacks in this one ?
Brody
Brody•13mo ago
i prefer that one too
Tsh
Tsh•13mo ago
?
No description
Brody
Brody•13mo ago
where is the backend service?
Tsh
Tsh•13mo ago
well i started to upload only the frontend
Brody
Brody•13mo ago
gotcha do you have the root directory of that service set to /frontend?
Tsh
Tsh•13mo ago
yes
Brody
Brody•13mo ago
do you have those two files copied?
Tsh
Tsh•13mo ago
i forgot the caddyfiles , one sec ok , done
Brody
Brody•13mo ago
let me know when the most recent build fails
Tsh
Tsh•13mo ago
so now i try to upload the one with the 2 folders
Brody
Brody•13mo ago
oh you dont have that repo attached, yes use that repo for the source
Tsh
Tsh•13mo ago
failed after 1:10 minutes
No description
Brody
Brody•13mo ago
this is a build log for python what do you have the root directory set to in the service settings
Tsh
Tsh•13mo ago
maybe there is something to modify at railway.json ? root for what ? static ?
Brody
Brody•13mo ago
the root directory in the service settings, set it to /frontend
Tsh
Tsh•13mo ago
yeah 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', ], }, }, ]
Brody
Brody•13mo ago
you should remove all the frontend stuff from django
Tsh
Tsh•13mo ago
is it mandatory for now , will i get an error if i have it like this for now ?
Brody
Brody•13mo ago
you havent deployed django yet, but you must do that before you deploy django send me your most recent build logs
Tsh
Tsh•13mo ago
i will remove them now
Brody
Brody•13mo ago
please show me what your service root directory is set to in railway
Tsh
Tsh•13mo ago
is set to "/"
Brody
Brody•13mo ago
set it to /frontend
Tsh
Tsh•13mo ago
sorry i did not know what were you reffering .
Brody
Brody•13mo ago
please set it to /frontend
Tsh
Tsh•13mo ago
its redeploying i was looking in my settings didn't know it must be done in railway
Brody
Brody•13mo ago
thats not all the logs, please wait until you see all the logs before downloading them
Brody
Brody•13mo ago
set a service variable CI = false
Tsh
Tsh•13mo ago
No description
Tsh
Tsh•13mo ago
a small victory page not found when i pressed the link
Tsh
Tsh•13mo ago
No description
Brody
Brody•13mo ago
just wait lol
Tsh
Tsh•13mo ago
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 ?
Brody
Brody•13mo ago
you need a seprate service for django but first, have you removed all the frontend stuff from django?
Tsh
Tsh•13mo ago
i will continue removing it now. one moment
Brody
Brody•13mo ago
sounds good
Tsh
Tsh•13mo ago
done
Brody
Brody•13mo ago
create a new service in your railway project and show me a screenshot of your railway project when done
Tsh
Tsh•13mo ago
and then i set the root directory to backend ? 🙂
Brody
Brody•13mo ago
indeed, but still send the screenshot
Tsh
Tsh•13mo ago
ofc
Tsh
Tsh•13mo ago
your screen shot. i set he CI to false and i ll do the variable
No description
Brody
Brody•13mo ago
where is the new service? what are you doing to your frontend service, it was working!
Tsh
Tsh•13mo ago
oh sorry i started a new project instead
Brody
Brody•13mo ago
in your railway project
Tsh
Tsh•13mo ago
i got it now
Brody
Brody•13mo ago
please pay attention to the instructions you should have a project with two services
Tsh
Tsh•13mo ago
No description
Brody
Brody•13mo ago
there we go
Tsh
Tsh•13mo ago
yeah ik , sorry , its 6 am. I skip the sleep very often it was 6 am too when i deleted the frontend :))
Brody
Brody•13mo ago
dont skip sleep lol
Tsh
Tsh•13mo ago
i just can't. university stuff. is killing from inside
Brody
Brody•13mo ago
damn
Tsh
Tsh•13mo ago
the stress man
Brody
Brody•13mo ago
real
Tsh
Tsh•13mo ago
i think i need another file in backend folder ? i sent you the logs
Brody
Brody•13mo ago
add this as a railway.json file to the backend folder
{
"$schema": "https://schema.up.railway.app/railway.schema.json",
"deploy": {
"startCommand": "python manage.py migrate && gunicorn djangoxreact1.wsgi"
}
}
{
"$schema": "https://schema.up.railway.app/railway.schema.json",
"deploy": {
"startCommand": "python manage.py migrate && gunicorn djangoxreact1.wsgi"
}
}
Tsh
Tsh•13mo ago
or the first nixpacks was supposed to be in main folder , not just in frontend ok
Brody
Brody•13mo ago
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
Tsh
Tsh•13mo ago
its active now
Brody
Brody•13mo ago
awsome
Tsh
Tsh•13mo ago
so the admin panel should be at the url/admin now or am i missing something ?
Brody
Brody•13mo ago
should be <backend url>/admin
Tsh
Tsh•13mo ago
it didnt give me a backend url like i did for frontend
Brody
Brody•13mo ago
go to the backend's setting and generate one
Tsh
Tsh•13mo ago
oh ok so i must set now the proxy to that url
Brody
Brody•13mo ago
no proxy needed
Tsh
Tsh•13mo ago
for the api calls , i have a proxy
Brody
Brody•13mo ago
your frontend will just simply make its api calls to your backend domain you dont need a proxy
Tsh
Tsh•13mo ago
ok nice
Tsh
Tsh•13mo ago
i connect it in my settings and then i do the migrations and it should be done right ?
No description
Brody
Brody•13mo ago
the start command for the backend automatically does migrations
Tsh
Tsh•13mo ago
oh ok do you have any template for database setup related to the variables in the service ?
Brody
Brody•13mo ago
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
Tsh
Tsh•13mo ago
ty. i have to set them localy too right ?
Brody
Brody•13mo ago
use the railway cli locally, with railway shell
Tsh
Tsh•13mo ago
because i have an error in django
Tsh
Tsh•13mo ago
ok then
Brody
Brody•13mo ago
open your backend folder do you have all the service variables setup on the railway service?
Tsh
Tsh•13mo ago
i installed cli with npm command so far
Brody
Brody•13mo ago
?
Tsh
Tsh•13mo ago
if you are reffering to those yes
No description
Tsh
Tsh•13mo ago
do i need to setup here something too ?
No description
Brody
Brody•13mo ago
those where there by default lol, you need to set the variable on your django service that you need for postgres
Tsh
Tsh•13mo ago
ok gotcha
Tsh
Tsh•13mo ago
and now ?
No description
Brody
Brody•13mo ago
please reference this
Tsh
Tsh•13mo ago
oh, got it , i changed it manualy in settings
Brody
Brody•13mo ago
please use the proper names as shown in the code
Tsh
Tsh•13mo ago
. in my settings.py i change directly with the values or i leave it as it is in your example ?
No description
Brody
Brody•13mo ago
please reference this
Tsh
Tsh•13mo ago
ok now i have it like that
Brody
Brody•13mo ago
show me please
Tsh
Tsh•13mo ago
No description
Tsh
Tsh•13mo ago
+
Brody
Brody•13mo ago
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 django
Tsh
Tsh•13mo ago
can i run it with venv activated or not ?
Brody
Brody•13mo ago
yes you can
Tsh
Tsh•13mo ago
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
Tsh
Tsh•13mo ago
No description
Brody
Brody•13mo ago
that error wouldnt be related to railway so please do some research on how you can fix the error
Tsh
Tsh•13mo ago
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
Brody
Brody•13mo ago
okay gotcha, then just use railway run <whatever command you normally do to start django> inside your venv
Tsh
Tsh•13mo ago
i have to do all the linking again ?
Brody
Brody•13mo ago
no
Tsh
Tsh•13mo ago
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
Brody
Brody•13mo ago
railway run python manage.py runserver
Tsh
Tsh•13mo ago
i used it and got that psycopg2 not found error. but i have it installed
Brody
Brody•13mo ago
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
Tsh
Tsh•13mo ago
i was not in shell ok same thing
Brody
Brody•13mo ago
then there's an issue with your setup or code that doesn't relate to railway
Tsh
Tsh•13mo ago
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
Brody
Brody•13mo ago
sure you can run migrations locally just use railway run <your desired command>
Tsh
Tsh•13mo ago
ok thank you you are awesome
Brody
Brody•13mo ago
you are too
Tsh
Tsh•13mo ago
thank you for your time and especially, for your patience
Brody
Brody•13mo ago
no problem 🙂
Tsh
Tsh•13mo ago
Can i increase the number of connections to the db? lets say i have a traffic of more than 100 at the same time
Brody
Brody•13mo ago
tweak the pool settings
Tsh
Tsh•13mo ago
any intel of this ? i set them
No description
No description
Brody
Brody•13mo ago
have you read the information on that page, and also read the docs it's linking to?
Tsh
Tsh•13mo ago
i did
Brody
Brody•13mo ago
okay then please implement the suggestions that page gave you, or further research about this error in djangos docs
Tsh
Tsh•13mo ago
i solved it heil salute
Brody
Brody•13mo ago
for real
Tsh
Tsh•13mo ago
my react app can t do the fetches 😦
Brody
Brody•13mo ago
why not
Tsh
Tsh•13mo ago
i still have the proxy on tho, without it ,locally i get errors
Brody
Brody•13mo ago
you don't need a proxy
Tsh
Tsh•13mo ago
ok i will remove it and then i will debug it
Brody
Brody•13mo ago
for local development, you run both the frontend and backend locally, then your local frontend makes requests to your locally running backend
Tsh
Tsh•13mo ago
oh , locally is fine . mb
Brody
Brody•13mo ago
then on railway your frontend makes requests to the backend on railway perhaps you are getting cors errors?
Tsh
Tsh•13mo ago
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
Brody
Brody•13mo ago
what's the status code
Tsh
Tsh•13mo ago
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
Brody
Brody•13mo ago
what's the status code
Tsh
Tsh•13mo ago
And i have the app in allowed hosts, cors trusted origins where i see that ?
Brody
Brody•13mo ago
it the network tab of the dev tools
Tsh
Tsh•13mo ago
No description
Tsh
Tsh•13mo ago
nothing there as i said
Brody
Brody•13mo ago
you have other selected
Tsh
Tsh•13mo ago
-_- mb
Tsh
Tsh•13mo ago
No description
Brody
Brody•13mo ago
what's the status code of the failed request
Tsh
Tsh•13mo ago
304
Brody
Brody•13mo ago
and what's the full url of that request
Tsh
Tsh•13mo ago
the app ?
Tsh
Tsh•13mo ago
React App
Web site created using create-react-app
Brody
Brody•13mo ago
what is the full url for the failed request
Tsh
Tsh•13mo ago
the failed one is this . if it is not what are you referring...i don't know type document
Brody
Brody•13mo ago
that's the url for the frontend, I'm asking for the url of the request that is failing
Tsh
Tsh•13mo ago
its the url for the frontend 🙂
Brody
Brody•13mo ago
why is your frontend requesting itself
Tsh
Tsh•13mo ago
No description
Brody
Brody•13mo ago
you have something configured wrong
Tsh
Tsh•13mo ago
wait well 304 is not really an error its just saying its not have been modified
Brody
Brody•13mo ago
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
Tsh
Tsh•13mo ago
i will come back after i get some sleep thank you for now
Brody
Brody•13mo ago
you're welcome 🙂
Tsh
Tsh•13mo ago
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
No description
No description
Brody
Brody•13mo ago
does your backend run locally on port 8000?
Tsh
Tsh•13mo ago
yes it s up
Brody
Brody•13mo ago
what's the error you get locally then
Tsh
Tsh•13mo ago
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
Tsh
Tsh•13mo ago
No description
Tsh
Tsh•13mo ago
+ the status is 200 in backend terminal
Tsh
Tsh•13mo ago
but i set them
No description
Brody
Brody•13mo ago
are you sure that's the proper way to set cors for api requests?
Tsh
Tsh•13mo ago
i will check again i needed to use whitelist instead of allowed origins
Brody
Brody•13mo ago
I see
Want results from more Discord servers?
Add your server