Deploying Angular App - "Nixpacks build failed" Error
Hi! I am hoping someone can help me please. I am trying to deploy an Angular App. I have done this before, and I received amazing help here, so I am trying to go about it the same way, referencing that thread (https://discord.com/channels/713503345364697088/1150242012851880090). However the error I am getting now is something I haven't seen before, so I was hoping for some guidance. I attached a screenshot error. I also have one follow up question related to all of this, but I am hoping to focus on this first please. Thanks in advance!
GitHub: https://github.com/ChiomaGrace/AngularApp/tree/main
Note: I am able to use railway locally (npm run start for frontend) (railway run npm run start for back end), and it works fine
Discord
Discord - A New Way to Chat with Friends & Communities
Discord is the easiest way to communicate over voice, video, and text. Chat, hang out, and stay close with your friends and communities.
GitHub
GitHub - ChiomaGrace/AngularApp
Contribute to ChiomaGrace/AngularApp development by creating an account on GitHub.
133 Replies
Project ID:
N/AN/A
the package.json in your backend is missing a start script
Hi again, Brody!
Oh okay, so I just need to add this:
is that right?
looks like it could work
Okay I am trying now
It deployed, but the site isn't up
is your app listening on PORT?
I changed it to this:
looks good, do you have the root directory on the service set to
/backendyes!
send the link to the backend?
I get a not found, that's not a bad thing, just means you don't have anything registered for the route path
ah. that makes sense. i don't think i have my angular service going to my backend yet so that checks
i have one more question if that's okay
of course
Can you help explain to me why this is happening locally please?
you have something else running on port 8000
I found a fix:
But I don't get why it says I have two things running on port 8000
i have two terminals. one i am running in the front end and one for the back end. but that's it
is the frontend running on port 8000 too?
i don't think so, but I guess I don't understand how to check? I thought angular ran on 4200
well something else is running on that port, I have no way to tell you what though
it shows me the two things:
is it because i did this?
no cors doesn't have anything to do with this
okay cool
but yeah this is how i'm running my front end terminal
then my back end terminal i get that error:/
very strange
but I'm sorry I don't know as I have no way of telling you what's running
right! and that's okay
thanks for helping out again!
happy holidays:)
no problem, happy holidays to you too!
sorry i'm back again
i understand the backend url now, but shouldn't the front end url work though?
send the frontend url please
angular-app-frontend-production.up.railway.app
build logs of that please
do i give u the id for that?
or do u have access to this link if i share it: https://railway.app/project/8fc2ded2-11c3-4036-a22b-7b24c3e630b0/service/a461c19f-de36-4b69-ab17-09d20ecb64a4?id=d6495021-8106-45ab-923a-8c666c5cd20b
Railway
404 - Page not found
Railway is an infrastructure platform where you can provision infrastructure, develop with that infrastructure locally, and then deploy to the cloud.
I don't work for railway so no I don't have access to that
can you remind me how to share the log w you again please?
Here's my deployment id: d6495021-8106-45ab-923a-8c666c5cd20b
not sure if that's helpful
https://bookmarklets.up.railway.app/log-downloader/
IDs don't help me since I don't work for Railway
angular 16 or 17?
17
https://github.com/railwayapp-templates/angular-starter/tree/main
copy the nixpacks.toml and Caddyfile from this repo into your frontend
okay adding now
that did the trick!
awesome
thanks brody
no problem!
what do those files do?
they download and run caddy to serve your frontend
got it
there's a section in this repos readme about caddy
i checked it out! appreciate it
Hey Brody! Is this thread still open? I have a follow up question if that's alright
of course
what is the question
Thanks Brody! It was about something you changed on the last project I deployed, and I am just trying to understand to implement again! https://github.com/ChiomaGrace/MyPortfolio/blob/master/frontend/src/app/shared.service.ts
GitHub
MyPortfolio/frontend/src/app/shared.service.ts at master · ChiomaGr...
Contribute to ChiomaGrace/MyPortfolio development by creating an account on GitHub.
Import.meta.env - this is a way to get the front end to talk to the backend routes right?
that's just how you access environment variables in the code
okay gotcha. would you mind if I ask why the way I am currently trying to do it isn't working, or do you answer questions more to do with deployment?
very likely because you aren't using this in your new project
https://www.npmjs.com/package/@ngx-env/builder
that's what I used when I made changes to your other project
makes using environment variables in your angular code much easier and straightforward than the native way angular would have you do it
okay! thanks brody!! looking into it now
Brody I am getting the console log from my backend! On my index page. But the route that submits my form is still not working, and I don't see the console logs from there either. Any suggestions on where I should look to debug?
can you show some example screenshots of what you mean? not too sure i understand whats going on
sure thing!
Here is my server.js that connects to my routes.js:
My routes.js:
Only the get method seems to be working right now
The method I am trying to see run through my routes
How i implemented the environment variable:
you went back to serving your frontend from the backend again
i referenced our last to chat to make sure i understood everything. i set it up incorrectly still?
yes you have, here you are sending the the frontend from the backend
ah okay. i did notice on my other app i didn't have that, but i couldn't see how the frontend was being served without it
locally the frontend is ran with its dev server, on railway the frontend is ran with caddy, i think we've talked about this a few times?
loads. and i apologize. i am even trying to make documentation to make sure i understand
but locally and in development just seems so different.
i know locally i would have and and run the project on localhost 8000 and this would show the front end
in development i an running and in another terminal
but i do not see my front end unless i have that get statement. this is different than local and this is where i get super confused
maybe reference our previous threads? i think youve asked this exact question and i gave you a breakdown
ive referenced it, and i've made documentation even, but i understand if you cant break it down more than u have. https://docs.google.com/document/d/1qwldEEzUCqNmgkG7-mVpK_R7ZMYBJO3ZqZKUPUm-_lM/edit
i'll look at it again
locally during development:
- two vscode windows open.
- run
ng serve to start the frontend. https://angular.io/cli/serve
- run nodemon server.js to start the backend.
these commands start two completely separate dev servers.correct. im w you there
this time i deployed first, because i had such a hard time grasping everything, and i wanted to continually working locally after deploying
nothing i have ever said prevents you from working locally at any point
correct, but there was a lot of setup that altered that i didn't initially have
this is true, but it was only initial setup
yes! so i was trying to do the inital setup as we did before everything is what im trying to say
yes but instead you went back to serving your frontend from the backend, exactly what we where getting away from with all that setup we have done in the past
okay. so if i remove that get function
is the setup correct?
i mean its a step in the right direction, but i would need to know the rest of your setup in order to answer that question
i mirrored the other thread you helped me on
GitHub
GitHub - ChiomaGrace/AngularApp
Contribute to ChiomaGrace/AngularApp development by creating an account on GitHub.
quick side question, you are not the first ive seen to have a pokemon related frontend and backend project, are you following some kind of tutorial?
nope. i am trying to just do a CRUD app based off our last chat to make sure i get everything. just picked pokemon as the subject matter at random
oh interesting
can i see a screenshot of your railway project?
your repo needs a .gitignore file, use this https://www.toptal.com/developers/gitignore/api/node,angular in the root of the repo
you have committed your .env file to the repo, please delete it.
also delete the node_modules folder.
https://github.com/ChiomaGrace/AngularApp/blob/main/frontend/src/app/shared.service.ts#L14
the import should be
import.meta.env["NG_APP_BACKEND_URL"]
https://github.com/ChiomaGrace/AngularApp/blob/main/frontend/.env.local#L1
this variable should be named NG_APP_BACKEND_URL
the variable in the service variables on railway should also be named that
have you integrated https://www.npmjs.com/package/@ngx-env/builder yet?i did integreate the biulder yes, but i did name my variables differently.... i just named it backend_url. so the "ng app" part of the name is crucial?
yes it is, from the docs, otherwise you will get
undefined
we are going to use the default NG_APP_ prefix
https://github.com/ChiomaGrace/AngularApp/blob/main/frontend/.env.local#L1
the value for that variable should be http://127.0.0.1:8000 since your backend will run locally on port 8000oh okay. i will adjust. is this the same with "FRONTEND ORIGIN"? That is what I used on the app that works
But on the one pokemon one i named it frontend url
the backend does not need any variable prefixes, thats only a frontend thing
got it
adjusting now
though you have the incorrect variable in the service variables as opposed to whats in your code
https://github.com/ChiomaGrace/AngularApp/blob/main/backend/server.js#L16
these little things can make or break entire site functionality
the variable in my service is this. i just adjusted because of what we just discussed
this is incorrect?
yes it is
oh shoot. then i am even more confused i think. isn't this how we setup the service in my previous app?
https://github.com/ChiomaGrace/MyPortfolio/blob/master/frontend/src/app/shared.service.ts
here is your screenshot showing a variable in use in your code with the
NG_APP_ prefix
you will not be able to access a variable on the frontend if it does not have NG_APP_ prefixedyes! that's what you just explained. okay sorry i thought you were saying this is incorrect. this is what i just changed in railway and in the code. i added the rpefix
have you made all the suggestions here? im not seeing any changes on the repo?
not yet. when i deleted the node module folder it created issues so i was going to put it back first
you delete the node_modules folder from the repo, not locally
this makes sense ha
okay i deployed again w the changes
Have some errors on Railway
you have not yet removed the node_modules folder
looks like i didnt commit the change. theyre gone now
okay let me know if the build still fails
okay it didnt fail! it is up and working https://angular-app-frontend-production.up.railway.app/
but locally i get this when i remove the get function
thats normal, you need to open the url of the frontend dev server to access the frontend, not the backends url
as in run on localhost 4200?
i think thats what ng will run the dev server on
you have
ng serve as the start script on your frontend so you only need to run npm run start locally in vscode opened to the frontend foldernpm run start wasnt working so i was using
when you run into issues, please tell me, dont just jump to something else
ng build does not start the development server, without running ng serve you will have no way of opening the frontend locallysorry brody. i'll tell you now for sure
i have ran npm run start in one terminal, and it is running on localhost 4200!
i tried to submit the form as a test but i dont think it's going to the route
what route does it request?
via the 3 dot menu of the dev tools, pop it out into a seprate window for ease of use
it should go to the submitPokemon route
right, but what does it actually go to when you click the submit button
pop out the dev tools please, then go to the network tab
why is everything so big?
you requested for me to make it its own window no?
yeah but youre all zoomed in, zoom out lol
oh it's not zoomed in
haha yes it is
i just opened it in a new window as requested. i didn't zoom in on anything
its zoomed in, but nevermind that. show me the failed request please
how do i do that? what do u want to see on the network tab?
the form submission api call
nothing displays in the fetch/xhr tab
then your frontend isnt even calling the api
this is what i was trying to say here
oh and i see the terminal is saying this
im not an agular dev so im no help there
fair enough. but it's this return statement that isn't working here:
do you by chance know why?
i see in my other app i have this file, but i didn't add this. is this something you imported?
this:
GitHub
MyPortfolio/frontend/src/env.d.ts at master · ChiomaGrace/MyPortfolio
Contribute to ChiomaGrace/MyPortfolio development by creating an account on GitHub.
that would be something ngx-env added
but you have to focus on why your frontend is not making an api call
the return statement right? that's the only thing the function isn't running. the component with the form goes to the service as expected. then the service runs correctly until the return statement
the import.meta.env part itself correct, i dont know about anything around that
got it going to the back end now!
just getting a 500 error though
what are the logs saying on the backend?
500 is usually inductive of a code / config issue
yep just a code issue, looks like you got a little debugging to do