Did that work? On Github actions ?

We're having the exact same issue. The deployments works fine on our inertia environment, but as soon as we deployed to our production environment (using GitHub action), the ASSET_URL was undefined.

Is there any verified workaround to get it to work?

The problem is with Github Actions guys...has anyone managed to access anything process.env.* while using Vapor deploy in Github Actions. I haven't. So I am, as a fall back, using the window.asset_url={} technique and for also using Github secrets. So my MIX_BASE_URL is in Github Secrets. Only then, it is accessible by the workflow while using process.env. Otherwise, Github Actions just returns undefined.

The window.asset_url={} workaround only works for getting the asset url in your ja/vue files, right? This still has the issue of webpack not having the correct base url.

I haven’t worked with GitHub Actions so I can't speak to whether process.env is available or not. But I did run into this issue when using Gitlab CI.

Based on my tests Vapor will not add ASSET_URL to the build environment if AWS_DEFAULT_REGION is undefined.

Since my .env file wasn’t committed to source, `AWS_DEFAULT_REGI was undefined in gitlab’s task runner during the webpack build process.

Committing a .env file to source with only AWS_DEFAULT_REGION=us-west-2 got things working again.

I tried adding AWS_DEFAULT_REGION to my GitHub actions script, bit that did unfortunately not work.

Sounds to me that GitHub actions is resetting env variables in some way. Has anyone contacted them about this? Perhaps you, @aligajani ?

@georgeboot I contacted Github a while ago and they have no clue either.

@aligajani I fixed the issue.

Please see my PR: https://github.com/laravel/vapor-cli/pull/39

@georgeboot How are you getting MIX_BASE_URL to work ? Where are you setting that? My bootstrap.js needs that but currently I've set that up in Github Secrets as a hack.

Where for do you need the MIX_BASE_URL? For your relative assets?

I set mix.setResourceRoot(ASSET_URL) in my mix file, and together with the example from the Vapor docs, this fixes 100% of the issues.

@georgeboot

I use MIX_BASE_URL for making a reference to my API endpoint over here below.

window.axios.defaults.baseURL = process.env.MIX_BASE_URL;

I have put this in Github Secrets for now, because .env doesn't get committed to source control.

@georgeboot What's your entire code block for this mix.setResourceRoot(ASSET_URL) please?

@georgeboot mix.setResourceRoot(ASSET_URL); doesn't fix the asset references in .vue files though (?)

@aligajani please see https://laracasts.com/discuss/channels/vapor/vapor-asset-url-and-images-in-vue

Or is that now what you mean?

@georgeboot Thanks George, but it didn't help me with assets references in .vue files.

@aligajani Hi, first of all, awesome to see that you're using the Github Action.

I just ran into the same problem myself, but managed to find a solution that works, and it's pretty straight forward as well (laravel/vapor-core v2.8.0):

webpack.mix.js (This is basically the same as the official docs, with a fallback for dev. envs.)

// ...

mix.webpackConfig(webpack => {
    const ASSET_URL = (process.env.ASSET_URL || '') + "/";

    return {
        plugins: [
            new webpack.DefinePlugin({
                "process.env.ASSET_PATH": JSON.stringify(ASSET_URL)
            })
        ],
        output: {
            publicPath: ASSET_URL
        }
    }
})

// ...

app.js (A helper method that uses the ASSET_PATH env variable)

// ...

Vue.mixin({
    methods: {
        asset: function(url) {
            return process.env.ASSET_PATH + url.replace(/^\//, '');
        }
    }
});

new Vue({
	// ...
})

SomeComponent.vue (using the helper method)

<!-- Either of these works, as the above function strips the first leading slash if there is one: -->
<img v-if="isCompleted" :src="asset('/img/success.png')" />
<img v-else :src="asset('img/error.png')" />

Let me know if it helps!

I ending up solving this similar to @paulmarshall and I wanted to share my solution for anyone who is still struggling with this. In my blade template I added:

    <script>
        window.__ASSET_URL__ = '{{ env('ASSET_URL') }}';
    </script>

Then in my app.js I picked up the variable by adding a prototype:

Vue.prototype.ASSET_URL = window.__ASSET_URL__ ? window.__ASSET_URL__ : '';

Finally I can use the injected url like so:

<img class="h-8 w-auto" :src="this.ASSET_URL + '/images/vh.png'" alt="Vid Hoarder" />

Using Laravel Jetstream (InertiaJS flavor), I added 'ASSET_URL' => env('ASSET_URL') ?? '', to HandleInertiaRequests@share. Now, I have access to it in my vue files via this.$page.props.ASSET_URL

Is there any solution that anyone found that gets ASSET_URL working in a build step on GitHub Actions? I'm using the Quasar framework, and need to tell it where to load chunks from. It does use webpack, but the solutions here don't seem to apply.

For me ASSET_URL is available in webpack.mix.js. However, I needed it in a extra-webpack.config.js for Angular to work on Vapor. See: https://www.justjeb.com/post/customizing-angular-cli-build

Solution:

cd /path/to/angular
npm i -D dotenv

Then prefix extra-webpack.config.js with following lines:

const dotenv = require('dotenv');
dotenv.config({ path: __dirname + '/../../.env' });

The path may be different in your case…

If you're wondering what's going on:

Mix is using dotenv too under the hood: https://github.com/laravel-mix/laravel-mix/blob/6ee2985e3597eb097df8f3e40032b1768f567e51/src/webpackPlugins/MixDefinitionsPlugin.js#L29

Vapor CLI adds the ASSET_URL to a .env file in the .vapor/build directory: https://github.com/laravel/vapor-cli/blob/9e93d9ee815f4329d105fec4fb266833c6c56be3/src/BuildProcess/SetBuildEnvironment.php#L71-L74