Headless site in multisite setup with Javascript frontend (Vue) - MIME type issue

[wickedst]

We have a multisite network and want to modernize one of the sites with a Vue frontend. I’ve done Headless WP before but not in the context of a multisite or Trellis.

I’ve picked up some other ideas from other users here (search for threads about Headless WP) and have got my /vue-frontend forward slash directory pointing towards the Vue install’s dist/index.html but it won’t load any css or js correctly. (“Refused to apply style […] because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.”)

More specifically it seems to be returning index.html for any file request (when I load the url for css in my browser and click view source it is the dist/index.html code) so I am pretty certain my nginx configuration is wrong (despite being similar to what I’ve seen elsewhere). But I also get the feeling I am missing another big piece of the puzzle.

nginx-includes/wordpress-site.conf.child:

{% extends 'roles/wordpress-setup/templates/wordpress-site.conf.j2' %}

  # Specify a charset
  charset utf-8;
  
  {% block location_primary -%}
  default_type application/octet-stream;
  include  /etc/nginx/mime.types;

  location /vue-frontend {
    try_files $uri $uri/ /vue-frontend/dist/index.html;
  }
  {% endblock %}

I’ve created /vue-frontend in ‘site/web/’, specified the correct publicPath in vue.config.js, ran npm run build … not sure what I am missing !

I will eventually be using SSR so I will need server.js so I will want to redirect to the relevant port, but for now I’d just be happy to get up and running with the SPA.

Any help greatly appreciated and thanks again for the great tools Roots team