Contact us
Back to all articles

Open Commerce (formerly Reaction Commerce) development environment using Traefik

Picture of Ignacio Bonelli
Ignacio Bonelli

Table of contents

Open Commerce (formerly Reaction Commerce) development environment using Traefik

When dealing with Open Commerce (formerly Reaction Commerce) you will probably want to have a server. In this article, we explain how to set it up.

Introduction

Open Commerce (formerly Reaction Commerce) has a lot of moving parts. The new 4.0 version will reduce the footprint, but it still packs 3 different parts: A backend, an admin UI and the example frontend.

The philosophy behind this platform is cloud, and they have a nicely packed Docker local development environment. But the local setup doesn’t have some moving parts you will want in the cloud: An ingress service and an HTTPS letsencrypt/CertBot automagical solution. Both of these will allow your dockerized environment to go from the local http://localhost:3000 to an elegant https:/api.mydevdomain.com.

As with other things the community has a nice orchestration recipe: proxy-traefik.

Using the Traefik recipe

If you use Digital Ocean as your hosting provider, the recipe is ready-to-use. You clone their repo, follow the configuration instructions and you simply run the ansible playbook that orchestrates it all.

Of course, any deviation from the recipe will require some DevOps knowledge on your part, so here you have an idea of what’s under the hood:

  • You have Docker override.yml files (reaction docker-compose.override.yml example) for each Docker within the development environment.
  • A Traefik dockerized environment that uses the information added with the Docker override files to “auto-configure itself”.
  • An Ansible playbook that can create the whole setup for you at Digital Ocean.

As it is all orchestrated from the Ansible playbook let me give you an idea of what it does:

  • An initial part does the server setup (Users, required packages, etc.).
  • Then the playbook hands over the setup to the local development environment building script (run by make).
  • With the development environment ready it configures your DNS options. Later on, Traefik will use them to do the DNS setup.
  • It will then change the override files with your configuration and copy them into each Dockerized environment (reaction, example-storefront, etc.).
  • Now it is time to start spinning up the Docker containers of the already created local development environment.
  • With that ready, the Traefik container can start as well and configure itself.

There are a couple of things pending for Traefik to do:

  • It will create HTTPS letsencrypt certificates for you.
  • It will tweak the DNS records of your domain using Digital Ocean API (so it can get a domain HTTPS letsencrypt certificate).
  • And using the information added to the Docker containers with the override.yml files it will configure itself as the ingress service

The result is a development server with nice and friendly URLs like https:/api.mydevdomain.com for the GraphQL server, or https:/www.mydevdomain.com for the Store Front.

Dealing with problems

Things don’t always go as planned, and you might face some speed bumps. So here you have a couple of tips.

If you need to change the recipe, always keep in mind that the community might change things. For example, the new 4.0 version of Open Commerce is packed with some interesting (and needed) changes (see more here). So I would advise you to keep things in separate files or track what you changed.

Don’t forget the firewall

The instructions are clear about this, you should set up a server firewall. Doesn’t come out-of-the-box and you’ll definitely need it. Given all the Docker containers and complex setup which results adding the firewall directly on the server won’t be a breeze. So I would suggest using the cloud provider one. For example, you have one packed up with your Digital Ocean account.

Your DNS provider

You might have a different DNS provider, in this case, you’ll need to look into what Traefik can handle (there is a looong list of supported services).

I think it is also important to understand why Traefik needs this, it is not for configuring your domains, the Letsencrypt challenge requires a DNS change which Traefik can do automatically for you.

There are other ways to do this, but it will require manual work, tweaking and individual domain certificates.

Problems running the single Ansible playbook

If something goes wrong with the Ansible script I suggest you break it up in chunks.

The main division should be the local development environment setup. The task named “Build the Reaction Platform” is the key, before that there are set up steps, after that there are building steps.

Plus the innocent “make” command within that particular step packs a LOT. And things could go wrong with it.

So breaking up the Ansible playbook into 3 parts with one part being that build run with make is a good choice.

Debugging

If you get into troubles the above can not solve you have two options:

  • Abandon and start a different setup approach (I will talk more about this in the next section)
  • Debugging this setup

To debug the setup you’ll need to gain basic Ansible playbook knowledge. The YML file is long but relatively straightforward and simple to read.

The other thing you might need is a bit of Docker expertise to follow the individual steps. But if you get to this point, remind yourself you have two different orchestrations:

This is what the Ansible playbook attempts to build under the user reaction. If you want to manage each one individually you can do:

cd /home/reaction/proxy/reaction-development-platform
make start      # To start all the Reaction Commerce containers
make stop       # To stop all the Reaction Commerce containers

Or for the proxy:

cd /home/reaction/proxy/traefik
docker-compose up       # To run and see the logs
docker-compose -d up    # To keep it running
docker-compose down     # To stop this container

Other setup options

If you find yourself still struggling you face a difficult choice. Anything you do will require DevOps knowledge on your part, and it is likely that it will be more than basic knowledge to deal with the difficulties that might arise.

Building all manually is definitely an option. You can still use the local development environment and use an Nginx proxy instead of traefik. Plus if you use individual domain SSL certificates you won’t require DNS API access. Might be a bit involved, but there are plenty of Nginx proxy recipes. The best reason to do this is to keep running on a single machine which limits the monthly cost of running the cluster.

Another option is to go fully cloud and use AWS Elastic Beanstalk or Heroku for your setup. You are likely to end up with a bit more costly setup, but it will be more robust.

My favourite would be to use Kubernetes. It is the most involved option, but it is agnostic and could run on any kind of setup. I would start with a 3 machine setup, and if you look for “reaction commerce kubernetes” you’ll find a couple of recipes.

All these options have an advantage, they will prepare you for a production setup. The recipe discussed here from the community is a starting point, but it lacks several things to call it production ready. You can go cloud with AWS, Heroku or Kubernetes. If built correctly the 3 of them can provide not only a development cloud environment but also a QA or production one.

Conclusion

Setting up an Open Commerce server is not a breeze. The recipe can work, and if it does you’ll save a lot of time. But at some point, you’ll need a production setup and that will require DevOps knowledge.

Luckily the new Open Commerce version is working towards reducing complexity which will also make the setup a bit more straightforward.