koa-mobx-react-starter

Along with aiming to use the bleeding-edge of JavaScript (within reason- and all thanks to Babel), this repository represents a choice of frameworks and libraries I think work well together for an enjoyable NodeJS and frontend coding experience.

New ☀️ - React-Router

New ☀️ - Marko

A short rundown of the various technologies:

Server

• Koa - A Node server framework with an eye on the future, using the async-await syntax. Server code compiled back to a widely adopted standard of JavaScript using Babel.
• Marko - Fast HTML rendering engine, into which we slot in our React-generated HTML

Crossover

• MobX - Awesome state management library, makes it so easy I feel like I'm cheating somehow. State stores initialized on the server, altered by some actions depending on request, and then passed over to the client to continue its state-altering journey.
• ReactJS - Build views on the server according to state and then inject functionality into those already built views on the client, and continue calling MobX actions and re-rendering accordingly
• React-Router - A routing solution for ReactJS. Works great with server-side rendering too, catching all possible routes we may want to render.

Client

• Javascript compiled with Webpack - A bundler that reads your entry JavaScript and various other files and creates a distribution build of them (using various options and plugins) for efficient client-side delivery
• Client Javascript mostly involves more React and MobX goodness for great interaction

Folder and Module Structure

Get Going:

For starters:

npm install

Or, even better (if you are using yarn):

yarn install

Then

To start the development server (which is what you want most of the time)

npm run dev

To start the production server is the usual npm start, but the code has to be built first, so:

npm run build
npm start

Or for quick production testing npm run build-start

Before deployment to a production server, your code should always be built first- so that the default npm start can be used to spin up quickly.

Some Extra Configuration Information

I'm using the babel-register module which is required before any other server code and automatically converts any further requires / imports to ES5 javascript. This is for development purposes only (npm run dev ) - as recommended.

The server code (and the React code which is used on the server) is then built into the /built folder for production use ( npm start )