Creating Your first Simple Fullstack Website: A icebreaker into API,CORS and Proxy

ever got scare when the word fullstack comes in , whether it be from your senior or some youtubers.. fullstack it self has become a demanding field in this fast phase tech world. Full stack is consist of 2 part — the frontend and the backend. you might have seen frontend from your school days, creating with those html and js. but web evolve, many frameworks came to picture. where react dominate the market with its versatile usage and easy to understand component.

so here we will be using react for the frontend and node (express) for the backend. many people create a fuse when the word backend comes. but for me as a frontend person, backend never felt hard. consider it as a place where API’s endpoint are being serve. wait wait? dont know about endpoint, bascially it is a url path where a frontend person, can find or access the data that are there in the endpoint.. hopes it clear now..

so lets start with our simple website where we will simply create a website where we fetch data from the backend and show it to our ui frontend.

1. BACKEND

in terminal npm init to create to package json, put the type as module as we will use the es6 version(newer) and make a start in the script with content of node server.js which is out main file and install express

2. Working with server.js file

step1. import the express

step2. declare the express server by assigning it to a constant

step3.now send request by .get ,here we send a array of object having id,title,content as response, the first value is the path that you want

step4. declare the port. it is good practice to use process.env.PORT as in production the port will be given in .env file and will not be 3000

step5.listen to the port and console log it to see

done!!!!

now this will be your port and url

we have successfully created a end point …

2.FRONTEND

we can use any bundler like vite, npm create.. here we use vite to create a react boiler plate..

step1. UseState

make a state for changing the ui for the frontend

in your main body map throught the state and give the datas thats we send like title id content from backend

now how can we get the data(fetching part). for fetching there are many ways like the fetch it self , or the axios or the react query.

here we will use axios.so in useeffect (because we want to run it only when the window re-render at first) we use the axios to get the data

here have you notice something unusuall.. see the url.. it is only half, usually we put the whole url to get the data but why here we have put half.

firstly if we run it with the whole, we will face CORS issue. cors — for safety for example, you wont allow any random person in your house right, only those whose origin is here like your dad,mom,cousin can come.

cross origin request- your server is running on some port and here there is another application running right, and it is not like everyone can take data from here to there if it happens server will get to many request which will create bill like for bandwith and size origin same means to have same port, url.

SOLUTION FOR CORS

ip whitelist/domain whitelist one solution is to whitelist the port number take u r working on in frontend(work of backend dev)

another is using proxy — here we used that.

SO WE HAVE SEEN THAT usually we write the whole url but it is not a good way because in future the endpoint will not stay the same, cause in production the domain is not localhost so to deal with it we use proxy, there are different ways depending on the bundler, search proxy vite or proxy npm create to understand in vite we make changes in the vite.config

here it says if /api is there it will apend the localhost to it now it solves the issue of cors as it thinks that req is coming from the same port.

so ya finally your output will be there.

Final page

So in this we have seen the full process stream of how in a backend a API endpoint is created and how in frontend we fetch it. we also saw that how CORS issue occurs and how to coup with it using proxy. So this is it. hope you guys keep on learning and growing….. also want to give a quick shoutout to Sir Hitesh for his youtube tutorials on such topic..