Makefiles for X11 project on macOS with xQuartz cannot find <X11/Xlib.h>

Question

I am trying to setup a makefile for my graphics project. I am using X11 on macOS, so I have installed xQuartz. I checked my install folder /opt/X11/ and it has everything correctly. I am able to run the xeyes test program. My project consists of a bunch of .cc files in a folder and I would just like to create a makefile which compiles everything.

This is my folder setup

Here is my attempt to create a makefile

CXX=g++
CXXFLAGS=-std=c++14 -Wall -g -MMD
EXEC=main
CCFILES=$(wildcard *.cc)
OBJECTS=${CCFILES:.cc=.o}
DEPENDS=${CCFILES:.cc=.d}
X11FLAGS=-I/opt/X11/include
X11LIBS=-L/opt/X11/lib -lX11

${EXEC}: ${OBJECTS}
    ${CXX} -std=c++14 -o ${EXEC} ${X11FLAGS} ${OBJECTS} ${X11LIBS} -include ${DEPENDS} 

When I run make -n I get this output

g++ -std=c++14 -Wall -g -MMD   -c -o gfx_demo_main.o gfx_demo_main.cc
g++ -std=c++14 -Wall -g -MMD   -c -o gfx_demo_window.o gfx_demo_window.cc
g++ -std=c++14 -o main -I/opt/X11/include gfx_demo_main.o gfx_demo_window.o -L/opt/X11/lib -lX11 -include gfx_demo_main.d gfx_demo_window.d 

Then when I run the makefile I get this error.

g++ -std=c++14 -Wall -g -MMD   -c -o gfx_demo_main.o gfx_demo_main.cc
In file included from gfx_demo_main.cc:5:
./gfx_demo_window.h:7:10: fatal error: 'X11/Xlib.h' file not found
#include <X11/Xlib.h>
         ^~~~~~~~~~~~
1 error generated.

I suspect it is because I am using the implicit C++ file compilation setup in make for the initial compiling of the .cc files and that setup does not properly include/link the X11 libraries.

I have a working command for compilation, I do the following command and it compiles fine. But I rather want a makefile to do the heavy lifting as my project will need a lot more files.

g++ -std=c++14 -I/opt/X11/include gfx_demo_main.cc gfx_demo_window.cc -L/opt/X11/lib -lX11

How can I get my makefile to work? Im sure the problem is not with my .cc files themselves, as they are downloaded from an official demo which I compiled and ran ok on their demo environment. Here are the #include headers for the files themselves, but I am 99% sure the issue is not with them.

gfx_demo_main.cc

#include <iostream>
#include "gfx_demo_window.h"


using namespace std;

int main() {
  Xwindow w;

  for (int i = Xwindow::White ; i <= Xwindow::Blue; i++) {
    w.fillRectangle(50 * i, 200, 50, 250, i);
  }

  w.drawString(50, 50, "Hello!");

  w.drawString(50, 100, "ABCD");

  w.drawString(50, 150, "Hello!");

  Xwindow w2(199, 199);
  w2.drawString(50, 100, "ABCD");

  char c;
  cin >> c;

}

gfx_demo_window.cc

#include <X11/Xlib.h>
#include <X11/Xutil.h>
#include <iostream>
#include <cstdlib>
#include <string>
#include <unistd.h>
#include "gfx_demo_window.h"

using namespace std;

Xwindow::Xwindow(int width, int height) {

  d = XOpenDisplay(NULL);
  if (d == NULL) {
    cerr << "Cannot open display" << endl;
    exit(1);
  }
  s = DefaultScreen(d);
  w = XCreateSimpleWindow(d, RootWindow(d, s), 10, 10, width, height, 1,
                          BlackPixel(d, s), WhitePixel(d, s));
  XSelectInput(d, w, ExposureMask | KeyPressMask);
  XMapRaised(d, w);

  Pixmap pix = XCreatePixmap(d,w,width,
        height,DefaultDepth(d,DefaultScreen(d)));
  gc = XCreateGC(d, pix, 0,(XGCValues *)0);

  XFlush(d);
  XFlush(d);

  // Set up colours.
  XColor xcolour;
  Colormap cmap;
  char color_vals[7][10]={"white", "black", "red", "green", "blue"};

  cmap=DefaultColormap(d,DefaultScreen(d));
  for(int i=0; i < 5; ++i) {
      XParseColor(d,cmap,color_vals[i],&xcolour);
      XAllocColor(d,cmap,&xcolour);
      colours[i]=xcolour.pixel;
  }

  XSetForeground(d,gc,colours[Black]);

  // Make window non-resizeable.
  XSizeHints hints;
  hints.flags = (USPosition | PSize | PMinSize | PMaxSize );
  hints.height = hints.base_height = hints.min_height = hints.max_height = height;
  hints.width = hints.base_width = hints.min_width = hints.max_width = width;
  XSetNormalHints(d, w, &hints);

  XSynchronize(d,True);

  usleep(1000);
}

Xwindow::~Xwindow() {
  XFreeGC(d, gc);
  XCloseDisplay(d);
}

void Xwindow::fillRectangle(int x, int y, int width, int height, int colour) {
  XSetForeground(d, gc, colours[colour]);
  XFillRectangle(d, w, gc, x, y, width, height);
  XSetForeground(d, gc, colours[Black]);
}

void Xwindow::drawString(int x, int y, string msg) {
  XDrawString(d, w, DefaultGC(d, s), x, y, msg.c_str(), msg.length());
}

gfx_demo_window.h

#ifndef __WINDOW_H__
#define __WINDOW_H__
#include <X11/Xlib.h>
#include <iostream>
#include <string>

class Xwindow {
  Display *d;
  Window w;
  int s;
  GC gc;
  unsigned long colours[10];

 public:
  Xwindow(int width=500, int height=500);  // Constructor; displays the window.
  ~Xwindow();                              // Destructor; destroys the window.
  Xwindow(const Xwindow&) = delete;
  Xwindow &operator=(const Xwindow&) = delete;

  enum {White=0, Black, Red, Green, Blue}; // Available colours.

  // Draws a rectangle
  void fillRectangle(int x, int y, int width, int height, int colour=Black);

  // Draws a string
  void drawString(int x, int y, std::string msg);

};

#endif

Any help greatly appreciated. I must use basic X11 for this project.