Handling path to assets (css, js) between local and production environment

Question

How do you guys handle different paths between local and production environments regarding css and js files in your template twig files?

I am following the tutorials of nystudio107, which are simply awesome but can't see how this is be solved even in his pre-ready and configured craft3 download packages.

For example, in local dev I'd like to keep the css and js files separated from each other and unminified for better debugging. On production the files are combined and minified with gulp and moved to a /dist/css – /dist/js folder, which then does not matches the layout path I set in the twig files. Do you ran into similar problems and use a performant solution or do you hardcode the paths to the files on production environment?

Answer 1

If you are using Craft 3 Multi-Environment then you can add environment specific aliases to those assets in your general config file.

Eg:

// Live (production) environment
'live' => [
    // Craft defined config settings
    'allowUpdates' => false,
    'backupOnUpdate' => false,
    'devMode' => false,
    'enableTemplateCaching' => true,
    'isSystemOn' => true,
    // Aliases parsed in sites’ settings, volumes’ settings, and Local 
    volumes’ settings
    'aliases' => [
      '@assetPath' => '/dist/'
    ],
    // Custom site-specific config settings
    'custom' => [

    ]
],

Then, in your templates you can use {{ alias('@assetPath/js/' }}.

Note, while I've called the alias assetPath, you can name it anything you like.