deploying react with vite

I've deployed a react app with vite, exposing network ip but I can't access it - says Application failed to respond on the url, i'm not sure what's wrong
33 Replies
Percy
Percy9mo ago
Project ID: 6314f0f2-e1c1-471e-a5c2-4507a16c92b4
holy daddy
holy daddy9mo ago
6314f0f2-e1c1-471e-a5c2-4507a16c92b4 i am using "start": "tsc && vite --host 0.0.0.0 --port 3000" in package.json
Brody
Brody9mo ago
that starts a development server copy the nixpacks.toml and Caddyfile from this repo into yours https://github.com/brody192/vite-react-template
holy daddy
holy daddy9mo ago
do i need to change any of the settings files
Brody
Brody9mo ago
just copy those two files
holy daddy
holy daddy9mo ago
i did it but the logs still say
vite --host 0.0.0.0 --port 3000
VITE v4.4.9 ready in 375 ms
➜ Local: http://localhost:3000/
➜ Network: http:/...
vite --host 0.0.0.0 --port 3000
VITE v4.4.9 ready in 375 ms
➜ Local: http://localhost:3000/
➜ Network: http:/...
I had a Dockerfile but I renamed it, so now the build fails
Brody
Brody9mo ago
remove the dockerfile
holy daddy
holy daddy9mo ago
I did
#16 0.309 /bin/bash: line 1: npm: command not found
#16 ERROR: process "/bin/bash -ol pipefail -c npm ci" did not complete successfully: exit code: 127
-----
> [stage-0 10/15] RUN --mount=type=cache,id=s/cfaf7ed2-171a-4cf4-8c6a-f175f50a42fd-/root/bun,target=/root/.bun npm ci:
0.309 /bin/bash: line 1: npm: command not found
-----

Dockerfile:26
-------------------
24 | ENV NIXPACKS_PATH /app/node_modules/.bin:$NIXPACKS_PATH
25 | COPY . /app/.
26 | >>> RUN --mount=type=cache,id=s/cfaf7ed2-171a-4cf4-8c6a-f175f50a42fd-/root/bun,target=/root/.bun npm ci
27 |
28 | # build phase
-------------------
ERROR: failed to solve: process "/bin/bash -ol pipefail -c npm ci" did not complete successfully: exit code: 127
#16 0.309 /bin/bash: line 1: npm: command not found
#16 ERROR: process "/bin/bash -ol pipefail -c npm ci" did not complete successfully: exit code: 127
-----
> [stage-0 10/15] RUN --mount=type=cache,id=s/cfaf7ed2-171a-4cf4-8c6a-f175f50a42fd-/root/bun,target=/root/.bun npm ci:
0.309 /bin/bash: line 1: npm: command not found
-----

Dockerfile:26
-------------------
24 | ENV NIXPACKS_PATH /app/node_modules/.bin:$NIXPACKS_PATH
25 | COPY . /app/.
26 | >>> RUN --mount=type=cache,id=s/cfaf7ed2-171a-4cf4-8c6a-f175f50a42fd-/root/bun,target=/root/.bun npm ci
27 |
28 | # build phase
-------------------
ERROR: failed to solve: process "/bin/bash -ol pipefail -c npm ci" did not complete successfully: exit code: 127
Brody
Brody9mo ago
can you share your repo?
holy daddy
holy daddy9mo ago
all .env stuff is public but sure https://github.com/traagel/creditstar-fe
Brody
Brody9mo ago
🤣
No description
holy daddy
holy daddy9mo ago
i've been up all night trying to finish this job application homework, its 9 am and i would like to sleep sadcat
Brody
Brody9mo ago
should have come here sooner https://test-service2.up.railway.app/ delete your bun.lockb file
holy daddy
holy daddy9mo ago
damn you're a hero
Brody
Brody9mo ago
thanks 🙂
holy daddy
holy daddy9mo ago
do you also know about flask deployment? i have the app.run(host="0.0.0.0", port=3000, debug=True) but it also says application failed to respond
Brody
Brody9mo ago
whats the python files name that has the flask app in it
Brody
Brody9mo ago
perfect your .env 😬
holy daddy
holy daddy9mo ago
i know, i just wanted to get it working, it was supposed to be a 8 hour thing but now it's been like 3 days and i just want to get it done sadcat
Brody
Brody9mo ago
add this as a railway.json file
{
"$schema": "https://schema.up.railway.app/railway.schema.json",
"build": {
"builder": "NIXPACKS"
},
"deploy": {
"startCommand": "gunicorn main:app"
}
}
{
"$schema": "https://schema.up.railway.app/railway.schema.json",
"build": {
"builder": "NIXPACKS"
},
"deploy": {
"startCommand": "gunicorn main:app"
}
}
add this as a .gitignore file https://www.toptal.com/developers/gitignore/api/python delete the .env file from the repo delete the __pycache__ from the repo regen your database credentials from the settings menu of the database and we can pick this back up tomorrow on how to setup database credentials properly and for use locally too, without the use of .env anywhere forgot one thing, you will want to add gunicorn=21.2.0 to your requirements.txt file and i assume you didnt have the database variables in the railway service variables so your app is very likely to crash upon startup
holy daddy
holy daddy9mo ago
packages/gunicorn/app/wsgiapp.py", line 58, in load
return self.load_wsgiapp()
File "/opt/venv/lib/python3.8/site-packages/gunicorn/app/wsgiapp.py", line 48, in load_wsgiapp
return util.import_app(self.app_uri)
File "/opt/venv/lib/python3.8/site-packages/gunicorn/util.py", line 371, in import_app
mod = importlib.import_module(module)
File "/root/.nix-profile/lib/python3.8/importlib/__init__.py", line 127, in import_module
return _bootstrap._gcd_import(name[level:], package, level)
File "<frozen importlib._bootstrap>", line 1014, in _gcd_import
File "<frozen importlib._bootstrap>", line 991, in _find_and_load
File "<frozen importlib._bootstrap>", line 970, in _find_and_load_unlocked
ModuleNotFoundError: No module named 'main.app'; 'main' is not a package
[2023-09-18 06:42:17 +0000] [9] [INFO] Worker exiting (pid: 9)
[2023-09-18 06:42:17 +0000] [1] [ERROR] Worker (pid:9) exited with code 3
[2023-09-18 06:42:17 +0000] [1] [ERROR] Shutting down: Master
[2023-09-18 06:42:17 +0000] [1] [ERROR] Reason: Worker failed to boot.
[2023-09-18 06:42:18 +0000] [1] [INFO] Starting gunicorn 21.2.0
[2023-09-18 06:42:18 +0000] [1] [INFO] Listening at: http://0.0.0.0:7314 (1)
[2023-09-18 06:42:18 +0000] [1] [INFO] Using worker: sync
[2023-09-18 06:42:18 +0000] [11] [INFO] Booting worker with pid: 11
packages/gunicorn/app/wsgiapp.py", line 58, in load
return self.load_wsgiapp()
File "/opt/venv/lib/python3.8/site-packages/gunicorn/app/wsgiapp.py", line 48, in load_wsgiapp
return util.import_app(self.app_uri)
File "/opt/venv/lib/python3.8/site-packages/gunicorn/util.py", line 371, in import_app
mod = importlib.import_module(module)
File "/root/.nix-profile/lib/python3.8/importlib/__init__.py", line 127, in import_module
return _bootstrap._gcd_import(name[level:], package, level)
File "<frozen importlib._bootstrap>", line 1014, in _gcd_import
File "<frozen importlib._bootstrap>", line 991, in _find_and_load
File "<frozen importlib._bootstrap>", line 970, in _find_and_load_unlocked
ModuleNotFoundError: No module named 'main.app'; 'main' is not a package
[2023-09-18 06:42:17 +0000] [9] [INFO] Worker exiting (pid: 9)
[2023-09-18 06:42:17 +0000] [1] [ERROR] Worker (pid:9) exited with code 3
[2023-09-18 06:42:17 +0000] [1] [ERROR] Shutting down: Master
[2023-09-18 06:42:17 +0000] [1] [ERROR] Reason: Worker failed to boot.
[2023-09-18 06:42:18 +0000] [1] [INFO] Starting gunicorn 21.2.0
[2023-09-18 06:42:18 +0000] [1] [INFO] Listening at: http://0.0.0.0:7314 (1)
[2023-09-18 06:42:18 +0000] [1] [INFO] Using worker: sync
[2023-09-18 06:42:18 +0000] [11] [INFO] Booting worker with pid: 11
this is the log atm
Brody
Brody9mo ago
kinda in the railway.json file it should be main:app not main.app my bad
Brody
Brody9mo ago
awsome!
holy daddy
holy daddy9mo ago
One last thing, can you help me configure CORS? I already have it for python but i'm not sure how to do it for react i have it as CORS(app, resources={r"/api/*": {"origins": "*"}})
Brody
Brody9mo ago
that should allow all origins
holy daddy
holy daddy9mo ago
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://creditstar-be-production.up.railway.app/api/v1/data/users/344-17-0576. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://creditstar-be-production.up.railway.app/api/v1/data/users/344-17-0576. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
Brody
Brody9mo ago
can you send me a link to where I would see this same error?
holy daddy
holy daddy9mo ago
https://creditstar-fe-production.up.railway.app/ click on switch to sample user oh nvm it works now, maybe it didn't refresh
Brody
Brody9mo ago
I got a 404 on some unpaid_loans endpoint, but no cors errors
holy daddy
holy daddy9mo ago
Ok great thank you so much, i can still submit it in time 😓 you really helped me out here
Brody
Brody9mo ago
no problem!