With web projects running inside Docker containers.

To develop a web project¹ on a local machine, we usually launch a web-server listening at http://localhost:port.

In production, the url for this project is https://my-app.com.

We want to mimic the production environment on the local computer. How can we have a custom url and HTTPS, like https://my-app.local?

In this article, we are going to:

Prerequisites
I tested on Mac. It should work on other platforms, but I didn’t try.
- Have Docker on our computer.
- Several web projects run inside Docker containers on our local machine. (Here is an example)

Set a reverse proxy

We want to route requests to custom urls (like my-app.local) to specific web-servers. This is the role of a reverse proxy.

We are going to use nginx as…


How to setup Docker-compose to isolate a web application

Each computer has a specific environment: some tools and specific version of languages are globally installed, our applications share databases… When we work on a web project, the production server might be different from our computer. This is error prone.

Docker solves this problem by running applications in isolated environments.

In this article, we are going to

Prerequisites
- install Docker on your computer.

The application

As an example, we’ll take a very simple Node.js / Express / MongoDB aplication. Here is the package.json of this app:

{
"name": "test-app",
"version": "0.1.0",
"main": "index.js",
"scripts": {
"dev": "nodemon ./index.js",
"start": "node ./index.js"
},
"dependencies": {
"express": "^4.16.3",
"mongoose": "^5.0.16"
},
"devDependencies": {
"nodemon": "^1.17.3"
}
}

It has two scripts:


How to use pure functions, closures and functions composition

In a previous article we went through the steps to Smooth a svg path with cubic bezier curves. Here, we are going to refactor this code with functional programming.

Functional programming is the process of building software by composing pure functions, avoiding shared state, mutable data, and side-effects.

From What is functional programming? by Eric Elliott

Imperative code has a few problems:

With a large codebase, this is difficult to maintain and test. Functional programming aims to solving these problems.

So let’s refactor the imperative code from the previous article and use concepts related to functional programming: pure functions, closures and functions composition.

What are we trying to achieve?


And a bit of trigonometry

While it is straightforward to draw straight lines in a Svg element, it requires a bit of trigonometry to smooth these lines. Let’s see how.

Follow up article: refactor this code with functional programming.

We have an array of tuples representing the points coordinates of a line.

const points = [[5, 10], [10, 40], [40, 30], [60, 5], [90, 45], [120, 10], [150, 45], [200, 10]]

And a Svg element in an HTML page:

<svg viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg"></svg>

We want to make a <path> element from the points array.

Create a path from the points

The d attributes of <path> always starts with a move to command: M x,y, followed by several commands depending on the type of shape. …


Setup a reverse-proxy, and, for each website running inside a Docker container, create an automatic nginx configuration and a SSL certificate.

Hosting multiple websites on a single Virtual Private Server is simple and efficient. Nowadays, HTTPS is a required feature for any website.

Let’s see how to:

Prerequisites
- Several websites run inside Docker containers on a single server. (Each one could either be a static files server, or Wordpress running on Apache or combination of a Node.js app and a reverse-proxy like in my previous article).
- The domain name for each website is configured to point to the IP of the server.

The manual way to setup a nginx reverse-proxy…


A complete example

A modern web-app requires an environment to run JavaScript on a server and to request data from APIs running on other type of servers.

Edit Apr 28, 2018: removed the deprecated links docker-compose instructions.

Let’s make an example which does the following when the server receives a client request:

Architecture overview

The code is on Github.

This could be extended to build a Progressive Web App (with Vue.js or React) on top of the Wordpress API (or anything with a REST API).

tl;dr

#…


Three steps to configure the deployment process with a Git Hook.

Git is a great tool for version control, but not only. It can also simplify the deployment process, thanks to Git Hooks.

Three steps to configure the deployment process:

1. Create an empty Git repo on the server

2. Write a Git Hook to deploy the code

3. Deploy from the local computer

tl;dr

On the remote server:

# Copy the 'project-create.sh' bash script https://gist.github.com/francoisromain/58cabf43c2977e48ef0804848dee46c3
# Then create a new project
# It configures a Git repo, and creates a Git hook
$ bash ./path/to/project-create.sh <your-project>

On your local computer:

# Add your server as a Git remote called 'deploy'
git remote add deploy ssh://<your-name>@<your-ip>/srv/git/<your-project>.git/
# Push your code and deploy
git push deploy master

Prerequisite
- Connect to the server via SSH without…

François Romain

Freelance developer / designer → http://francoisromain.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store