Docker-React-Jekyll-NGINX

Opinionated starting-kit for a Jekyll + React + REST API web app, all running within Docker containers. Starting a project from a fork of it removes the painfull, repetitive and time consuming setup of most small to medium sized web projects.

Inspired from the great jekyll-webpack. But dockerized, nginxed, development ready and deployment ready.

Requirements

• docker >= 1.13.0
• docker-compose >= 1.6

Getting started

git clone https://github.com/ssimono/docker-rejenx myapp
cd myapp/
make up # first run will take some time

Then open http://localhost:4000/

What you get:

• A Jekyll static website with an Ink scaffhold theme and Font-awesome setup
• A React/ES6/JSX Airbnb linted and jest tested javascript environment
• A seemless integration between the generated Webpack bundle and the Jekyll website
• A Makefile target that builds all static files into a production ready directory
• A working sample production docker-compose file with a tunable NGINX server
• A little nodejs api acting as a placeholder for your api
• A sample React app already wired up with the remote REST API
• A simple way to add Jekyll settings and Webpack constants from build-time env variables

Deployment

The first thing to do is to build a production ready build that contains all static assets cooked by Jekyll and Webpack:

• Provide all necessary settings in an .env file: cp production.env.sample production.env.
• Set the env_file environment variable: export ENV_FILE=production.env
• Run make

This will create the build in a build folder, and will also build the Docker image for the API (e.g the "running" piece of your stack).

The way you will then deploy strongly depends on your pipeline, hosting and infrastructure. But it could be summarized with those three steps:

• Move your static build to a place where it can be served.
• Push your running services images (api in our case) to a Docker registry.
• Run your containers using the latest version from the Docker registry, with a configuration correctly set via environment variables.

To see it live, just use the sample "stack", after you made the build: docker-compose -f production.yml up. It will spawn Nginx and the sample node api, and mount the static build so it can be served. Open http://localhost:4002 to see it live!

Tunning

This is just an abstract starting kit, so it is basically meant to be tuned by forking and then starting working on your project. If you have a different stack of technologies that you often use, you should first fork it to your own starting kit, adapt it to your needs (you might prefer Bootstrap over Ink, Vuejs over React...), and then fork your fork (yeah!) when you start a project.