Unable to deploy frontend
my project id is 6e6ada91-a4a0-49ff-a137-0e4cf4fcbe25
I cannot deploy frontend although backend and database has been successful. I am using caddyfile though it does not seem to be working well...
47 Replies
Project ID:
6e6ada91-a4a0-49ff-a137-0e4cf4fcbe25fancy seeing you here
hey lol
got same problem as before though made further inroads than previously. I have deployed backend and databse fine
i just have issues with frontend
is this a different frontend app than I've previously helped with? (movies, workout)
yeah its different
cool, can you share the repo?
GitHub
GitHub - Eugenepython/todoapp
Contribute to Eugenepython/todoapp development by creating an account on GitHub.
I see the problem, but first we gotta get those node_modules folders and .env files out
add the same .gitignore from the previous help threads (or your movies repo) into this repo, and delete all the node_modules folders and .env files
oh right sorry forgot
let me know when done
sorry just to clarify, i delete node modules and the envs on github only, then pull throgh?
right, but make sure you have that .gitignore in your repo before any pulling or pushing
sure got it
hi so i did that... still get erros...
you still have a node_modules folder and a .env file in the server folder, they arent causing this error but please remove them too
can you run
npm run build locally without errors?'react-scripts' is not recognized as an internal or external command,... not its not able to run locally now. i had tried changing the package.json around for production, it had been working fine earlier
you must have deleted your local node_modules folder, run
npm install againOK doing it now..
Sorry laptop crashed
ok so i ran npm install locally... ive now pushed t github
?
Compiled with problems:
×
ERROR
[eslint] Plugin "react" was conflicted between "package.json » eslint-config-react-app » C:\Users\eugen\OneDrive\desktop\todoapp\client\node_modules\eslint-config-react-app\base.js" and "BaseConfig » C:\Users\eugen\OneDrive\Desktop\todoapp\client\node_modules\eslint-config-react-app\base.js".
i voe gotthis errror now when tryingto run locally
okay please fix the errors you are getting locally, if you get errors locally its defiantly not gonna work on railway
ok thanks
hi i rejigged my repository https://github.com/Eugenepython/todoapp/tree/main/client
GitHub
todoapp/client at main · Eugenepython/todoapp
Contribute to Eugenepython/todoapp development by creating an account on GitHub.
and it now works locally (again)
but still i have the problem of the frontend deployment failing...
so the real problem was that you used a nixpacks.toml and Caddyfile for a Vite app, but now you are using create-react-app, so you need to use a Caddyfile and nixpacks.toml for that instead, you can find those here
https://github.com/brody192/create-react-app-starter
ah ok thanx will try this
hi so i copied and pasted in your caddyfile and nixpacks.toml content into my old files of the same name
i still get a failed deployment however?
your lock file is out of sync, delete it and then run
npm i --package-lock-only to re-sync ithi so i updated pacakage-lock.json on client side but i still get errors....
you have warnings that are treated as errors, you have two options, ignore them, or fix them, what do you wanna do?
the app seems to work locally so im happy to igore the errors. for me its a case of getting apps onto railway and this is not as convulated as others, so if the erros relating to the cookies dont affect the app locally am happy to ignore. there is a useEffect hook with no dependancies but thats OK as well..
though... not sure how i ignore them of course in this contenxt
set a service variable
CI to falsethat seems to work!
website works?
the deployment works.... the website.. not quite lol
probably an issue with your backend url
signup/:1
Failed to load resource: net::ERR_NAME_NOT_RESOLVED console.js:213 An error occurred: TypeError: Failed to fetch at Auth.js:25:30 at p (regeneratorRuntime.js:45:16) at Generator.<anonymous> (regeneratorRuntime.js:133:17) at Generator.next (regeneratorRuntime.js:74:21) at l (asyncToGenerator.js:3:20) at i (asyncToGenerator.js:22:9) at asyncToGenerator.js:27:7 at new Promise (<anonymous>) at asyncToGenerator.js:19:12 at Auth.js:17:21 yeah i think that is it but i should be able to review this and get it working based on the other app you talked me through at least the deployment has worked OK now though
Failed to load resource: net::ERR_NAME_NOT_RESOLVED console.js:213 An error occurred: TypeError: Failed to fetch at Auth.js:25:30 at p (regeneratorRuntime.js:45:16) at Generator.<anonymous> (regeneratorRuntime.js:133:17) at Generator.next (regeneratorRuntime.js:74:21) at l (asyncToGenerator.js:3:20) at i (asyncToGenerator.js:22:9) at asyncToGenerator.js:27:7 at new Promise (<anonymous>) at asyncToGenerator.js:19:12 at Auth.js:17:21 yeah i think that is it but i should be able to review this and get it working based on the other app you talked me through at least the deployment has worked OK now though
we've tackled this before, you can go reference the previous threads!
yes that s right! thanks very much again
no problem!
hi.. so i am still struggling through this. i just wanted to check... does the CI ; false mean that the errors regarding cookies, mean that the use of the dependancy cookies is blocked? it is causing me issues in production of accessing userEmail which had not been a problem in development....
CI = false just let's the warnings stay as warnings without causing your build to fail completely
it might be best to fix the warnings and work from there
ok ill try that
when i am in client, should i always use import.meta.env. intead of process.env?
for a create react app you use
process.env but only variables prefixed with REACT_APP_ will be available (with a few exceptions)
give this a read https://create-react-app.dev/docs/adding-custom-environment-variables/
and you can do the exact same .env.local thing you did for vite, only difference being your variable would have to be prefixed REACT_APP_ like so REACT_APP_BACKEND_URL=http://127.0.0.1:3001ah ok will check this, hopefull this will fix the problem, as for some reason i could not get cookie.userEmail defined in production, but could do in development, and it was assigned its value after the fetch action
ah likely some cross origin mess, it can get tricky
maybe watch a few youtube videos?