✋｜help

Help setup a monorepo - Angular / Express

Cchioma_26529_93454

9/10/2023

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!!

Cchioma_26529_93454

9/10/2023

My project ID is 48355b37-3634-48fd-88d5-92176fc780eb

Bbrody192

9/10/2023

whats going on with your package.json??
its looking like a lock file
https://github.com/ChiomaGrace/MyPortfolio/blob/master/package.json

Cchioma_26529_93454

9/10/2023

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?

Bbrody192

9/10/2023

that command was not meant for you to run locally

Cchioma_26529_93454

9/10/2023

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?

Bbrody192

9/10/2023

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

{
  "name": "my-portfolio",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "dev": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "dependencies": {
    "@angular/core": "^16.2.4",
    "@angular/forms": "^16.2.4",
    "@angular/platform-browser-dynamic": "^16.2.4",
    "@angular/router": "^16.2.4",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "font-awesome": "^4.7.0",
    "jquery": "^3.7.1",
    "router": "^1.3.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.2.1",
    "@fortawesome/fontawesome-free": "^6.4.2",
    "@types/jquery": "^3.5.18"
  }
}

its also probably worth it to delete your node_modules folder and run npm install

Cchioma_26529_93454

9/10/2023

Okay I will do that right now and will return with an update shortly. Thank you!

Cchioma_26529_93454

9/10/2023

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

Bbrody192

9/10/2023

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#L16

Cchioma_26529_93454

9/10/2023

Okay. I am doing that now

Cchioma_26529_93454

9/10/2023

Would I need to change it to only dist here too? Or no

Bbrody192

9/10/2023

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

Cchioma_26529_93454

9/10/2023

I have made your suggested changes, and the error is the same
I think I do have my front end and back end separate!

Bbrody192

9/10/2023

you can keep them in the same repo, just put them into backend and frontend folders

Cchioma_26529_93454

9/10/2023

Apologies. I don't think I understand

Bbrody192

9/10/2023

Bbrody192

9/10/2023

like so

Cchioma_26529_93454

9/10/2023

okay. and i literally need to name these folders frontend and backend
will this disrupt ng serve if i want to work locally again?

Bbrody192

9/10/2023

well is that what this repo contains? a frontend and a backend?

Cchioma_26529_93454

9/10/2023

yes i destrcutured
all my server files are in a server folder

Bbrody192

9/10/2023

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 folder

Cchioma_26529_93454

9/10/2023

okay 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

Cchioma_26529_93454

9/10/2023

Bbrody192

9/10/2023

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

Cchioma_26529_93454

9/10/2023

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?

Bbrody192

9/10/2023

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

Cchioma_26529_93454

9/10/2023

okay that makes sense
let me do that now

Bbrody192

9/10/2023

after that please get your repo into this type of folder structure

Cchioma_26529_93454

9/10/2023

Okay I have restructured, and I got this dialog popup. Should I say yes?

Cchioma_26529_93454

9/10/2023

Bbrody192

9/10/2023

no
but from your screenshot, that's not even remotely close to the structure in the tree image

Cchioma_26529_93454

9/10/2023

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?

Bbrody192

9/10/2023

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

Cchioma_26529_93454

9/10/2023

it is an angular app with express backend

Bbrody192

9/10/2023

yes it is

Cchioma_26529_93454

9/10/2023

so when you say all front end code

Bbrody192

9/10/2023

all angular code goes in a frontend folder
all express code goes in a backend folder

Cchioma_26529_93454

9/10/2023

Bbrody192

9/10/2023

that would need to end up within a frontend folder, yes

Cchioma_26529_93454

9/10/2023

i just dont understand why i am doing it
"app" is all the front end
my server is all back end

Bbrody192

9/10/2023

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

Cchioma_26529_93454

9/10/2023

okay Brody...I will do it!
I'll send a screenshot shortly to show you

Bbrody192

9/10/2023

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

Cchioma_26529_93454

9/10/2023

okay
it is not allowing me to move the src folder that contains all my components/.ts files/etc

Cchioma_26529_93454

9/10/2023

Bbrody192

9/10/2023

just move it around with the file explorer

Cchioma_26529_93454

9/10/2023

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

Bbrody192

9/10/2023

push the changes

Cchioma_26529_93454

9/10/2023

okay!
https://github.com/ChiomaGrace/MyPortfolio/commit/09753bb5ca43a4ada1f5125470ff8d12afca6f49

Bbrody192

9/10/2023

Cchioma_26529_93454

9/10/2023

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?

Bbrody192

9/10/2023

you should have a frontend and a backend folder, absolutely nothing more in the root

Cchioma_26529_93454

9/10/2023

Bbrody192

9/10/2023

your angular and express apps are two separate things, they need to be in separate folders

Cchioma_26529_93454

9/10/2023

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:

Cchioma_26529_93454

9/10/2023

Bbrody192

9/10/2023

I see the backend folder in github

Cchioma_26529_93454

9/10/2023

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

Bbrody192

9/10/2023

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)

Cchioma_26529_93454

9/10/2023

deleted

Bbrody192

9/10/2023

you'd need to delete it from the repo

Cchioma_26529_93454

9/10/2023

would you like me to do that now? or add more to this change first

Bbrody192

9/10/2023

one thing at a time, so delete that cache folder thing

Cchioma_26529_93454

9/10/2023

right on. i pushed that to repo now

Bbrody192

9/10/2023

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

Cchioma_26529_93454

9/10/2023

okay!
https://github.com/ChiomaGrace/MyPortfolio/commit/28b70f4fbf0f0ccfe3c27967434f06c6e9cf50d5

Bbrody192

9/10/2023

haha you dont have to keep sending me the commits, you can just say done and ill refresh my browser

Cchioma_26529_93454

9/10/2023

https://tenor.com/view/alvin-and-the-chipmunks-alvin-whoops-my-bad-oops-gif-21789210
haha okay sorry about that

Bbrody192

9/10/2023

well now you are missing a package json, do an npm init, then install all the packages this express app uses

Cchioma_26529_93454

9/10/2023

i need to do this in the backend folder now right? and not in the myportfolio folder

Bbrody192

9/10/2023

(we are still working in the backend folder)

Cchioma_26529_93454

9/10/2023

I ran npm init. In terms of installing all the packages would an npm install work for this, or is there something else needed?

Bbrody192

9/10/2023

npm install express, etc etc
go ahead an install all librarys you are using for the backend only

Cchioma_26529_93454

9/10/2023

i think that is just express and mongoose

Bbrody192

9/10/2023

sounds good

Cchioma_26529_93454

9/10/2023

done

Bbrody192

9/10/2023

change this
https://github.com/ChiomaGrace/MyPortfolio/blob/master/backend/server.js#L4
to
const port = process.env.PORT || 3000;

Cchioma_26529_93454

9/10/2023

done

Bbrody192

9/10/2023

now locally while inside the backend folder, can you run the server?
npm run start

Cchioma_26529_93454

9/10/2023

sort 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 again

Bbrody192

9/10/2023

uh
https://github.com/ChiomaGrace/MyPortfolio/blob/master/backend/server.js#L9

Cchioma_26529_93454

9/10/2023

okay yup i can run the node server now

Bbrody192

9/10/2023

this is a public repo

Cchioma_26529_93454

9/10/2023

okay. do you want me to change it now?

Bbrody192

9/10/2023

its a short process to do it right
screenshot of your railway project please

Cchioma_26529_93454

9/10/2023

i deleted it
shall i make another?

Bbrody192

9/10/2023

why lol

Cchioma_26529_93454

9/10/2023

good question haha

Bbrody192

9/10/2023

sure make a another project
blank project
no github stuff yet

Cchioma_26529_93454

9/10/2023

Like a template?

Cchioma_26529_93454

9/10/2023

Cchioma_26529_93454

9/10/2023

I always do github so not sure what to click from template

Bbrody192

9/10/2023

at the bottom

Bbrody192

9/10/2023

your screenshot was cut off

Cchioma_26529_93454

9/10/2023

okay clicked empty project
what do you want a screenshot of the settings?

Bbrody192

9/10/2023

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

Cchioma_26529_93454

9/10/2023

okay! which one

Bbrody192

9/10/2023

wdym? empty service

Bbrody192

9/10/2023

Cchioma_26529_93454

9/10/2023

my b. added

Bbrody192

9/10/2023

now give the project a name, and give the service a backend name

Cchioma_26529_93454

9/10/2023

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?

Cchioma_26529_93454

9/10/2023

Bbrody192

9/10/2023

Cchioma_26529_93454

9/10/2023

okay got them named. thank ya

Bbrody192

9/10/2023

go to atlas and regen your credentials
since you have leaked them

Cchioma_26529_93454

9/10/2023

it's okay. i made the credential specifically for this portfolio and it isn't any data i am worried about it

Bbrody192

9/10/2023

we do things properly here 🙂
please regen your credentials

Cchioma_26529_93454

9/10/2023

i like the name i gave it though. i want to keep it

Bbrody192

9/10/2023

wdym name? anyone can connect to this database and put in or delete data

Cchioma_26529_93454

9/10/2023

youre saying how my password is exposed on the link route?

Bbrody192

9/10/2023

yes, its a nice password, but passwords should not be public

Cchioma_26529_93454

9/10/2023

haha i understand
i want to keep my password. i'll hide it as youre suggesting

Bbrody192

9/10/2023

but its already out there

Cchioma_26529_93454

9/10/2023

that's okay no one is looking at this
and the database is just for a contact form

Bbrody192

9/10/2023

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 URL

Cchioma_26529_93454

9/10/2023

here?

Bbrody192

9/10/2023

not quite

Cchioma_26529_93454

9/10/2023

okay it's added. do i delete the one in my code now?

Bbrody192

9/10/2023

can i see a screenshot of the service variable? (keep it hidden)

Cchioma_26529_93454

9/10/2023

Bbrody192

9/10/2023

it should be named MONGO_URL

Cchioma_26529_93454

9/10/2023

you did say that..my mistake - adjusted now

Cchioma_26529_93454

9/10/2023

Bbrody192

9/10/2023

and that is the same url, just with a different password?

Cchioma_26529_93454

9/10/2023

from atlas yeah

Bbrody192

9/10/2023

alright ill trust you
replace the url string with process.env.MONGO_URL
https://github.com/ChiomaGrace/MyPortfolio/blob/master/backend/server.js#L9

Cchioma_26529_93454

9/10/2023

done

Bbrody192

9/10/2023

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 forever

Cchioma_26529_93454

9/10/2023

oh
haha
thank you for correcting

Bbrody192

9/10/2023

do you have the railway cli installed?

Cchioma_26529_93454

9/10/2023

i dont think so

Bbrody192

9/10/2023

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

Cchioma_26529_93454

9/10/2023

okay!
before i run the railway link command i wanted to ask you about this

Cchioma_26529_93454

9/10/2023

Cchioma_26529_93454

9/10/2023

it says access denied even though the web page that populated said success
should i ignore and continue?

Cchioma_26529_93454

9/10/2023

Bbrody192

9/10/2023

what does railway whoami say?

Cchioma_26529_93454

9/10/2023

unauthorized. i switched to an adminstrator command terminal and all is well now
link my portfolio?

Cchioma_26529_93454

9/10/2023

Bbrody192

9/10/2023

yes

Cchioma_26529_93454

9/10/2023

asking for me to select an environment now

Bbrody192

9/10/2023

prod

Cchioma_26529_93454

9/10/2023

okay did that

Cchioma_26529_93454

9/10/2023

Bbrody192

9/10/2023

i think it would be a good idea to replace the text "service" with "backend" in your service name
(in railway)

Cchioma_26529_93454

9/10/2023

👍

Bbrody192

9/10/2023

railway service

Cchioma_26529_93454

9/10/2023

sorry?
oh run the command?

Bbrody192

9/10/2023

yeah

Cchioma_26529_93454

9/10/2023

okay done

Bbrody192

9/10/2023

railway run npm run start

run          Run a local command using variables from the active environment

Cchioma_26529_93454

9/10/2023

it is running succesfully

Bbrody192

9/10/2023

awsome
see now you keep the mongo url safe in railway

Cchioma_26529_93454

9/10/2023

yeah! thank you. i can see how that is a better and safer route

Bbrody192

9/10/2023

as long as you did change the password

Cchioma_26529_93454

9/10/2023

can i link github now? or more to do

Bbrody192

9/10/2023

two more things, generate the domain, and set the root directory to /backend
both of these are in the service settings

Cchioma_26529_93454

9/10/2023

also i forgot to mention
which i think is expected?
the server runs but my app isnt showing

Bbrody192

9/10/2023

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

this connects/serves static files locally not needed for deployment

not needed for local either

Cchioma_26529_93454

9/10/2023

oh really? my app didnt work when i didnt have that line locally

Bbrody192

9/10/2023

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 development

Cchioma_26529_93454

9/10/2023

done and done

Bbrody192

9/10/2023

connect repo time

Cchioma_26529_93454

9/10/2023

https://tenor.com/view/surprised-sorprendido-shaquille-oneal-gif-23222312

Bbrody192

9/10/2023

do you have postman or similar?

Cchioma_26529_93454

9/10/2023

no i was using mongodb compass to see if my form was working

Bbrody192

9/10/2023

you may want to have something like postman or insomnia to test the backend without using the frontend

Cchioma_26529_93454

9/10/2023

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

Bbrody192

9/10/2023

Cchioma_26529_93454

9/10/2023

thanks!
okay it deploy succesfully but it isnt showing my app

Bbrody192

9/10/2023

thats expected, this is just the backend
so test the backend out (this is what postman would be for)

Cchioma_26529_93454

9/10/2023

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 ?

Bbrody192

9/10/2023

tricky question
at a high level, you put your domain in and make api requests to it

Cchioma_26529_93454

9/10/2023

and thats what you want me to do now right

Bbrody192

9/10/2023

gotta confirm your backend is operational somehow right

Cchioma_26529_93454

9/10/2023

yup yup
so am i creating a worksapce or selecting datadog api collection?

Cchioma_26529_93454

9/10/2023

Bbrody192

9/10/2023

honestly i don't know what any of that crap is for, I just use the desktop app

Cchioma_26529_93454

9/10/2023

haha okay i'll download that real quick

Bbrody192

9/10/2023

Bbrody192

9/10/2023

this is what postman does, makes calls the your api and shows you the results

Cchioma_26529_93454

9/10/2023

ive seen it before in tutorials ive watched! i just havent used it or know how to make it shake

Cchioma_26529_93454

9/10/2023

looks like the desktop has the same display

Bbrody192

9/10/2023

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

Cchioma_26529_93454

9/10/2023

clicked it! and here we are

Cchioma_26529_93454

9/10/2023

Bbrody192

9/10/2023

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

Cchioma_26529_93454

9/10/2023

cant i get my front end to work and then just use mongodb?

Bbrody192

9/10/2023

sure, why not, frontend time now!!
so make sure you can run the frontend locally
npm run dev

Cchioma_26529_93454

9/10/2023

Error: 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/cli

Bbrody192

9/10/2023

first off, we are now working on the frontend, this means you need to have a vscode window open in the frontend folder

Cchioma_26529_93454

9/10/2023

i am there:)

Bbrody192

9/10/2023

delete your node_modules folder

Cchioma_26529_93454

9/10/2023

deleted

Bbrody192

9/10/2023

npm install

Cchioma_26529_93454

9/10/2023

done

Bbrody192

9/10/2023

does npm run dev work now?

Cchioma_26529_93454

9/10/2023

no:/
same error

Cchioma_26529_93454

9/10/2023

Bbrody192

9/10/2023

what does that even mean lol

Cchioma_26529_93454

9/10/2023

no idea haha
i uninstalled and tried again same error

Bbrody192

9/10/2023

add this to your devDependencies

    "@angular/cli": "~16.1.8",
    "@angular/compiler-cli": "^16.1.8",

and then do npm install and npm run dev again

Cchioma_26529_93454

9/10/2023

woo! now it's working
on angular sever localhsot 4200

Bbrody192

9/10/2023

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 /frontend

Cchioma_26529_93454

9/10/2023

okay. like so?

Bbrody192

9/10/2023

yep
you know service names can have spaces and capitals to make the names look more presentable?

Cchioma_26529_93454

9/10/2023

okay! should i change both?

Bbrody192

9/10/2023

if you'd like to, all that really matters is that they have names to differentiate between the two service types

Cchioma_26529_93454

9/10/2023

updated!
do i connect the repo on the front end now?

Bbrody192

9/10/2023

generate a domain
I should have caught this sooner, but you want the backend to have a backend specific domain name

Cchioma_26529_93454

9/10/2023

yeah i was just about to ask

Bbrody192

9/10/2023

however you can give the frontend a nice and clean name, it doesn't have to say frontend in it

Cchioma_26529_93454

9/10/2023

i need to change mine
cause the front end one is the one that'll be the actual web browsing url right?

Bbrody192

9/10/2023

right!
see, you're catching on!

Cchioma_26529_93454

9/10/2023

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

Bbrody192

9/10/2023

frontend is going to the backend?

Cchioma_26529_93454

9/10/2023

yeah is that wrong?

Cchioma_26529_93454

9/10/2023

Bbrody192

9/10/2023

the frontend service should have the root directory set to /frontend

Cchioma_26529_93454

9/10/2023

understood..i adjusted now

Bbrody192

9/10/2023

okay I think it's time you add the repo

Cchioma_26529_93454

9/10/2023

Bbrody192

9/10/2023

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

Cchioma_26529_93454

9/10/2023

ah youre right
i committed them
deployed
it deploy!
but it doesnt show my app haha
s'closeee

Bbrody192

9/10/2023

it's not setup to make requests to the backend railway domain
let me google how to do that real quick

Cchioma_26529_93454

9/10/2023

thanks so much
i'll try to have a look too

Bbrody192

9/10/2023

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

Cchioma_26529_93454

9/10/2023

https://tenor.com/view/iamproudofyou-my-hero-gif-18489622

Bbrody192

9/10/2023

add a service variable BACKEND_URL ${{My Portfolio(Backend).RAILWAY_PUBLIC_DOMAIN}} to your frontend

Cchioma_26529_93454

9/10/2023

added!
it's working!!

Bbrody192

9/10/2023

huh
nah

Cchioma_26529_93454

9/10/2023

https://tenor.com/view/the-pursuit-of-happiness-will-smith-cry-tears-of-joy-happy-gif-10725846

Bbrody192

9/10/2023

what is working?
can you send the frontend domain?

Cchioma_26529_93454

9/10/2023

it deployed
https://chioma-grace-portfolio.up.railway.app/

Bbrody192

9/10/2023

what would be a page that makes a request to the express api?

Cchioma_26529_93454

9/10/2023

that fails

Bbrody192

9/10/2023

yeah thats what where gonna fix
but first can you link me to a page that does make a request to the backend?

Cchioma_26529_93454

9/10/2023

sure!
https://chioma-grace-portfolio.up.railway.app/contact

Bbrody192

9/10/2023

theres no requests there?

Cchioma_26529_93454

9/10/2023

it's a form
that's the only thing i use express for
used* in this app

Bbrody192

9/10/2023

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

// src/environment/environment.ts
export const environment = {
  production: false,
  backendURL: 'http://127.0.0.1:3000'
};

// src/environment/environment.prod.ts
export const environment = {
  production: true,
  backendURL: process.env.BACKEND_URL
};

and then in whatever file you call /sendEmail you need to import environment

import { environment } from '../environments/environment';

and then call environment.backendURL + '/sendEmail' instead
i think, like i said i havent done this in angular yet

Cchioma_26529_93454

9/10/2023

okay
i think i have added everything, but my main.ts doesnt like the changes

Bbrody192

9/10/2023

I don't do typescript lol so I'm not much help in that regard

Cchioma_26529_93454

9/10/2023

ah okay

Bbrody192

9/10/2023

make the ts compiler happy is about all I can say

Cchioma_26529_93454

9/10/2023

haha okay
one sec
okay i think ive made everything happy

Bbrody192

9/10/2023

have you swapped your backend calls to use the backendURL in the environment file?

Cchioma_26529_93454

9/10/2023

yee

Cchioma_26529_93454

9/10/2023

Bbrody192

9/10/2023

looks good
change this build script to ng build --configuration=production
https://github.com/ChiomaGrace/MyPortfolio/blob/master/frontend/package.json#L7

Cchioma_26529_93454

9/10/2023

done

Bbrody192

9/10/2023

push the changes and see what happens

Cchioma_26529_93454

9/10/2023

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 this

Cchioma_26529_93454

9/10/2023

syntax

Bbrody192

9/10/2023

that should do the same thing
the frontend is still trying to make a request to https://chioma-grace-portfolio.up.railway.app/sendEmail

Cchioma_26529_93454

9/10/2023

yes i noticed that
another thing i notced is im not seeing this console log when i run npm run dev

Bbrody192

9/10/2023

this log? https://github.com/ChiomaGrace/MyPortfolio/blob/6b45f52550ed6add11e5289470e2fbec0e9ad664/frontend/src/app/app.component.ts#L29

Cchioma_26529_93454

9/10/2023

yes. sorry was trying to get a screenshot but youre fast haha
but yes that one

Bbrody192

9/10/2023

im stumped

Cchioma_26529_93454

9/10/2023

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?

Bbrody192

9/10/2023

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!

Cchioma_26529_93454

9/10/2023

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?

Bbrody192

9/10/2023

absolutely, and if you really insist on buying the coffee, at least wait until we have this up and running lol

Cchioma_26529_93454

9/10/2023

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:)

Bbrody192

9/10/2023

sounds good! happy birthday!

Cchioma_26529_93454

9/12/2023

Thank you!
are you free to look at it a little more this evening?

Bbrody192

9/12/2023

working on it right now
https://github.com/brody192/MyPortfolio

Cchioma_26529_93454

9/12/2023

oh nice! me too
thank u

Bbrody192

9/12/2023

dont do too much, i dont want there to be merge conflicts lol

Cchioma_26529_93454

9/12/2023

ah okay sounds good
finding anything helpful?

Bbrody192

9/12/2023

im close
angular is strange

Cchioma_26529_93454

9/12/2023

it is a tricky one

Bbrody192

9/12/2023

is it too late to switch to vite + vue

Cchioma_26529_93454

9/12/2023

yeah but my next project i am switching

Bbrody192

9/12/2023

awsome
great news

Bbrody192

9/12/2023

Cchioma_26529_93454

9/12/2023

wow!! you got it
https://tenor.com/view/despicable-me-minion-minions-clap-clapping-gif-561643868428822739

Bbrody192

9/12/2023

okay so in your frontend and backend services go and disable the triggers

Cchioma_26529_93454

9/12/2023

okay where is that option in settings? i dont see it

Bbrody192

9/12/2023

right at the top

Cchioma_26529_93454

9/12/2023

okay they're both disabled

Bbrody192

9/12/2023

in the backends service variables add a variable

FRONTEND_ORIGIN=https://${{<frontend service name>.RAILWAY_PUBLIC_DOMAIN}}

Cchioma_26529_93454

9/12/2023

like this right?

Bbrody192

9/12/2023

yeah but replace the <blah blah> with what it says to replace it with

Cchioma_26529_93454

9/12/2023

okay mine was called backend url
i replaced it now

Bbrody192

9/12/2023

screenshot please

Cchioma_26529_93454

9/12/2023

Cchioma_26529_93454

9/12/2023

Bbrody192

9/12/2023

not quite
delete the frontends variables
and set this on the backend

FRONTEND_ORIGIN=https://${{My Portfolio(Frontend).RAILWAY_PUBLIC_DOMAIN}}

Cchioma_26529_93454

9/12/2023

okay! good now?

Cchioma_26529_93454

9/12/2023

Bbrody192

9/12/2023

yep

Cchioma_26529_93454

9/12/2023

i deleted the front end variable too

Bbrody192

9/12/2023

for future reference
<frontend service name>
this is a service name

Bbrody192

9/12/2023

set a frontend service variable

NG_APP_BACKEND_URL=https://${{<backend service name>.RAILWAY_PUBLIC_DOMAIN}}

Cchioma_26529_93454

9/12/2023

like so right?

Cchioma_26529_93454

9/12/2023

Bbrody192

9/12/2023

yep
now i make a pr to your repo with the fixes

Cchioma_26529_93454

9/12/2023

what's a pr? like an edit?

Bbrody192

9/12/2023

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

Cchioma_26529_93454

9/12/2023

if i want to work on it locally can i still do so if you removed the app.use in the server?

Bbrody192

9/12/2023

yes you can, we talked about this before, see this message

Cchioma_26529_93454

9/12/2023

i know but when i tried it wasnt showing me the app. the sever was running but it wasnt displaying anything

Cchioma_26529_93454

9/12/2023

like this

Bbrody192

9/12/2023

haha thats normal, you have no route for /

Bbrody192

9/12/2023

once you run npm run dev in your frontend you get this, you then go to this url and you get your angular app

Bbrody192

9/12/2023

Cchioma_26529_93454

9/12/2023

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

Bbrody192

9/12/2023

we talked about that too

Bbrody192

9/12/2023

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

Bbrody192

9/12/2023

i tested this all out, both locally and on railway, it just works without any fuss, trust me

Cchioma_26529_93454

9/12/2023

okay
thanks for explaining~
!*

Bbrody192

9/12/2023

do you need clarification on anything?

Cchioma_26529_93454

9/12/2023

no i think i am okay! i have seen a lot about cors but didnt know how to implement

Bbrody192

9/12/2023

i did that for you!

Cchioma_26529_93454

9/12/2023

yes i saw!! thanks so much

Bbrody192

9/12/2023

its rudimentary, but its there and it works lol

Cchioma_26529_93454

9/12/2023

haha hey that's all that is needed

Bbrody192

9/12/2023

so are you sure you still wanna use the database on atlas?

Cchioma_26529_93454

9/12/2023

yup!

Bbrody192

9/12/2023

thats totally fine, im just curious, why use it over a mongo database from railway?

Cchioma_26529_93454

9/12/2023

no reason really. you think i should change to that?
i just dont want to stay up too late is the thing

Bbrody192

9/12/2023

nope just wondering
so if you dont have any more questions about the pr, feel free to merge it

Cchioma_26529_93454

9/12/2023

okay
let me do that now

Bbrody192

9/12/2023

after the pr has been merged, you can connect the branch back to the services

Bbrody192

9/12/2023

Cchioma_26529_93454

9/12/2023

okay.

Cchioma_26529_93454

9/12/2023

it crashed on me. should i just restart it as it's suggesting?

Bbrody192

9/12/2023

show me the logs please

Cchioma_26529_93454

9/12/2023

it doesn't have any

Cchioma_26529_93454

9/12/2023

Bbrody192

9/12/2023

click the red

Cchioma_26529_93454

9/12/2023

ah i see the errow now

Cchioma_26529_93454

9/12/2023

Cchioma_26529_93454

9/12/2023

but i removed that from code...
i also merged your pr so shouldnt it be going off that as well

Bbrody192

9/12/2023

i removed that
redeploy
yeah it doesnt exist
https://github.com/ChiomaGrace/MyPortfolio/blob/master/backend/server/config/routes.js
do a redeploy

Cchioma_26529_93454

9/12/2023

okay i redployed. it went succesfully!
i tested my form though and it still doesn't post successfully

Cchioma_26529_93454

9/12/2023

Bbrody192

9/12/2023

can you send me each domain for those two services

Cchioma_26529_93454

9/12/2023

yes
does this mean the pr didnt go correctly?

Cchioma_26529_93454

9/12/2023

Bbrody192

9/12/2023

thats my repo, thats normal
domains please

Cchioma_26529_93454

9/12/2023

it redeployed then went back to the old changes so weird
here are the domains:

Bbrody192

9/12/2023

yes they are using old code

Cchioma_26529_93454

9/12/2023

Bbrody192

9/12/2023

remove the repo from both services entirely

Bbrody192

9/12/2023

then add it back

Cchioma_26529_93454

9/12/2023

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?

Bbrody192

9/12/2023

no thats not it
this variable is wrong
you set it to frontend
please update it

NG_APP_BACKEND_URL=https://${{<backend service name>.RAILWAY_PUBLIC_DOMAIN}}

Cchioma_26529_93454

9/12/2023

Cchioma_26529_93454

9/12/2023

My service name is showing but still erroring out

Bbrody192

9/12/2023

screenshot of the NG_APP_BACKEND_URL please

Cchioma_26529_93454

9/12/2023

Bbrody192

9/12/2023

looks fine, do you have any trailing or leading whitespace?

Cchioma_26529_93454

9/12/2023

no
is the space an issue between my and portfolio?

Bbrody192

9/12/2023

okay can you please remove the ()

Bbrody192

9/12/2023

name your services how i have them

Cchioma_26529_93454

9/12/2023

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:

Cchioma_26529_93454

9/12/2023

Bbrody192

9/12/2023

nope
so delete the current mongo variable from the backend, then add it back, railway auto completes it

Cchioma_26529_93454

9/12/2023

really!?
so cool
let me try it

Bbrody192

9/12/2023

also you just leaked your db again

Bbrody192

9/12/2023

please go and reset

Cchioma_26529_93454

9/12/2023

reset or delete it first?

Bbrody192

9/12/2023

reset it

Cchioma_26529_93454

9/12/2023

okay it is reset
now i delete the mongo url variable right?

Bbrody192

9/12/2023

yep and replace it with the autofilled one

Bbrody192

9/12/2023

Cchioma_26529_93454

9/12/2023

got it!

Cchioma_26529_93454

9/12/2023

Bbrody192

9/12/2023

just as a sanity check, show me the mongo variable in the backend?

Cchioma_26529_93454

9/12/2023

Bbrody192

9/12/2023

perfect

Cchioma_26529_93454

9/12/2023

i need to get my local to have your changes now right?
last thing to do
is that a github fork

Bbrody192

9/12/2023

just pull the repo

Cchioma_26529_93454

9/12/2023

oh yeah duh. okay i think i'm all good
you are a saint. thanks sooo much for your time

Bbrody192

9/12/2023

no problem 🙂

Cchioma_26529_93454

9/12/2023

oh one weird thing i am seeing

Bbrody192

9/12/2023

yeah?

Cchioma_26529_93454

9/12/2023

Cchioma_26529_93454

9/12/2023

Cchioma_26529_93454

9/12/2023

do i need to do a npm install?

Bbrody192

9/12/2023

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

Cchioma_26529_93454

9/12/2023

okay
my comp is doing a stupid you need to be admin even though i am
it does this time to time one sec

Bbrody192

9/12/2023

yeah that's very odd, I haven't gotten any of those kinds of errors before

Cchioma_26529_93454

9/12/2023

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!!

Bbrody192

9/12/2023

i agree, think id just reset the computer at that point if it happened to me lol
awsome!

Cchioma_26529_93454

9/12/2023

heading to bed but will def purchase a coffee for you tom!! really really appreciaive of your time

Bbrody192

9/12/2023

thank you 🙂

Cchioma_26529_93454

9/12/2023

okay finally deleted the node modules and ran npm install
so now i just use railway run npm start right?

Bbrody192

9/12/2023

for your backend, yeah
the frontend doesn't need to be ran with the railway cli

Cchioma_26529_93454

9/12/2023

front end still ng build --watch ?

Bbrody192

9/12/2023

that's just npm run dev

Cchioma_26529_93454

9/12/2023

right 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

Bbrody192

9/12/2023

angular is running its own server for you

Cchioma_26529_93454

9/12/2023

and the form should work on it still?

Bbrody192

9/12/2023

as long as you have the backend running in a separate vscode window, yep! it should all just work

Cchioma_26529_93454

9/12/2023

this is what i have
i think it is working but issue w monogoose
this cause i changed the url?

Bbrody192

9/12/2023

I had no issues locally, what issues do you have?

Cchioma_26529_93454

9/12/2023

i failed my form on purpose to see if my validations are working
the deployed verision it works great

Cchioma_26529_93454

9/12/2023

Cchioma_26529_93454

9/12/2023

locally it is doing this

Bbrody192

9/12/2023

I saw those on railway too

Cchioma_26529_93454

9/12/2023

Bbrody192

9/12/2023

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

Cchioma_26529_93454

9/12/2023

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

Bbrody192

9/12/2023

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

Cchioma_26529_93454

9/12/2023

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?

Bbrody192

9/12/2023

I have marked this thread as solved, nothing you need to do 🙂

Looking for more? Join the community!

✋｜help

✋｜help