Managing static assets (images, fonts, etc...)

[nathan-de-pachtere]

Hi

I'm currently setting up a monorepo for Quasar Framework projects and Symfony and looking into assets management. As I need to shared icons, fonts, favicon, image, logos, etc... between multiple projects. Just to let you know the particularity of Quasar projects assets : https://quasar.dev/quasar-cli-vite/handling-assets

So I looked for Nx system to see how it is done on their side. Here 2 videos on this subject :
https://www.youtube.com/watch?v=iU2PKRaTGQ0&ab_channel=Nx-Smart%2CFast%2CExtensible
https://www.youtube.com/watch?v=LYjX2V-eQa8&ab_channel=Nx-Smart%2CFast%2CExtensible

So, for example, the monorepo structure is this one (build with moonrepo) :

.moon
apps
  project-1 //symfony project
    public // need to have assets contained in libs/assets
  project-2 //quasar project
     public // need to have assets contained in libs/assets
  project-3 //quasar project
     public // need to have assets contained in libs/assets
     index.html //reference assets at the root of the public directory (prod and dev)
  ...
libs
  assets
    logo // .png, .svg , etc...
    fonts
  other-lib
  ...

The main goal is to have a centralized way to manage assets in dev and prod mode and not copy/paste them into each project.
They are not assets processed and embedded by the build system of a project (Vite in the case of Quasar project). So no module resolving configurations to help on that.

Should I make a moon task to keep directories sync by copy/paste static assets ?
Is there a way to just linked them ?
Do I need to .gitignore project level assets files ?

I don't know what's the best strategy for assets, so if any of you guys have handled it greatly, I'm eager to learn.

[milesj]

@nathan-de-pachtere This is a good question. While true moon doesn't have anything built in to support assets, I could see something like this working with the following task:

# .moon/tasks.yml
tasks:
  sync-assets:
    command: 'ln -s $workspaceRoot/libs/assets $projectRoot/libs/assets'
    platform: 'system'
    inputs:
      - '/libs/assets/**/*'

This is a top-level task that creates a symlink from the shared assets folder, to an assets folder within the project.

[nathan-de-pachtere]

@milesj Thanks for your quick and great answer.

What I have done based on your answer :

# apps/project-1/moon.yml
dependsOn:
  - 'lib-assets' # for good project graph and dependencies

tasks:
  dev-spa:
    deps:
      - 'sync-icons' # to be sur they are in place for dev
    command: 'quasar dev -m spa'
    local: true

  dev-pwa:
    deps:
      - 'sync-icons' # to be sur they are in place for dev
    command: 'quasar dev -m pwa' 
    local: true

  build:
    deps:
      - 'sync-icons' # to be sur they are in place for build
    command: 'quasar build -m pwa'

  sync-icons:
     command: 'ln -sfn $workspaceRoot/libs/assets/icons $projectRoot/public/icons'
     platform: 'system'
     inputs:
       - '/libs/assets/icons/**/*'

I haven't chosen to store task in the root .moon/tasks.yml because I need more granular setup for each project. Like using only icons in public folder and fonts only from the libs handling my CSS as fonts are used through it. So I'm going to make multiple tasks in each project that need assets, quite tedious to maintain but at least I got some control over the things I link to each project and where I linked them into the project.

Moreover, I got some company assets and some project assets. The project can use company assets, I can have something like this :

project use lib-project-assets that use lib-assets
        use lib-project-scss that use fonts folder in lib-project-assets that use fonts folder in lib-assets

Really still don't know if I'm going in the right direction, but still going in 😅 (going to update this discussion in case I encounter some limitation in the future)

Cheers and thanks again.

[milesj]

Another option to avoid the repetition is to create a bash or node script, and use arguments like --icons, or globs to control what gets synced. But this may be a lot of work too.

sync-icons:
  command: 'bash ./sync-assets.sh --out $projectRoot/public/icons --icons'
  platform: 'system'
  inputs:
    - '/libs/assets/icons/**/*'
  options:
    runFromWorkspaceRoot: true