Help setup a monorepo - Angular / Express
Hi! Hope everyone is doing well :). I am trying to deploy my Angular application on railway, but it immediately fails every time with the following error message:
[us-west1]
====================================
Banned Dependency Detected!
====================================
tgvc
tgvc
Please remove this dependency from your project to use it on Railway
In Visual Studios Code, I have done a global search in my application for "tgvc", and I do not see anything in my project folder. I am very lost on this error, so if I could have an guidance on solving this problem please it would be greatly appreciated. I would love to get my app deployed! My Github Repo is: https://github.com/ChiomaGrace/MyPortfolio/tree/master/src/app
Thank you in advance!!GitHub
MyPortfolio/src/app at master · ChiomaGrace/MyPortfolio
Contribute to ChiomaGrace/MyPortfolio development by creating an account on GitHub.
414 Replies
Project ID:
48355b37-3634-48fd-88d5-92176fc780ebMy project ID is 48355b37-3634-48fd-88d5-92176fc780eb
whats going on with your package.json??
its looking like a lock file
https://github.com/ChiomaGrace/MyPortfolio/blob/master/package.json
Hi Brody!
Thank you for replying so quickly. I don't know...
When I was initially trying to deploy, I was getting errors that I was looking up on StackOverflow to debug.
One of my errors was "TSC not found in Docker build"
I went to this Stack Overflow link (https://stackoverflow.com/questions/67199539/tsc-not-found-in-docker-build), and I ran the command the user Diogo suggested at the bottom:
RUN npm install --only=production && npm cache clean --force && npm install -g typescript
This completely broke my app locally, and I couldn't run it with either ng serve or ng build. I resolved that issue and can see my app locally again, but I fee like the command I ran then still caused unwanted changes. Do you think this is why I can't deploy now?Stack Overflow
TSC not found in Docker build
When building an image that needs to be compiled from typescript, I get this error.
sh: 1: tsc: not found
The command '/bin/sh -c npm run tsc' returned a non-zero code: 127
Here is the relevant ...
that command was not meant for you to run locally
Ah okay... I didn't know that. Do you by chance know how I can fix my package.json and get the deployment done successfully?
i was gonna say look at the github history, but the oldest comment still has the borked package.json
so give this package.json a try
its also probably worth it to delete your node_modules folder and run
npm installOkay I will do that right now and will return with an update shortly. Thank you!
Hi Brody!
I am back. The build failed again, but the error is different. The error is now:
[us-west1]
==============
Using Nixpacks
==============
context: 7de9f9017b9882db533fd8b598164067
Nixpacks build failed
╔═════════ Nixpacks v1.14.0 ════════╗
║ setup │ nodejs-16_x, npm-9_x ║
║───────────────────────────────────║
║ install │ npm ci ║
║───────────────────────────────────║
║ build │ npm run build ║
║───────────────────────────────────║
║ start │ ║
╚═══════════════════════════════════╝
Error: No start command could be found
copy the
Caddyfile and the nixpacks.toml from this repo, into yours
https://github.com/brody192/angular-template
make sure you change dist/my-portfolio to just dist
https://github.com/ChiomaGrace/MyPortfolio/blob/master/angular.json#L16Okay. I am doing that now
Would I need to change it to only dist here too? Or no
oh this is like a monorepo but instead of the two services being separate, they're both jumbled together
to properly deploy this on Railway please separate the frontend and backend into their own folders
I have made your suggested changes, and the error is the same
I think I do have my front end and back end separate!
you can keep them in the same repo, just put them into backend and frontend folders
Apologies. I don't think I understand
like so
okay. and i literally need to name these folders frontend and backend
will this disrupt ng serve if i want to work locally again?
well is that what this repo contains? a frontend and a backend?
yes i destrcutured
all my server files are in a server folder
no, you'd just end up running
ng serve while in the frontend folder
so please go ahead and organize everything into either a frontend folder or a backend folderokay i did not add those folders just yet. i rechecked that i put those two files you wanted me to grab from Github in the correct spot, and i did not. i moved them, and then railway tried to deploy again. this is now the error
you will continue to get errors from railway until your repo is in the correct state, please go ahead and remove the repo from the railway service, this can be done by clicking the little X on the repo in the service settings
okay thanks. I understand what you're saying! but i am trying to say the error is different it is something about docker build. Does this require a different solution than the one you were telling before?
at this stage the error is kinda irrelevant 🤣
please remove the repo from the service, you are going to be making a lot of changes to the repo and you don't need railway to rebuild on every change for now
okay that makes sense
let me do that now
after that please get your repo into this type of folder structure
Okay I have restructured, and I got this dialog popup. Should I say yes?
no
but from your screenshot, that's not even remotely close to the structure in the tree image
i guess i am not understanding then
my server folder has my routes, controller, and model
is that not the same as a backend folder?
in the root of your repo, you should have a backend folder and a frontend folder, nothing more
in the frontend folder you should have only the code for your frontend
in the backend folder you should have only the code for your backend
it is an angular app with express backend
yes it is
so when you say all front end code
all angular code goes in a frontend folder
all express code goes in a backend folder
that would need to end up within a frontend folder, yes
i just dont understand why i am doing it
"app" is all the front end
my server is all back end
angular and express are two different technologies, you currently have them all mashed together, you need to separate them into their respective folders or railway will never be able to properly deploy your apps, so please trust me on this I've been through this process many many times
okay Brody...I will do it!
I'll send a screenshot shortly to show you
you have removed the github repo from the service, so you can commit your changes directly to github so I can see it like that
okay
it is not allowing me to move the src folder that contains all my components/.ts files/etc
just move it around with the file explorer
okay i have moved everything
it's not happy with me when i open vs code though. should i push to github so you can see
push the changes
in the root of your repo, you should have a backend folder and a frontend folder, nothing more
in the frontend folder you should have only the code for your frontend
in the backend folder you should have only the code for your backend
Brody I am so confused haha. I am sorry. I don't understand how I didn't do that
Can you say the specific file you want in each folder please?
you should have a frontend and a backend folder, absolutely nothing more in the root
OH
your angular and express apps are two separate things, they need to be in separate folders
I did it now, but I am not seeing my backend folder...
https://github.com/ChiomaGrace/MyPortfolio/commit/193cd9af0b7f03de6d7bd861754ddc7cd29a1a7a
Even though this is how I have it in VS Code:
I see the backend folder in github
oh okay
does everything look structured how you asked now?sorry again for not understanding and thank you for being patient and helping me i appreciate it
there's this angular cache folder thing in the repo, go ahead and delete that
(there's still tons more to do, but one thing a time)
deleted
you'd need to delete it from the repo
would you like me to do that now? or add more to this change first
one thing at a time, so delete that cache folder thing
right on. i pushed that to repo now
so now let's focus on the backend
it's missing a .gitignore
you can use this for your .gitignore
https://www.toptal.com/developers/gitignore/api/node
haha you dont have to keep sending me the commits, you can just say done and ill refresh my browser
haha okay sorry about that
well now you are missing a package json, do an
npm init, then install all the packages this express app usesi need to do this in the backend folder now right? and not in the myportfolio folder
(we are still working in the backend folder)
I ran
npm init. In terms of installing all the packages would an npm install work for this, or is there something else needed?npm install express, etc etc
go ahead an install all librarys you are using for the backend only
i think that is just express and mongoose
sounds good
done
change this
https://github.com/ChiomaGrace/MyPortfolio/blob/master/backend/server.js#L4
to
const port = process.env.PORT || 3000;done
now locally while inside the backend folder, can you run the server?
npm run startsort of!
MongooseError: Mongoose.prototype.connect() no longer accepts a callback
i think i was using a older verison of mongoose
might have to install that one againokay yup i can run the node server now
this is a public repo
okay. do you want me to change it now?
its a short process to do it right
screenshot of your railway project please
i deleted it
shall i make another?
why lol
good question haha
sure make a another project
blank project
no github stuff yet
Like a template?
I always do github so not sure what to click from template
at the bottom
your screenshot was cut off
okay clicked empty project
what do you want a screenshot of the settings?
well i wanted the screenshot so i could know what you had going on, but i know whats going on in an empty project
now add a new empty service
okay! which one
wdym? empty service
my b. added
now give the project a name, and give the service a backend name
named my service. dont see where to name the project. does that not happen when i link the github..it doesnt take the name of the repo?
okay got them named. thank ya
go to atlas and regen your credentials
since you have leaked them
it's okay. i made the credential specifically for this portfolio and it isn't any data i am worried about it
we do things properly here 🙂
please regen your credentials
i like the name i gave it though. i want to keep it
wdym name? anyone can connect to this database and put in or delete data
youre saying how my password is exposed on the link route?
yes, its a nice password, but passwords should not be public
haha i understand
i want to keep my password. i'll hide it as youre suggesting
but its already out there
that's okay no one is looking at this
and the database is just for a contact form
there are hundreds of bots that scan public repos for credentials just like this, i know you like the password, but please change it
trust me please
when you have the new URL with the new password, add a service variable
MONGO_URL with your new mongo URLhere?
not quite
okay it's added. do i delete the one in my code now?
can i see a screenshot of the service variable? (keep it hidden)
it should be named
MONGO_URLyou did say that..my mistake - adjusted now
and that is the same url, just with a different password?
from atlas yeah
alright ill trust you
replace the url string with
process.env.MONGO_URL
https://github.com/ChiomaGrace/MyPortfolio/blob/master/backend/server.js#L9done
unquote that please
https://github.com/ChiomaGrace/MyPortfolio/blob/master/backend/server.js#L9
otherwise monngo db url from atlas can go there for local testing haha no it cant, this will stay process.env.MONGO_URL foreveroh
haha
thank you for correcting
do you have the railway cli installed?
i dont think so
go ahead and do that
https://docs.railway.app/develop/cli#installation
this isnt needed for your deployment to railway, but its now needed to continue developing locally, since we put that mogo url in railway we need a way to use it when running locally too, and the cli can do just that
okay!
before i run the
railway link command i wanted to ask you about this
it says access denied even though the web page that populated said success
should i ignore and continue?
what does
railway whoami say?unauthorized. i switched to an adminstrator command terminal and all is well now
link my portfolio?
yes
asking for me to select an environment now
prod
okay did that
i think it would be a good idea to replace the text "service" with "backend" in your service name
(in railway)
👍
railway servicesorry?
oh run the command?
yeah
okay done
railway run npm run start
it is running succesfully
awsome
see now you keep the mongo url safe in railway
yeah! thank you. i can see how that is a better and safer route
as long as you did change the password
can i link github now? or more to do
two more things, generate the domain, and set the root directory to
/backend
both of these are in the service settingsalso i forgot to mention
which i think is expected?
the server runs but my app isnt showing
good reminder
that is expected, yes, since this is just the backend
delete this line please
https://github.com/ChiomaGrace/MyPortfolio/blob/master/backend/server.js#L23
not needed for local either
oh really? my app didnt work when i didnt have that line locally
i know, but going forward you will open up another vscode instance in the frontend folder and run
npm run dev to run your angular app for local developmentdone and done
connect repo time
do you have postman or similar?
no i was using mongodb compass to see if my form was working
you may want to have something like postman or insomnia to test the backend without using the frontend
okay! i'll look into it
sorry this is another dumb question but how do i link my repo? since we did it from an empty project. sorry. ive always just clicked the deploy repo option the other times
thanks!
okay it deploy succesfully but it isnt showing my app
thats expected, this is just the backend
so test the backend out (this is what postman would be for)
oh okay. that would make sense why the domain isnt what i changed it to
okay i made a postman account. not too familar w this so how am i testing ?
tricky question
at a high level, you put your domain in and make api requests to it
and thats what you want me to do now right
gotta confirm your backend is operational somehow right
yup yup
so am i creating a worksapce or selecting datadog api collection?
honestly i don't know what any of that crap is for, I just use the desktop app
haha okay i'll download that real quick
this is what postman does, makes calls the your api and shows you the results
ive seen it before in tutorials ive watched! i just havent used it or know how to make it shake
looks like the desktop has the same display
postman is supposed to be helpful, why they got the welcome screen looking so complicated
workspaces > you may or may not see a my workspace, if you do click it, if you don't make a new workspace
clicked it! and here we are
little plus button, then start making api calls to your new backend
you may want to watch some tutorials for postman? since a postman tutorial is a bit out of scope here
cant i get my front end to work and then just use mongodb?
sure, why not, frontend time now!!
so make sure you can run the frontend locally
npm run devError: Cannot find module 'C:\Users\chioma.ubogagu.SV-NB-DEV-78\node_modules\@angular\cli\bin\ng.js'
run this right?
npm install -g @angular/clifirst off, we are now working on the frontend, this means you need to have a vscode window open in the frontend folder
i am there:)
delete your node_modules folder
deleted
npm installdone
does
npm run dev work now?no:/
same error
what does that even mean lol
no idea haha
i uninstalled and tried again same error
add this to your devDependencies
and then do
npm install and npm run dev againwoo! now it's working
on angular sever localhsot 4200
okay sounds good
add a blank railway service to the same project that has the backend
name it with an appropriate frontend related name
set the root directory to
/frontendokay. like so?
yep
you know service names can have spaces and capitals to make the names look more presentable?
okay! should i change both?
if you'd like to, all that really matters is that they have names to differentiate between the two service types
updated!
do i connect the repo on the front end now?
generate a domain
I should have caught this sooner, but you want the backend to have a backend specific domain name
yeah i was just about to ask
however you can give the frontend a nice and clean name, it doesn't have to say frontend in it
i need to change mine
cause the front end one is the one that'll be the actual web browsing url right?
right!
see, you're catching on!
haha thanks. i have a GREAT teacher 😀
okay i changed the domain and the root directoy on the front end is going to the backend
frontend is going to the backend?
yeah is that wrong?
the frontend service should have the root directory set to /frontend
understood..i adjusted now
okay I think it's time you add the repo
send the full build logs please https://bookmarklets.up.railway.app/log-downloader/
also I think you haven't pushed your changes to your repo from when we fixed running angular locally
ah youre right
i committed them
deployed
it deploy!
but it doesnt show my app haha
s'closeee
it's not setup to make requests to the backend railway domain
let me google how to do that real quick
thanks so much
i'll try to have a look too
there is a specfic way to do it that makes the dx much easier, i know how to do it for something built with vite but i dont know how to do it with angular yet
okay lets get the railway side of this done
add a service variable
BACKEND_URL ${{My Portfolio(Backend).RAILWAY_PUBLIC_DOMAIN}} to your frontendadded!
it's working!!
huh
nah
what is working?
can you send the frontend domain?
it deployed
https://chioma-grace-portfolio.up.railway.app/
what would be a page that makes a request to the express api?
that fails
yeah thats what where gonna fix
but first can you link me to a page that does make a request to the backend?
theres no requests there?
it's a form
that's the only thing i use express for
used* in this app
ah okay i see now
now have a look at this page, this is how we will tell your angular app to make requets to the railway backend domain when on railway, and to make requests to the locally running express app when running locally
https://www.digitalocean.com/community/tutorials/angular-environment-variables#adding-development-and-production-variables
and then in whatever file you call
/sendEmail you need to import environment
and then call environment.backendURL + '/sendEmail' instead
i think, like i said i havent done this in angular yetokay
i think i have added everything, but my main.ts doesnt like the changes
I don't do typescript lol so I'm not much help in that regard
ah okay
make the ts compiler happy is about all I can say
haha okay
one sec
okay i think ive made everything happy
have you swapped your backend calls to use the backendURL in the environment file?
yee
looks good
change this build script to
ng build --configuration=production
https://github.com/ChiomaGrace/MyPortfolio/blob/master/frontend/package.json#L7done
push the changes and see what happens
still a no go
one thing that is different
the code you told me to put here:
src/environment/environment.prod.ts
export const environment = {
production: true,
backendURL: process.env.BACKEND_URL
};
the code editor suggested/changed it to thissyntax
that should do the same thing
the frontend is still trying to make a request to
https://chioma-grace-portfolio.up.railway.app/sendEmailyes i noticed that
another thing i notced is im not seeing this console log when i run npm run dev
yes. sorry was trying to get a screenshot but youre fast haha
but yes that one
im stumped
i'll poke around
but i have a question about working locally
before i had two terminals running
one would watch my angular (ng buld --watch)
and then the other id run node(nodemon sevrer.js)
now that it is configured for deployment..when i run npm run dev
do i need to do something similar?
cause right now i only see my angular locally when i run npm run dev
how do i see my backend consle logs running that?
you'd have two vscode windows open in the frontend and backend folder, and in the frontends terminal you'd run
npm run dev and in the backends terminal you'd run railway run nodemon server.js
of course you could set a dev script for your backend to nodemon server.js and then do railway run npm run dev for the backend
and this environment.ts stuff was supposed to tell angular to call the locally running backend during development and call the backend running on railway when on railway without you having to switch over anything manually, but something isn't right with that part at the moment
and it's now 4am for me, so I'm gonna head to bed, send me any updates though!i was thinking the same. brody thanks sooo much for the help. that was so incredibly nice of you
i saw on your profile i can buy a coffee for ya, and i am definitely going to do that. i just really need some sleep first ha.
this chat i can come back to and reference right?
absolutely, and if you really insist on buying the coffee, at least wait until we have this up and running lol
haha okay deal. good night!
Hey Brody!
I just wanted to touch base . Today's my birthday so I'll be out, but when I have time to tackle this again (hopefully tomorrow)! I'll jump back in this chat. I just wanted to let you know:)
sounds good! happy birthday!
Thank you!
are you free to look at it a little more this evening?
working on it right now
https://github.com/brody192/MyPortfolio
oh nice! me too
thank u
dont do too much, i dont want there to be merge conflicts lol
ah okay sounds good
finding anything helpful?
im close
angular is strange
it is a tricky one
is it too late to switch to vite + vue
yeah but my next project i am switching
awsome
great news
wow!! you got it
okay so in your frontend and backend services go and disable the triggers
okay where is that option in settings? i dont see it
right at the top
okay they're both disabled
in the backends service variables add a variable
like this right?
yeah but replace the
<blah blah> with what it says to replace it withokay mine was called backend url
i replaced it now
screenshot please
not quite
delete the frontends variables
and set this on the backend
okay! good now?
yep
i deleted the front end variable too
for future reference
<frontend service name>
this is a service name
set a frontend service variable
like so right?
yep
now i make a pr to your repo with the fixes
what's a pr? like an edit?
pull request
where you update your repo with everything i did to fix it
okay so look over the changes and ask me about anything you are unsure about or just wanna know more about, once you are happy you can merge it
https://github.com/ChiomaGrace/MyPortfolio/pull/2
if i want to work on it locally can i still do so if you removed the app.use in the server?
yes you can, we talked about this before, see this message
i know but when i tried it wasnt showing me the app. the sever was running but it wasnt displaying anything
like this
haha thats normal, you have no route for
/once you run
npm run dev in your frontend you get this, you then go to this url and you get your angular app
i am a bit confused with that if i run on 4200
the back end wouldnt work on that localhost
right?
so thats why i was trying to see my app on 3000
we talked about that too
so see how you set this variable in railway? this is so your frontend knows what to call for the contact form, but locally you run
railway run npm run start so your backend runs on https://localhost:3000 and this file will tell your locally running frontend app to make requests to your locally running backend
i tested this all out, both locally and on railway, it just works without any fuss, trust me
okay
thanks for explaining~
!*
do you need clarification on anything?
no i think i am okay! i have seen a lot about cors but didnt know how to implement
i did that for you!
yes i saw!! thanks so much
its rudimentary, but its there and it works lol
haha hey that's all that is needed
so are you sure you still wanna use the database on atlas?
yup!
thats totally fine, im just curious, why use it over a mongo database from railway?
no reason really. you think i should change to that?
i just dont want to stay up too late is the thing
nope just wondering
so if you dont have any more questions about the pr, feel free to merge it
okay
let me do that now
after the pr has been merged, you can connect the branch back to the services
okay.
it crashed on me. should i just restart it as it's suggesting?
show me the logs please
it doesn't have any
click the red
ah i see the errow now
but i removed that from code...
i also merged your pr so shouldnt it be going off that as well
i removed that
redeploy
yeah it doesnt exist
https://github.com/ChiomaGrace/MyPortfolio/blob/master/backend/server/config/routes.js
do a redeploy
okay i redployed. it went succesfully!
i tested my form though and it still doesn't post successfully
can you send me each domain for those two services
yes
does this mean the pr didnt go correctly?
thats my repo, thats normal
domains please
it redeployed then went back to the old changes so weird
here are the domains:
yes they are using old code
remove the repo from both services entirely
then add it back
okay i did it
it didnt work still, but it is using the right code at least
should i change to the railway mongodb and see if it works w that?
no thats not it
this variable is wrong
you set it to frontend
please update it
My service name is showing but still erroring out
screenshot of the
NG_APP_BACKEND_URL please
looks fine, do you have any trailing or leading whitespace?
no
is the space an issue between my and portfolio?
okay can you please remove the
()name your services how i have them
that was it. it's working!!
YOU ARE AMAZING!!
i think i want to do what you said
use the railway mongo db. that's just getting the link from there right? here:
nope
so delete the current mongo variable from the backend, then add it back, railway auto completes it
really!?
so cool
let me try it
also you just leaked your db again
please go and reset
reset or delete it first?
reset it
okay it is reset
now i delete the mongo url variable right?
yep and replace it with the autofilled one
got it!
just as a sanity check, show me the mongo variable in the backend?
perfect
i need to get my local to have your changes now right?
last thing to do
is that a github fork
just pull the repo
oh yeah duh. okay i think i'm all good
you are a saint. thanks sooo much for your time
no problem 🙂
oh one weird thing i am seeing
yeah?
do i need to do a npm install?
yep beat me to it
youd need to do an npm install in both frontend and backend, might even be good to delete the node modules folder and then rerun that command
okay
my comp is doing a stupid you need to be admin even though i am
it does this time to time one sec
yeah that's very odd, I haven't gotten any of those kinds of errors before
it's something IT did to my work computer, and it's been giving me problems for awhile now. super annoying
but anyway thank you so much!! it looks like i'll have to ask them to do something for the admin thing so i can delete and install the package but looks like it's all good to go besides that!!
i agree, think id just reset the computer at that point if it happened to me lol
awsome!
heading to bed but will def purchase a coffee for you tom!! really really appreciaive of your time
thank you 🙂
okay finally deleted the node modules and ran npm install
so now i just use
railway run npm start right?for your backend, yeah
the frontend doesn't need to be ran with the railway cli
front end still
ng build --watch ?that's just
npm run devright sorry. it's just very different so trying to grasp. before everything would work on localhost 3000 and i could see my angular through that cause of app.use that was calling my dist folder
i dont understand how this is working fully
angular is running its own server for you
and the form should work on it still?
as long as you have the backend running in a separate vscode window, yep! it should all just work
this is what i have
i think it is working but issue w monogoose
this cause i changed the url?
I had no issues locally, what issues do you have?
i failed my form on purpose to see if my validations are working
the deployed verision it works great
locally it is doing this
I saw those on railway too
just simple code issues
this is my first time doing anything with angular, so what I've already done is about where my knowledge on the subject of angular runs out unfortunately
i hear ya!
i will poke at it. it's just weird cause it worked before deployment, works in deployment, but then now locally it is acting up
i might leave it honestly. i just need to make a few styling adjustments in some places
if that's good with you then thats great, it is just some code issues, I'm sure you would be able to get them ironed out
youre right it was a quick fix haha
okay thank you thank you thank!
i'll check back in tom to make sure you got the coffee payment thingy. do i close this ticket now?
I have marked this thread as solved, nothing you need to do 🙂