ntraykov's avatar

Splitting assets for frontend and admin

Hi guys!

I am creating an admin panel for my website. I've created everything needed to get started (separate controllers, routes, view files), but the only thing I don't know is how to manage the assets.

I've created two separate vue projects for both the admin and the frontend, that share the same dependencies (because there is only one package.json/laravel.mix.json). I've put my admin assets in public/admin/js and public/admin/scss and my frontend assets in public/frontend /js and public/frontend /scss.

The problem: I know I can tell Mix to put my admin assets in one place and my frontend assets in another, but when using mix('js/app.js', 'admin') in blade, it cannot find mix-manifest, because it is in the public dir.

How can I tell mix to create two different manifests in two different dirs and use them. Or, If there is another approach, which is better, please share it.

0 likes
14 replies
ntraykov's avatar

Thanks for your comment, @bashy. I already know what the helper does. The path generated is public/admin/mix-manifest.json. So, probably I need to put mix('admin/js/app.js') and it will find the manifest. I will try this later. Thanks!

bashy's avatar

@ntraykov No problem.

../ won't work because it generates it through public_path().

When you try it, let me know what the path is generating as and I'll probably be able to help more.

1 like
martinbean's avatar

@ntraykov You can create multiple "entry points" and register them with Mix:

mix.js('resources/assets/js/app.js', 'public/js')
   .js('resources/assets/js/admin.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .sass('resources/assets/sass/admin.scss', 'public/css');
2 likes
ntraykov's avatar

@bashy

So again, the full picture:

My compiled assets are in public/admin/js and public/admin/css.

Here is my mix-manifest:

{ "/admin/js/app.js": "/admin/js/app.js", "/admin/css/app.css": "/admin/css/app.css" }

And when I use mix('/admin/js/app.js'), everything is fine, which is logical, since my mix-manifest is in the public directory and there is a key '/admin/js/app.js'.

The problem: In the browser, I have 404 - it cannot find <script src="/admin/js/app.js"></script>

If I change it to <script src="/js/app.js"></script> from the developer console, it manages to find it. But if I change the mix call to mix('/js/app.js'), then the mix fails, because there is no such key in mix-manifest.

I don't have a clue how to figure that out.

bashy's avatar

@ntraykov I don't quite get it. You have 2 sets of duplicate entries in your mix-manifest.json file?

1 like
ntraykov's avatar

@bashy The first entry is for js, the second is for css. If I didn't put mix.version() it is normal that the key and the value will be equal, right?

ntraykov's avatar

@martinbean I've tried this, but it says 404 when I try to load the script in the browser.

@bashy I also have this in my RouteServiceProvider


Route::domain('{admin}.portfolio.localhost')
            ->middleware('web')
            ->namespace("$this->namespace\Admin")
            ->group(base_path('routes/admin/web.php'));

Is this related to the fact that actually somehow public/admin is the root of my admin assets?

ntraykov's avatar

Or is it possible to be related to the .htaccess ?

bashy's avatar

Oh sorry, thought you had 4 files. Formatting :P

So they don't get saved to the admin folder? I have multiple apps that have front/back assets and it works fine for me.

1 like
ntraykov's avatar
ntraykov
OP
Best Answer
Level 11

Guys, I managed to figure it out. I am coming from Yii2 where you have frontend and backend directories, and everything is split. I've always created a new subdomain for the backend, which I did now as well. That's why the root was public/admin. Now I've just created a prefix 'admin' instead of a subdomain and everything works perfectly.

Thanks a lot to both of you!

bashy's avatar

Nowhere did you put you were using a subdomain?

ntraykov's avatar

I've had project_root/public/admin and a subdomain to this directory (admin.projectname.localhost). And project_root/public/frontend with the main domain name (projectname.localhost). Both with index.php, css, js and fonts directories.

Now I have projectname.localhost/admin and it works. Ideally, I would do it in the way above, but that works too.

No I just split the assets, but have only one index.php

bashy's avatar

If you said about subdomain, I'd say you can put the full path to the URI as the second param.

Please or to participate in this conversation.