R
Railway11mo ago
Chioma

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
Percy
Percy11mo ago
Project ID: N/A
Chioma
Chioma11mo ago
N/A
Brody
Brody11mo ago
the package.json in your backend is missing a start script
Chioma
Chioma11mo ago
Hi again, Brody! Oh okay, so I just need to add this:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
is that right?
Brody
Brody11mo ago
looks like it could work
Chioma
Chioma11mo ago
Okay I am trying now It deployed, but the site isn't up
Brody
Brody11mo ago
is your app listening on PORT?
Chioma
Chioma11mo ago
I changed it to this:
Brody
Brody11mo ago
looks good, do you have the root directory on the service set to /backend
Chioma
Chioma11mo ago
yes!
Brody
Brody11mo ago
send the link to the backend?
Brody
Brody11mo ago
I get a not found, that's not a bad thing, just means you don't have anything registered for the route path
Chioma
Chioma11mo ago
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
Brody
Brody11mo ago
of course
Chioma
Chioma11mo ago
Can you help explain to me why this is happening locally please?
Brody
Brody11mo ago
you have something else running on port 8000
Chioma
Chioma11mo ago
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
Brody
Brody11mo ago
is the frontend running on port 8000 too?
Chioma
Chioma11mo ago
i don't think so, but I guess I don't understand how to check? I thought angular ran on 4200
Brody
Brody11mo ago
well something else is running on that port, I have no way to tell you what though
Chioma
Chioma11mo ago
it shows me the two things: is it because i did this?
Brody
Brody11mo ago
no cors doesn't have anything to do with this
Chioma
Chioma11mo ago
okay cool but yeah this is how i'm running my front end terminal then my back end terminal i get that error:/
Brody
Brody11mo ago
very strange but I'm sorry I don't know as I have no way of telling you what's running
Chioma
Chioma11mo ago
right! and that's okay thanks for helping out again! happy holidays:)
Brody
Brody11mo ago
no problem, happy holidays to you too!
Chioma
Chioma11mo ago
sorry i'm back again i understand the backend url now, but shouldn't the front end url work though?
Brody
Brody11mo ago
send the frontend url please
Chioma
Chioma11mo ago
angular-app-frontend-production.up.railway.app
Brody
Brody11mo ago
build logs of that please
Chioma
Chioma11mo ago
do i give u the id for that?
Chioma
Chioma11mo ago
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.
Brody
Brody11mo ago
I don't work for railway so no I don't have access to that
Chioma
Chioma11mo ago
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
Brody
Brody11mo ago
https://bookmarklets.up.railway.app/log-downloader/ IDs don't help me since I don't work for Railway
Chioma
Chioma11mo ago
Brody
Brody11mo ago
angular 16 or 17?
Chioma
Chioma11mo ago
17
Brody
Brody11mo ago
https://github.com/railwayapp-templates/angular-starter/tree/main copy the nixpacks.toml and Caddyfile from this repo into your frontend
Chioma
Chioma11mo ago
okay adding now that did the trick!
Brody
Brody11mo ago
awesome
Chioma
Chioma11mo ago
thanks brody
Brody
Brody11mo ago
no problem!
Chioma
Chioma11mo ago
what do those files do?
Brody
Brody11mo ago
they download and run caddy to serve your frontend
Chioma
Chioma11mo ago
got it
Brody
Brody11mo ago
there's a section in this repos readme about caddy
Chioma
Chioma11mo ago
i checked it out! appreciate it Hey Brody! Is this thread still open? I have a follow up question if that's alright
Brody
Brody11mo ago
of course what is the question
Chioma
Chioma11mo ago
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.
Chioma
Chioma11mo ago
Import.meta.env - this is a way to get the front end to talk to the backend routes right?
Brody
Brody11mo ago
that's just how you access environment variables in the code
Chioma
Chioma11mo ago
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?
Brody
Brody11mo ago
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
Chioma
Chioma11mo ago
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?
Brody
Brody11mo ago
can you show some example screenshots of what you mean? not too sure i understand whats going on
Chioma
Chioma11mo ago
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:
Brody
Brody11mo ago
you went back to serving your frontend from the backend again
Chioma
Chioma11mo ago
i referenced our last to chat to make sure i understood everything. i set it up incorrectly still?
Brody
Brody11mo ago
yes you have, here you are sending the the frontend from the backend
Chioma
Chioma11mo ago
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
Brody
Brody11mo ago
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?
Chioma
Chioma11mo ago
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
ng build --watch
ng build --watch
and
nodemon server.js
nodemon server.js
and run the project on localhost 8000 and this would show the front end in development i an running
ng build --watch --configuration development
ng build --watch --configuration development
and
railway run npm run start
railway run npm run start
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
Brody
Brody11mo ago
maybe reference our previous threads? i think youve asked this exact question and i gave you a breakdown
Chioma
Chioma11mo ago
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
Brody
Brody11mo ago
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.
Chioma
Chioma11mo ago
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
Brody
Brody11mo ago
nothing i have ever said prevents you from working locally at any point
Chioma
Chioma11mo ago
correct, but there was a lot of setup that altered that i didn't initially have
Brody
Brody11mo ago
this is true, but it was only initial setup
Chioma
Chioma11mo ago
yes! so i was trying to do the inital setup as we did before everything is what im trying to say
Brody
Brody11mo ago
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
Chioma
Chioma11mo ago
okay. so if i remove that get function is the setup correct?
Brody
Brody11mo ago
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
Chioma
Chioma11mo ago
i mirrored the other thread you helped me on
Chioma
Chioma11mo ago
GitHub
GitHub - ChiomaGrace/AngularApp
Contribute to ChiomaGrace/AngularApp development by creating an account on GitHub.
Brody
Brody11mo ago
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?
Chioma
Chioma11mo ago
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
Brody
Brody11mo ago
oh interesting can i see a screenshot of your railway project?
Chioma
Chioma11mo ago
Brody
Brody11mo ago
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?
Chioma
Chioma11mo ago
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?
Brody
Brody11mo ago
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 8000
Chioma
Chioma11mo ago
oh 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
Brody
Brody11mo ago
the backend does not need any variable prefixes, thats only a frontend thing
Chioma
Chioma11mo ago
got it adjusting now
Brody
Brody11mo ago
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
Chioma
Chioma11mo ago
the variable in my service is this. i just adjusted because of what we just discussed this is incorrect?
Brody
Brody11mo ago
yes it is
Chioma
Chioma11mo ago
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
Brody
Brody11mo ago
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_ prefixed
Chioma
Chioma11mo ago
yes! 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
Brody
Brody11mo ago
have you made all the suggestions here? im not seeing any changes on the repo?
Chioma
Chioma11mo ago
not yet. when i deleted the node module folder it created issues so i was going to put it back first
Brody
Brody11mo ago
you delete the node_modules folder from the repo, not locally
Chioma
Chioma11mo ago
this makes sense ha okay i deployed again w the changes Have some errors on Railway
Brody
Brody11mo ago
you have not yet removed the node_modules folder
Chioma
Chioma11mo ago
looks like i didnt commit the change. theyre gone now
Brody
Brody11mo ago
okay let me know if the build still fails
Chioma
Chioma11mo ago
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
Brody
Brody11mo ago
thats normal, you need to open the url of the frontend dev server to access the frontend, not the backends url
Chioma
Chioma11mo ago
as in run on localhost 4200?
Brody
Brody11mo ago
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 folder
Chioma
Chioma11mo ago
npm run start wasnt working so i was using
ng build --watch --configuration development
ng build --watch --configuration development
Brody
Brody11mo ago
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 locally
Chioma
Chioma11mo ago
sorry 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
Brody
Brody11mo ago
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
Chioma
Chioma11mo ago
it should go to the submitPokemon route
Brody
Brody11mo ago
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
Chioma
Chioma11mo ago
Brody
Brody11mo ago
why is everything so big?
Chioma
Chioma11mo ago
you requested for me to make it its own window no?
Brody
Brody11mo ago
yeah but youre all zoomed in, zoom out lol
Chioma
Chioma11mo ago
oh it's not zoomed in
Brody
Brody11mo ago
haha yes it is
Chioma
Chioma11mo ago
i just opened it in a new window as requested. i didn't zoom in on anything
Brody
Brody11mo ago
its zoomed in, but nevermind that. show me the failed request please
Chioma
Chioma11mo ago
how do i do that? what do u want to see on the network tab?
Brody
Brody11mo ago
the form submission api call
Chioma
Chioma11mo ago
nothing displays in the fetch/xhr tab
Brody
Brody11mo ago
then your frontend isnt even calling the api
Chioma
Chioma11mo ago
this is what i was trying to say here oh and i see the terminal is saying this
Brody
Brody11mo ago
im not an agular dev so im no help there
Chioma
Chioma11mo ago
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:
Brody
Brody11mo ago
that would be something ngx-env added but you have to focus on why your frontend is not making an api call
Chioma
Chioma11mo ago
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
Brody
Brody11mo ago
the import.meta.env part itself correct, i dont know about anything around that
Chioma
Chioma11mo ago
got it going to the back end now! just getting a 500 error though
Brody
Brody11mo ago
what are the logs saying on the backend? 500 is usually inductive of a code / config issue
Chioma
Chioma11mo ago
Brody
Brody11mo ago
yep just a code issue, looks like you got a little debugging to do
Want results from more Discord servers?
Add your server