Serving React and Koa together

Reactjs and Koajs are two great frameworks of javascript. I wonder how to serve React and Koa projects in the same server and same port! Finally, I’ve reached a solution and today I’ll discuss it.

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 :

koa-router : npm install koa-routerkoa-logger : npm install koa-logger koa-bodyparser : npm install koa-bodyparser koa-cors : npm install koa-cors koa-static : npm install koa-static koa-mount : 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 usingnodemon server.js .

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

We’ll use 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 inside the project directory (book).

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: axios : npm install axios react-router-dom : npm install react-router-dom

Create a folder named Component inside src folder, then inside Component folder create a folder named Book. Inside book create a javascript file name index.js (That means: /src/Component/Book/index.js). 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 :

1. Understanding Python decorators
2. Functions as first class object in Python
3. Playing with inheritance in Python
4. Closure in Python and Javascript
5. Developing our first PWA using React
6. React navigation cheatsheet
7. Min priority_queue in C++
8. Naming your variables

Serving React and Koa together was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.