Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Absolute path for assets in development mode, allowing correct paths when app is added to legacy website

See original GitHub issue

Is your feature request related to a problem? Please describe. Need image paths to be absolute in order to preview vue app running on legacy website.

Legacy website example:

<!-- legacy website running on a local domain mydomain.com.localhost-->
<body>
<h1>My legacy website with vite / vue app added on top</h1>
<div id="app">
  <div>
     ...
    <!-- path is relative to localhost:3000, but the source for the app 
    is located at mydomain.com.localhost/packages/my-vite-app/index.html  -->
    <img src="/assets/image.jpg">
    ...
  </div> 
</div>
<script src="http://localhost:3000/app.ts"></script>
</body>

Describe the solution you’d like A way to enable absolute paths when running dev so that it’s possible to work and preview the vue app directly on the legacy website. Alternatively, add a how-to to the docs as I’ve seen people requesting something similar.

Describe alternatives you’ve considered I’ve tried to find a way to rewrite urls via vue() vite plugin, server.proxy or rollup rewrite plugin which works for builds but not for development.

Issue Analytics

State:
Created 3 years ago
Comments:17 (6 by maintainers)

Top GitHub Comments

6reactions

olemariuscommented, Mar 8, 2021

Wrote a quick plugin to test, and it worked 😃

absolutify-paths.ts

import { Plugin, } from 'vite';
import { CustomPluginOptions } from 'rollup';
export const absolutifyPaths = (options: CustomPluginOptions = {}): Plugin => {
    const { strings = [], enforce = 'pre', apply = 'serve' } = options;
    return {
        name: 'absolutify-paths',
        enforce: enforce,
        apply: apply,
        transform: (code: string, id: string) => {
            let transformedCode = code;
            strings.forEach((str) => {
                if (code.includes(str[0])) {
                    transformedCode = transformedCode.split(str[0]).join(str[1]);
                }
            });
            return {
                code: transformedCode,
                map: null
            };
        },
    };
};

vite.config.js

import { absolutifyPaths } from 'absolutify-paths';
absolutifyPaths({
    strings: [
        ['url(/src', 'url(http://localhost:3000/src/'],
        ['url(\'/src/', 'url(\'http://localhost:3000/src/'],
        ['src="/src/', 'src="http://localhost:3000/src/'],
        ['\'/src/', '\'http://localhost:3000/src/'],
    ]
}),

Update! I’ve updated the code above as the previous replace function didn’t work on all searched strings. Also added some more examples in the strings option

3reactions

khalwatcommented, Jul 23, 2021

ah, I have it sorted. I needed to change enforce to be post so that it runs after PostCSS has done its import thing.

Here’s what is working for me:

    {
      name: 'static-asset-fixer',
      enforce: 'post',
      apply: 'serve',
      transform: (code, id) => {
        return {
          code: code.replace(/\/src\/(.*)\.(svg|jp?g|png|webp)/g, 'http://localhost:3000/src/$1.$2'),
          map: null,
        }
      },
    },

Also updated article: https://nystudio107.com/blog/using-vite-js-next-generation-frontend-tooling-with-craft-cms#vite-processed-assets

Top Results From Across the Web

Rails assets paths are not compiling correctly - Stack Overflow

so my stylesheet doesn't load. production environment: config/environments/production.rb. Cms::Application.configure do # Settings specified here will take ...

The Asset Pipeline - Ruby on Rails Guides

It allows assets in your application to be automatically combined with assets from other gems. The asset pipeline is implemented by the sprockets-rails...

Build settings reference | Apple Developer Documentation

A detailed list of individual Xcode build settings that control or change the way a target is built.

Building for Production - Vite

When it is time to deploy your app for production, simply run the vite build ... public path, simply specify the base config...

Public Path - webpack

It allows you to specify the base path for all the assets within your application. ... Essentially, every file emitted to your output.path...