Skip to main content

Multi projects

Introduction​

With the multi projects principle, you can create multiple project that contain one or multiple apps and that can communicate each other.

Multi apps pros and cons​

When it comes to multi application projects, you have two options:

  1. Create a single project that contains multiple apps
  2. Create multiple projects that contain their own app

Each options has its pros and cons, but in general, the first option is more suitable for small to medium sized projects, while the second option is more suitable for medium to large sized projects.

Pros​

  • You don't need to install every projects to work on a single app (it depends on your stack configuration).
  • You have a real clear and neat separation between apps, as you could have in production environment.

Cons​

  • You have to maintain and guarantee the compatibility between all apps overtime.
  • You need to use a proxy to communicate between apps.
  • You need to describe the network separation between apps, to keep it as simple as possible for your teammates.
  • This is ressource consuming, as you need to run multiple projects at the same time.

The stack​

In this example, we will create two projects:

  • Strapi project: A headless CMS that will be used to manage the content of our website and provide an API for our frontend.
  • NextJS project: A frontend application that will be used to display the content of our website.

To do so, we will use the following templates:

The next steps assume that you have already created your Strapi project as my_strapi_project and your NextJS project as my_next_project.

The proxy​

To communicate between our projects, we will use the proxy tool. This is a simple tool that will allow us to proxy requests from one project to another.

Projects configuration​

Because you can't have two projects running on the same port, you need to configure your projects to listen on different ports.

Strapi project​

./strapi-project/.docker/docker-compose.yml
  # ...
  apache:
    # ...
    ports:
      - "8080:80" # Change the host port to 8080
      # - "443:443" # If you want to use https change it too, but for this example we will avoid to make things more complicated

NextJS project​

./nextjs-project/docker-compose.yml
  # ...
  apache:
    # ...
    ports:
      - "8081:80" # Change the host port to 8081
      # - "443:443" # If you want to use https change it too, but for this example we will avoid to make things more complicated

Create the proxy file​

Wherever you want, you need to create a vhosts configuration file for your proxy. This file will be used to configure the proxy to redirect requests to the right project from your host.

./proxy/vhosts.conf
<VirtualHost *:80>
  ServerName my_next_project.dev.local
  ProxyPreserveHost On
  ProxyRequests On
  ProxyPass / http://host.docker.internal:8080/
  ProxyPassReverse / http://host.docker.internal:8080/
  ProxyTimeout 300
</VirtualHost>

<VirtualHost *:80>
  ServerName my_strapi_project.dev.local
  ProxyPreserveHost On
  ProxyRequests On
  ProxyPass / http://host.docker.internal:8081/
  ProxyPassReverse / http://host.docker.internal:8081/
  ProxyTimeout 300
</VirtualHost>

Updates your projects vhosts​

Previously we solve the problem of the host port, but we still can't resolve the vhost of a project from another project (may work with host.docker.internal:{port}).

To solve this problem, we need to update the vhosts of our projects to use the proxy vhosts of the host machine.

Strapi project​

Adds the following vhost to your strapi project.

./strapi-project/.docker/etc/apache/httpd-vhosts.conf
# ... Other vhosts
<VirtualHost *:80>
  ServerName my_next_project.dev.local
  ProxyPreserveHost On
  ProxyRequests On
  ProxyPass / http://host.docker.internal:8080/
  ProxyPassReverse / http://host.docker.internal:8080/
  ProxyTimeout 300
</VirtualHost>

Docker resolves the host.docker.internal to the host machine ip address, so we can use it to proxy requests to the host machine. In some operating systems, you may need to add the host.docker.internal to the extra_hosts of your docker-compose.yml file as below.

./strapi-project/.docker/docker-compose.yml
  # ...
  apache:
    # ...
    extra_hosts:
      - "host.docker.internal:host-gateway"

NextJS project​

Adds the following vhost to your nextjs project.

./nextjs-project/.docker/etc/apache/httpd-vhosts.conf
# ... Other vhosts
<VirtualHost *:80>
  ServerName my_strapi_project.dev.local
  ProxyPreserveHost On
  ProxyRequests On
  ProxyPass / http://host.docker.internal:8081/
  ProxyPassReverse / http://host.docker.internal:8081/
  ProxyTimeout 300
</VirtualHost>

Docker resolves the host.docker.internal to the host machine ip address, so we can use it to proxy requests to the host machine. In some operating systems, you may need to add the host.docker.internal to the extra_hosts of your docker-compose.yml file as below.

./nextjs-project/.docker/docker-compose.yml
  # ...
  apache:
    # ...
    extra_hosts:
      - "host.docker.internal:host-gateway"

Start the stack​

Now that we have our projects and our proxy configured, we can start our stack.

./strapi-project
dcmd up
./nextjs-project
dcmd up
./proxy
dcmd proxy start ./vhosts.conf