Koa.js & React VERY simple app

The github project can be found here.

Lately, I got to play with Koa.js and React.js and I fell in love with these 2 frameworks! So my first reaction was to create a simple App that combines these 2 gems.

A google search for a simple Koa & React app led me nowhere, so I decided to create my own sample project and share my learning with the community.

The overall idea is pretty simple: We run our react project with webpack either in development mode or production mode and we have the server renders the compiled frontend code. So how does that work?

Webpack

Webpack is using babel to transpile all the ES6 react code. You can see that in this block

In development mode ( default mode ), Webpack dev server compiles the code and serves it from memory at the Host and Port we specify here, we will see later how we set up our server to serve these files.

In product mode that we set with the command:

export NODE_ENV=production

Webpack compiles the code inside the build folder. Again, we will see later how koa loads and serves these files.


Frontend ( React )

The only thing that I want to mention in our very simple frontend code is the html page where the we dynamically set the path of the js code depending on our environment.

The html code looks like this

We set the SCRIPT_URL in the server. In our simple project, we set in in the router file.

Server ( Koa )

The server we have in our project is pretty simple. The important pieces that I would like to highlight are the following:

1- Loading the HTML file

If we are in prod, we load the built js files from the build folder, and if we are in dev mode, we load the js files from the memory of the webpack dev server.

Enjoy :)