Q&A on setting up the project locally

[sadath2001]

Hi, This is a space to ask questions on setting up the project locally

[krishashah-03]

Hi, @sadath2001 @AlfiyaSiddique , after cloning the repo the backend got set perfectly but in frontend only main-page is loafing ,if I'm clicking any other link the blank page is coming as I'm showing in the video.
After inspecting it showed this line: Access to XMLHttpRequest at 'http://localhost:8080/api/recipes' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I'm here attaching the video also :

TastyTrails.and.15.more.pages.-.Personal.-.Microsoft_.Edge.2024-10-15.21-13-47.mp4

eslintrc.cjs.-.GitHub.Projects.-.Visual.Studio.Code.2024-10-15.21-20-51.mp4

I would like you to look into this matter as without solving this issue I might not be able to work on adding new feature!

[sadath2001]

Hey @krishashah-03 ,, you should add localhost:5173 in server.js file as well. Did you do that?

[krishashah-03]

Hii @sadath2001 Yes, I actually didn't set the port in server.js but even after seeting the port now, I'm still not getting the images
Now this errors are coming:


Can you tell me how to solve this react errors?
Bte thankyou for helping me solving this one problem!

[sadath2001]

To solve this you have to add Google client Id in the front end .env file.

Fire up Google to check how to generate a Google client Id(for Google o auth login)
And paste it there

In back end make sure to add your GitHub credentials such as repo(for recipe image pushing), branch and also your GitHub access token(can ge generated via your GitHub settings)

This should solve your error.

[sadath2001]

server.js:

[sushil-sagar05]

Hey @sadath2001 i put all the answers to .env in my backend and in fronted i also did client id part but nothing happens.. Please help me with this

[sadath2001]

@sushil-sagar05 the screenshot of the error that you're getting

[sushil-sagar05]

@sadath2001

[sadath2001]

@sushil-sagar05 the first error. Can you send it's screenshot?
Youve sent half

[sushil-sagar05]

@sadath2001

[sadath2001]

@sushil-sagar05 , not sure on this one, I'll get back to you by tomorrow.

[sushil-sagar05]

any update @sadath2001 ? please solve my problem

[sadath2001]

you have added 5174 as port in allowed origins (server.js line 20), are you sure that your front end is running on that port?

[sushil-sagar05]

you have added 5174 as port in allowed origins (server.js line 20), are you sure that your front end is running on that port?

yesss

[sadath2001]

@sushil-sagar05 ,
can u send me the screenshot of your front end console.
also, it should be http://localhost:5174, without a /

[sadath2001]

@sushil-sagar05 , can u send me the screenshot of your front end console. also, it should be http://localhost:5174, without a /

did you do this?

[sushil-sagar05]

yess man i did , basically i want to add slider properties to world best dishes section in landing page but i am not able to connect my database here and donot access all the recipes list :<

[sushil-sagar05]

@sadath2001

[sadath2001]

@sadath2001

@sushil-sagar05 , then even im not sure about this. the solutions that i suggested were all i could think of.

[AlfiyaSiddique]

@sushil-sagar05
Please check the following things one.

1. The MongoDB URL is in .env, so console.log and check if the URL is getting retrieved from .env file to others files correctly or not.

2. If the point 1 is working fine go to your monogdb atlas and check that the network access have 0.0.0.0 IP address is added, a reference is given below:
   

3. If both of the above points is correct, check the MongoDB URL, it should be in this format:
   mongodb+srv://<username>:<password>@<cluster>.<random characters>.mongodb.net/<database_name>?retryWrites=true&w=majority

[sushil-sagar05]

Hey @AlfiyaSiddique yesss the 3rd point is the problem i don't write database name in mongodburi, But the problem is after that i am not able to get the world's best dishes section

[AlfiyaSiddique]

@sushil-sagar05 That is because you do not have any recipes in your database. In deployed link, the app is connected to the actual database but in local you are connecting to your own database. So add some recipes in the local app, and you will get the world's best dishes section. Let me know if this works