In this article, we’ll create an API using koa and a React project (frontend) which will consume the API. The idea is very simple, React will fetch some book names from the backend (koa) and render them.
Backend (Koa) project
Koa uses async functions, this gives an advantage over callback functions. By default, Koa does not come with any middlewares. That makes Koa very minimal and elegant.
At first, we need to install node (koa requires node v7.6.0 or higher).
Then install koa using :
npm i koa
Create a project directory named “book” and run
npm init -y.
As koa doesn’t come with any middlewares and we need some middlewares for this project so we’ll install them now :
npm install koa-router
npm install koa-logger
npm install koa-bodyparser
npm install koa-cors
npm install koa-static
npm install koa-mounthttp-status :
npm install http-status
Now, create a file named sever.js and put the following code there :
- Now you can run the server using
node server.js(as server.js contains initializing code).
But if we change the code then the server won’t reload automatically. So we can use nodemon package, nodemon will automatically reload server when there are any changes. Install nodemon package and run the server using
Now, we’ll add our only API endpoint, if we hit “/book” then the backend will return names of some books.
Test our API
Postman is a great tool for testing APIs. Open Postman and navigate to “localhost:3000/book” :
Our API is working fine! Now we’ll develop the frontend using React.
Frontend (React) Project
create-react-app package to create React project. At first, install “create-react-app” package using
npm install create-react-app .
Now create the react app named “book-frontend”
create-react-app book-frontend .
Change the current directory to “book-frontend” and run
npm start .
It will try to run our frontend server at default port 3000, but as we’re running our backend server at 3000 port so run the frontend server at any other port like 3001/3002, etc. (I’m running at 3001).
Navigate to localhost:3001 in your favorite browser :
We’ll use two more packages in the frontend. Let’s install them first:
npm install axios
npm install react-router-dom
Put the following code into index.js (this code will fetch data from backend and render them to frontend).
Our index.js :
And modify App.js like this :
All the features of our million dollar book app are complete now!
Navigate to localhost:3001 to see the output (I’m not a pro in designing at this moment!)
Serving React and Koa together
This is the key point of this article, we’ll serve these two apps together in the same server.
Create the “build” version of our frontend app
Navigate to the book-frontend directory and run
npm run build . This will create a build directory.
Now, go to server.js and change like this :
Now close all the previous servers (if they’re active until now). Go to the project directory (book folder), open terminal/command-prompt and run the server using
node server.js or
nodemon server.js . Go to your browser and navigate to localhost:3000 and BOOM! We’re serving our Koa and React app in the same server!
Look, we’re at 3000 port now! Both the frontend and the backend are at the same port.
You can also read :
- Understanding Python decorators
- Functions as first class object in Python
- Playing with inheritance in Python
- Developing our first PWA using React
- React navigation cheatsheet
- Min priority_queue in C++
- Naming your variables